<script setup>
import { ref, computed } from 'vue'

const activeTab = ref(0)

const tabs = [
  { name: '国内合作院校', key: 'domestic' },
  { name: '国际合作院校', key: 'international' },
]

// 国内合作院校数据
const domesticList = [
  [
    { name: '山东农业大学', icon: '/images/partner/partner_domestic_1.png' },
    { name: '克拉玛依职业技术学院', icon: '/images/partner/partner_domestic_1-2.png' },
  ],
  [
    { name: '襄阳职业技术学院', icon: '/images/partner/partner_domestic_2.png' },
    { name: '长春金融高等专科学校', icon: '/images/partner/partner_domestic_2-2.png' },
  ],
  [
    { name: '北京理工大学', icon: '/images/partner/partner_domestic_3.png' },
    { name: '北京科技职业大学', icon: '/images/partner/partner_domestic_3-2.png' },
  ],
  [
    { name: '武汉科技大学', icon: '/images/partner/partner_domestic_4.png' },
    { name: '北京财贸职业学院', icon: '/images/partner/partner_domestic_4-2.png' },
  ],
  [
    { name: '长春大学', icon: '/images/partner/partner_domestic_5.png' },
    { name: '广西金融职业技术学院', icon: '/images/partner/partner_domestic_5-2.png' },
  ],
  [
    { name: '吉林师范大学', icon: '/images/partner/partner_domestic_6.png' },
    { name: '西安理工大学', icon: '/images/partner/partner_domestic_6-2.png' },
  ],
  [
    { name: '山东管理学院', icon: '/images/partner/partner_domestic_7.png' },
    { name: '河南财经政法大学', icon: '/images/partner/partner_domestic_7-2.png' },
  ],
  [
    { name: '新疆交通职业技术学院', icon: '/images/partner/partner_domestic_8.png' },
    { name: '山东理工大学', icon: '/images/partner/partner_domestic_8-2.png' },
  ],
]

// 国际合作院校数据
const internationalList = [
  [
    { name: '美国斯蒂文斯理工学院', icon: '/images/partner/partner_internationality_1.png' },
    { name: '加州多米尼克大学', icon: '/images/partner/partner_internationality_1-2.png' },
  ],
  [
    { name: '美国玛丽伍德大学', icon: '/images/partner/partner_internationality_2.png' },
    { name: '纽约州立大学石溪分校', icon: '/images/partner/partner_internationality_2-2.png' },
  ],
  [
    { name: '美国威斯康星协和大学', icon: '/images/partner/partner_internationality_3.png' },
    { name: '美国帕克大学', icon: '/images/partner/partner_internationality_3-2.png' },
  ],
  [
    { name: '美国康博斯威尔大学', icon: '/images/partner/partner_internationality_4.png' },
    { name: '美国雪城大学', icon: '/images/partner/partner_internationality_4-2.png' },
  ],
  [
    { name: '瑞士酒店管理大学', icon: '/images/partner/partner_internationality_5.png' },
    { name: '美国德保罗大学', icon: '/images/partner/partner_internationality_5-2.png' },
  ],
]

const handleTabChange = (index) => {
  activeTab.value = index
}

const currentList = computed(() => {
  return activeTab.value === 0 ? domesticList : internationalList
})
</script>

<template>
  <div class="home-partner">
    <div class="home-partner-inner">
      <div class="home-partner-title">
        <h2>合作院校</h2>
      </div>
      <div class="tab">
        <ul>
          <li
            v-for="(tab, index) in tabs"
            :key="tab.key"
            :class="{ active: activeTab === index }"
            @click="handleTabChange(index)">
            {{ tab.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="scroll-container">
      <div class="scroll-track" :key="activeTab">
        <template v-for="copy in 3" :key="copy">
          <div
            v-for="(column, index) in currentList"
            :key="'a-' + index"
            class="partner-column"
            :class="{ 'partner-column-odd': index % 2 === 0, 'partner-column-even': index % 2 !== 0 }">
            <div v-for="(item, idx) in column" :key="idx" class="partner-item">
              <div class="partner-logo">
                <img :src="item.icon" :alt="item.name" />
              </div>
              <div class="partner-name">{{ item.name }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.home-partner {
  background: #fff;
  padding-bottom: 80px;

  .home-partner-inner {
    max-width: 1200px;
    margin: 0 auto;

    .home-partner-title {
      h2 {
        padding: 90px 0 60px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        line-height: 1;
        text-align: center;
      }
    }
  }

  .tab {
    margin-bottom: -3px;

    ul {
      display: flex;
      gap: 40px;

      li {
        position: relative;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        padding-bottom: 10px;
        transition: color 0.3s;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 5px;
          background: var(--main-color);
          transition: width 0.3s;
        }

        &:hover {
          color: var(--main-color);
        }

        &.active {
          color: var(--main-color);

          &::after {
            width: 30px;
          }
        }
      }
    }
  }

  .scroll-container {
    border-top: 1px solid #d5d5d5;
    overflow: hidden;
  }

  .scroll-track {
    display: flex;
    gap: 24px;
    animation: scroll 30s linear infinite;
    width: fit-content;

    &:hover {
      animation-play-state: paused;
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }

  .partner-column {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding-top: 50px;
    flex-shrink: 0;
  }

  .partner-item {
    .partner-logo {
      width: 300px;
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
    }

    .partner-name {
      margin-top: 20px;
      font-size: 14px;
      line-height: 1;
      text-align: center;
    }
  }

  .partner-column-odd {
    .partner-item:first-child {
      .partner-logo {
        background: #ffffff;
      }
    }

    .partner-item:last-child {
      .partner-logo {
        background: var(--main-color);
      }
    }
  }

  .partner-column-even {
    .partner-item:first-child {
      .partner-logo {
        background: var(--main-color);
      }
    }

    .partner-item:last-child {
      .partner-logo {
        background: #ffffff;
      }
    }
  }
}
</style>
