<script setup>
import SchoolIcons from './schoolIcons.vue'
const rows = [
  {
    name: '学习<br/>服务',
    items: [{ btns: [{ name: 'AI学习助手' }] }],
  },
  {
    name: '职业<br/>技能',
    items: [
      {
        icon: 1,
        items: [
          { name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
          { name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
          { name: '数智营销师', href: 'https://eec.ezijing.com' },
        ],
        watermark: '工信部',
      },
      {
        icon: 2,
        items: [
          { name: '商务数据分析师', href: '/about/news/420311578702516225' },
          { name: '营销员', href: '/about/news/496389699913539584' },
          { name: '无人机驾驶员', href: '' },
        ],
        watermark: '人社部',
      },
      {
        icon: 3,
        items: [{ name: '1+X金融产品数字化营销', href: 'https://x.ezijing.com' }],
        watermark: '教育',
      },
      {
        icon: 4,
        items: [
          { name: '1+私人财富风险管理顾问', href: 'https://prp.ezijing.com' },
          { name: '“未来管理者”MBA课程', href: 'https://cfflp.ezijing.com' },
        ],
        watermark: '协会',
      },
    ],
  },

  {
    name: '解决<br/>方案',
    items: [
      {
        icon: 5,
        items: [
          { name: 'AI+专业改造', href: '/digital/yx_3' },
          { name: '新双高建设', href: '' },
          { name: '应用型本科', href: '' },
        ],
      },
      {
        icon: 6,
        items: [{ name: '产教融合实训基地', href: '/digital/zf_1' }],
      },
      {
        icon: 7,
        items: [
          { name: '国赛', href: '/digital/ds' },
          { name: '省赛', href: '/digital/ds' },
          { name: '行业赛', href: '/digital/ds' },
        ],
      },
      {
        icon: 8,
        items: [{ name: '国际合作', href: '' }],
      },
    ],
  },
  {
    name: 'AI专业<br/>建设',
    items: [
      {
        icon: 9,
        title: '新工科',
        desc: [
          { name: '大数据实验室', href: '/digital/yx_1_3' },
          { name: '网络安全实验室', href: '/digital/yx_1_4' },
          { name: '人工智能开发实验室', href: '/digital/yx_1_5' },
          { name: '物联网实验室', href: '/digital/yx_1_6' },
          { name: '信息安全实验室', href: '/digital/yx_1_7' },
        ],
        className: 'home-school-box-new-engineering',
      },
      {
        icon: 10,
        title: '新商科',
        desc: [
          { name: 'AIGC智能营销实验室', href: '/digital/ds' },
          { name: 'AIGC金融工程智能创新实验室', href: '/digital/ds' },
          { name: 'AIGC融媒体实验室', href: '/digital/ds' },
          { name: 'AIGC网络主播实验室', href: '/digital/ds' },
        ],
      },
      {
        icon: 11,
        title: '低空经济',
        desc: [
          { name: '低空技术', href: '/digital/ds' },
          { name: '低空文旅', href: '/digital/ds' },
          { name: '低空物流', href: '/digital/ds' },
          { name: '…', href: '/digital/ds' },
        ],
      },
    ],
  },
  {
    name: 'AI教学<br/>基础层',
    items: [
      {
        className: 'home-school-box-ai',
        btns: [
          { name: '人工智能基础：数据分析通识课', href: 'https://eec.ezijing.com/product' },
          { name: '人工智能应用通识课', href: 'https://eec.ezijing.com/AI' },
          { name: '数字教材', href: '/digital/sz' },
          { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
          { name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
        ],
      },
    ],
  },
]
</script>

<template>
  <div class="home-school" id="school">
    <div class="home-school-inner">
      <div class="home-school-title">
        <h2>院校客户</h2>
      </div>
      <div class="home-school-main">
        <div class="home-school-row" v-for="(item, index) in rows" :key="index">
          <div class="home-school-col">
            <div class="home-school-box">
              <div class="home-school-box-label" v-html="item.name"></div>
            </div>
          </div>
          <div class="home-school-col">
            <div
              class="home-school-box"
              :class="{ 'home-school-box-icon': !!box.icon, [box.className]: true }"
              v-for="(box, index) in item.items"
              :key="index">
              <div class="home-school-box-watermark" v-if="box.watermark">
                <span>{{ box.watermark }}</span>
              </div>
              <ul class="home-school-box-btns" v-if="box.btns">
                <li v-for="btn in box.btns" :key="btn.name">
                  <a :href="btn.href" target="_blank">{{ btn.name }}</a>
                </li>
              </ul>
              <template v-if="box.icon">
                <SchoolIcons :name="box.icon" />
                <ul class="home-school-box-list" v-if="box.items">
                  <li v-for="item in box.items" :key="item.name">
                    <a :href="item.href" target="_blank">{{ item.name }}</a>
                  </li>
                </ul>
                <div>
                  <div class="home-school-box-title" v-if="box.title">
                    {{ box.title }}
                  </div>
                  <ul class="home-school-box-desc" v-if="box.desc">
                    <li v-for="desc in box.desc" :key="desc.name">
                      <a :href="desc.href" target="_blank">{{ desc.name }}</a>
                    </li>
                  </ul>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.home-school {
  scroll-margin-top: 170px;
  background: #fff;

  .home-school-inner {
    max-width: 1300px;
    margin: 0 auto;

    .home-school-title {
      h2 {
        padding: 90px 0 60px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        line-height: 1;
        text-align: center;
      }
    }

    .home-school-main {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .home-school-row {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 20px;
    }

    .home-school-row:nth-child(odd) {
      .home-school-col:nth-child(odd) {
        .home-school-box {
          background-color: #bec3ce;
        }
      }

      .home-school-col:nth-child(even) {
        .home-school-box {
          padding: 18px;
          background-color: #dee2ea;
        }
      }
    }

    .home-school-row:nth-child(even) {
      .home-school-col:nth-child(odd) {
        .home-school-box {
          background-color: #dbd0d1;
        }
      }

      .home-school-col:nth-child(even) {
        .home-school-box {
          padding: 18px;
          background-color: #efecea;
        }
      }
    }

    .home-school-col {
      display: flex;
      gap: 12px;
    }

    .home-school-box {
      position: relative;
      flex: 1;
      border-radius: 12px;
      height: 100%;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-10px);
        box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.12);
      }
    }

    .home-school-box-label {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      line-height: 24px;
      text-align: center;
    }
  }

  .home-school-box-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;

    li {
      min-width: 220px;
      background-color: #fff;
      border-radius: 22px;
      font-family: Source Han Sans CN;
      font-size: 16px;
      line-height: 32px;
      text-align: center;

      a {
        display: block;
      }
    }
  }

  .home-school-box-list {
    position: relative;
    z-index: 10;
    margin: 10px 0;

    li {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      line-height: 32px;
      white-space: nowrap;

      &:hover {
        color: var(--main-color);
      }
    }
  }

  .home-school-box-icon {
    display: flex;
    gap: 10px;
  }

  .home-school-box-watermark {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 51px;
    color: #dbd4d0;
    line-height: 1;
    opacity: 0.2;
  }

  .home-school-box-ai {
    padding: 38px 155px !important;
    background-image: url('~/assets/images/icon/icon_ai.png');
    background-position: right center;
    background-repeat: no-repeat;

    .home-school-box-btns {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px 115px;

      & li:nth-child(1),
      & li:nth-child(2) {
        grid-column: span 3;
      }

      & li:nth-child(n + 3) {
        grid-column: span 2;
      }
    }
  }

  .home-school-box-title {
    margin: 10px 0;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    line-height: 32px;
    white-space: nowrap;

    &:hover {
      color: var(--main-color);
    }
  }

  .home-school-box-desc {
    li {
      font-size: 14px;
      color: #333333;
      line-height: 24px;
      white-space: nowrap;
    }
  }

  .home-school-box-new-engineering {
    .home-school-box-desc {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 20px;
    }
  }
}
</style>
