<template>
  <div class="home-menu">
    <div class="menu-card" v-for="(row, index) in rows" :key="index">
      <h2 class="menu-card__title">{{ row.title }}</h2>
      <ul class="menu-card-nav">
        <li v-for="(item, index) in row.children" :key="index">
          <AppLink :data="item">
            <img :src="item.icon" alt="" class="icon" />
            <img :src="item.iconActive" alt="" class="icon-active" />
            <div class="text" v-html="item.text"></div>
          </AppLink>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      rows: [
        {
          title: this.$t('home.college.title'),
          children: [
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_1.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_1_hover.png',
              text: this.$t('home.college.corePower'),
              path: '/services/college'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_2.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_2_hover.png',
              text: this.$t('home.college.program'),
              path: '/services/major'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_3.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_3_hover.png',
              text: this.$t('home.college.saas'),
              href: 'https://e-saas.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_4.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_4_hover.png',
              text: this.$t('home.college.internship'),
              path: '/services/employment'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_5.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_5_hover.png',
              text: this.$t('home.college.data'),
              path: '/services/dataAnalysis'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_6.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cyxy_6_hover.png',
              text: '服务案例',
              path: '/services/college/case'
            }
          ]
        },
        {
          title: '在线国际学位',
          children: [
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_kelley.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_kelley_hover.png',
              text: this.$t('home.degree.msf'),
              href: 'https://kelley.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cu.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cu_hover.png',
              text: this.$t('home.degree.med'),
              href: 'https://cu.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_ciis.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_ciis_hover.png',
              text: this.$t('home.degree.map'),
              href: 'https://ciis.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_hover.png',
              text: this.$t('home.degree.mba'),
              href: 'https://marywood.ezijing.com/'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_shms.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_shms_hover.png',
              text: this.$t('home.degree.international'),
              href: 'https://shms.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_caas.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_caas_hover.png',
              text: this.$t('home.degree.caas'),
              href: 'https://caas.ezijing.com'
            }
          ]
        },
        {
          title: '留学中心',
          children: [
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_gd_plus.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_gd_plus_hover.png',
              text: '国际大一<br/>1+3',
              onClick: this.showMessage
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus1.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus1_hover.png',
              text: '工商管理硕士<br/>1+1',
              href: 'https://marywood-plus.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus2.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_marywood_plus2_hover.png',
              text: '管理信息系统硕士<br/>1+1',
              href: 'https://marywood-plus.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_sbu_plus.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_sbu_plus_hover.png',
              text: '金融学硕士<br/>1+1',
              href: 'https://sbu-plus.ezijing.com/'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cbu_plus.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_cbu_plus_hover.png',
              text: '工商管理博士<br/>DBA',
              href: 'https://cbu-plus.ezijing.com'
            }
          ]
        },
        {
          title: '职业证书',
          children: [
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_x.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_x_hover.png',
              text: this.$t('home.college.x'),
              href: 'https://x.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_prp.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_prp_hover.png',
              text: this.$t('home.onlineEdu.prp'),
              href: 'https://prp.ezijing.com'
            },
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/menu/icon_menu_szcx_hover.png',
              text: '高管培训<br/>数字创新管理',
              onClick: this.showMessage
            }
          ]
        }
      ]
    }
  },
  methods: {
    showMessage() {
      this.$message('暂未开通，敬请期待。')
    }
  }
}
</script>

<style lang="scss" scoped>
.home-menu {
  max-width: 1200px;
  margin: 0 auto;
  .menu-card {
    padding-top: 44px;
  }
  .menu-card__title {
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    color: #424242;
    margin-bottom: 20px;
  }
  .menu-card-nav {
    display: flex;
    li {
      width: 156px;
      height: 186px;
      background: #ffffff;
      padding-top: 36px;
      margin-right: 20px;
      cursor: pointer;
      transition: all 0.5s;
      img {
        height: 64px;
        display: block;
        margin: 0 auto;
      }
      .icon-active {
        display: none;
      }
      &:hover {
        background: rgba(170, 25, 65, 1);
        .text {
          color: #fff;
        }
        .icon {
          display: none;
        }
        .icon-active {
          display: block;
        }
      }
      .text {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        color: #666666;
        margin-top: 20px;
      }
    }
  }
}
</style>
