<template>
  <div class="degree">
    <div class="degree-hd">{{ $t('home.degree.title') }}</div>
    <div class="degree-bd">
      <ul class="tab-left">
        <li
          :class="indexActive === index && 'active'"
          v-for="(item, index) in data"
          @click="changeIndex(index)"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
      <template v-for="(item, index) in data">
        <ul class="tab-right" :key="index" v-if="indexActive === index">
          <li :key="cIndex + 'c'" v-for="(cItem, cIndex) in item.content">
            <app-link :item="cItem">
              <img :src="cItem.icon" class="icon" />
              <div class="text" v-html="cItem.text"></div>
            </app-link>
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
import AppLink from '@/components/Link'

export default {
  components: { AppLink },
  data() {
    return {
      indexActive: 1,
      data: [
        {
          name: this.$t('home.degree.tabBtn1'),
          content: [
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/e624ed7af7b49a9e04e7ac2ec95db7e1.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8b32a69e26a4d20eaddc8bb3d6f4ccc5.png',
              text: this.$t('home.degree.shms'),
              onClick: this.showTips
            }
          ]
        },
        {
          name: this.$t('home.degree.tabBtn2'),
          content: [
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/69fc809f95bd7985e13827a6dcd4dcd1.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ac6cde3fb04de4c3478d02e7572fe9c9.png',
              text: this.$t('home.degree.msf'),
              href: 'https://kelley.ezijing.com'
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/ac66fee3cad3cca2b4b38ef3cceed9dc.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8fe0f6c8995847dee420e70a21da4d3f.png',
              text: this.$t('home.degree.med'),
              href: 'https://cu.ezijing.com'
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/aa2c06a74a470cbee1443e66bb6bc981.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/db8ca58d8032f32a77a7a9deea9b417b.png',
              text: this.$t('home.degree.map'),
              href: 'https://ciis.ezijing.com'
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/70748b8e679e7b3f40310635d9f3bae7.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/49f4eb2509433e42555754f74a4dcae2.png',
              text: this.$t('home.degree.plan'),
              href: 'https://cfflp.ezijing.com'
            }
          ]
        },
        {
          name: this.$t('home.degree.tabBtn3'),
          content: [
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/17ef11bc534aadf1d8e3b94fd6d4350f.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0d2ea39ee5d40200a6f513db2e9b88de.png',
              text: this.$t('home.degree.mba'),
              href: 'https://marywood.ezijing.com'
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/a23695e5428a3d5e0a2f47f7d36ebb14.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/a2c4b8a1f799b35f04ed618f7b47b9c1.png',
              text: this.$t('home.degree.finance'),
              href: 'https://sofia.ezijing.com'
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/709ab2dd245369c16631a8d9ebe67006.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/29917e1f3d47ca9381b5e0c397e1f082.png',
              text: this.$t('home.degree.international'),
              href: 'https://shms.ezijing.com'
            }
          ]
        },
        {
          name: this.$t('home.degree.tabBtn4'),
          content: [
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/841ff657ca26c0f26da3e24d799ae2a5.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/5785a4d37264a8293b956a3f065f11cf.png',
              text: this.$t('home.degree.dba'),
              onClick: this.showTips
            },
            {
              icon: 'https://zws-imgs-pub.ezijing.com/static/public/aebf1f65a324cff54eb9466bf2fd0b66.png',
              iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/526bebd1d9279c19895c5c4f1a3cfcce.png',
              text: this.$t('home.degree.edd'),
              onClick: this.showTips
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeIndex(n) {
      this.indexActive = n
    },
    showTips() {
      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
    }
  }
}
</script>

<style lang="scss" scoped>
.degree {
  margin: 0.2rem 0.16rem;
}
.degree-hd {
  padding-bottom: 0.1rem;
  font-size: 0.12rem;
  font-weight: bold;
  line-height: 1;
}
.degree-bd {
  display: flex;
  .tab-left {
    flex: 0 0 0.78rem;
    li {
      height: 0.25rem;
      background: #fff;
      text-align: center;
      line-height: 0.25rem;
      color: #666;
      font-size: 0.11rem;
      font-weight: 500;
      cursor: pointer;
      &.active {
        background: #aa1941;
        color: #fff;
      }
    }
    li + li {
      margin-top: 0.04rem;
    }
  }
  .tab-right {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    li {
      min-width: 0.78rem;
      height: 1.1rem;
      margin-left: 0.1rem;
      background: #fff;
      cursor: pointer;
      img {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin: 0.17rem auto 0;
      }
      .text {
        margin-top: 0.09rem;
        font-size: 0.1rem;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>
