<template>
  <div style="background-color: #fff;overflow: hidden;">
    <AppCard titleAlign="center" v-for="(row, index) in rows" :key="index">
      <template #title>
        <nuxt-link :to="row.to">{{ row.title }}</nuxt-link>
      </template>
      <ul class="menu-card-nav">
        <li v-for="(item, itemIndex) in row.children" :key="itemIndex">
          <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>
    </AppCard>
  </div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      rows: [
        {
          title: this.$t('home.base.tit'),
          to: '/practice',
          children: [
            {
              icon: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian.png',
              iconActive: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian_active.png',
              text: this.$t('home.base.tit_t1'),
              path: '/practice/industry'
            },
            {
              icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan.png',
              iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan_active.png',
              text: this.$t('home.base.tit_t2'),
              path: '/practice/laboratory'
            },
            {
              icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx.png',
              iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx_active.png',
              text: this.$t('home.base.tit_t3'),
              path: '/practice/skill'
            },
            {
              icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt.png',
              iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt_active.png',
              text: this.$t('home.base.tit_t4'),
              path: '/practice/talent'
            },
            {
              icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_xm.png',
              iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_xm_active.png',
              text: this.$t('home.base.tit_t5'),
              path: '/practice/study'

              // onClick: () => {
              //   this.$message('暂未开通')
              // }
            },
            {
              icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_al.png',
              iconActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_al_active.png',
              text: this.$t('home.base.tit_t6'),
              path: '/services/college/case'
            }
          ]
        }
      ]
    }
  },
  methods: {
    showMessage() {
      this.$message('暂未开通，敬请期待。')
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-card-nav {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  margin-top: 72px;
  li {
    width: 156px;
    height: 186px;
    background: #d5d5d5;
    border: 1px solid #d5d5d5;
    background: #ffffff;
    padding-top: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      // width: 64px;
      // height: 64px;
      margin: auto;
    }
    .icon {
      display: block;
    }
    .icon-active {
      display: none;
    }
    &:hover {
      background: rgba(170, 25, 65, 1);
      border: none;

      .text {
        color: #fff;
      }
      .icon {
        display: none;
      }
      .icon-active {
        width: 64px;
        height: 64px;
        display: block;
        margin: 0 auto;
      }
    }
    .text {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: #666666;
      margin-top: 20px;
    }
  }
}
</style>
