<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, 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>
    </div>
  </div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
  components: { AppLink },
  data() {
    return {
      rows: [
        {
          title: '数字人才产教融合实践基地',
          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: `数字经济<br />产业学院`,
              path: '/practice'
            },
            {
              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: `数字经济 <br />实验室`,
              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: `数字经济 <br />职业技能中心`,
              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: `数字经济产业& <br />人才服务平台`,
              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: `数字化转型<br/>高级研修项目`,
              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: '落地案例',
              path: '/services/college/case'
            }
          ]
        }
      ]
    }
  },
  methods: {
    showMessage() {
      this.$message('暂未开通，敬请期待。')
    }
  }
}
</script>

<style lang="scss" scoped>
.home-menu {
  width: 1200px;
  margin: 90px auto;

  .menu-card {
    width: 100%;

    .menu-card__title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }

    .menu-card-nav {
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      padding: 63px 40px;
      margin-top: 21px;
      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>
