<template>
  <div class="degree-content max-width-center">
    <div class="title">{{ $t('home.degree.title') }}</div>
    <div class="nav-content">
      <ul class="tab-left">
        <li @mouseover="changeIndex(index)" :class="indexActive === index && 'active'" v-for="(item, index) in data" :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" @click="goPage(cItem.path)">
            <img :src="cItem.icon" class="icon" />
            <img :src="cItem.iconActive" class="icon2" />
            <div class="text" v-html="cItem.text"></div>
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  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'),
        //       path: ''
        //     }
        //   ]
        // },
        {
          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'),
              path: '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'),
              path: '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'),
              path: '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'),
            //   path: 'https://cfflp.ezijing.com'
            // },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/degree_03.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/degree_03_on.png',
              text: this.$t('home.degree.studyAbroadMaster'),
              path: 'https://marywood-plus.ezijing.com/'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/degree_04.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/degree_04_on.png',
              text: '金融学硕士<br/>保研项目',
              path: 'https://sbu-plus.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'),
              path: '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'),
            //   path: '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'),
              path: 'https://shms.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home_menu_mba_caas.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home_menu_mba_caas_hover.png',
              text: this.$t('home.degree.caas'),
              path: 'https://caas.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'),
            //   path: ''
            // },
            {
              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'),
              path: 'https://cbu-plus.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/degree_01.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/degree_01_on.png',
              text: this.$t('home.degree.studyAbroad'),
              path: ''
            }
          ]
        }
      ]
    }
  },
  methods: {
    changeIndex(n) {
      this.indexActive = n
    },
    goPage(path) {
      if (path === '') {
        this.$message('暂未开通，敬请期待。')
        return
      }
      window.open(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.degree-content {
  padding-top: 71px;
  .title {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: #424242;
    margin-bottom: 20px;
  }
  .nav-content {
    display: flex;
    .tab-left {
      li {
        width: 156px;
        height: 42px;
        background: #fff;
        text-align: center;
        line-height: 42px;
        color: rgba(102, 102, 102, 1);
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 6px;
        cursor: pointer;
        &.active {
          background: #aa1941;
          color: #fff;
        }
      }
    }
    .tab-right {
      display: flex;
      // margin-left: 18px;
      li {
        width: 156px;
        height: 186px;
        margin-left: 18px;
        background: #fff;
        padding-top: 36px;
        box-sizing: border-box;
        transition: all 0.5s;
        cursor: pointer;
        img {
          display: block;
          width: 64px;
          height: 64px;
          margin: 0 auto;
        }
        .icon2 {
          display: none;
        }
        &:hover {
          background: rgba(170, 25, 65, 1);
          .icon {
            display: none;
          }
          .icon2 {
            display: block;
          }
          .text {
            color: #fff;
          }
        }
        .text {
          font-size: 14px;
          line-height: 18px;
          color: #666666;
          text-align: center;
          margin-top: 20px;
        }
      }
    }
  }
}
.max-width-center {
  width: 1212px;
  margin: 0 auto;
}
</style>
