<script setup>
import IconMore from '../icons/IconMore.vue'
const items = ref([
  {
    name: '国际留学',
    items: [
      {
        colIndex: 1,
        name: '雪城大学',
        href: 'https://syracuse-plus.ezijing.com/',
        desc: ['计算机工程硕士', '计算机科学硕士', '电气工程硕士'],
      },
      { colIndex: 2, name: '纽约州立大学石溪分校', href: 'https://sbu-plus.ezijing.com/', desc: ['金融学硕士'] },
      { colIndex: 3, name: '斯蒂文斯理工学院', href: 'https://sit-plus.ezijing.com/', desc: ['工程管理硕士'] },
      {
        colIndex: 2,
        name: '帕克大学',
        href: 'https://park-plus.ezijing.com/',
        desc: ['工商管理硕士', '信息系统与商业数据分析硕士'],
      },
      { colIndex: 1, name: '德保罗大学', href: 'https://depaul-plus.ezijing.com/', desc: ['金融学硕士'] },
    ],
    moreText: '了解更多留学项目',
    moreHref: '/studyAbroad',
  },
  {
    name: '国际学位',
    items: [
      { name: '教育学硕士(儿童)MED', href: 'https://cu.ezijing.com/' },
      { name: '教育学硕士(家庭)MED', href: 'https://cuw.ezijing.com/' },
      { name: '数字时代领航人才EMBA', href: 'https://marywood.ezijing.com/' },
      { name: '瑞士酒店管理大学MBA', href: 'https://shms.ezijing.com/' },
      { name: '科创企业家学者项目DBA', href: 'https://ppai.ezijing.com/' },
    ],
    groupItems: [
      {
        name: '硕士',
        items: [
          { name: '威斯康星协和大学家庭教育硕士', href: 'https://cu.ezijing.com/' },
          { name: '康博斯维尔大学教育学硕士', href: 'https://cuw.ezijing.com/' },
        ],
      },
      {
        name: 'MBA',
        items: [
          {
            name: '玛丽伍德大学综合管理方向MBA',
            href: 'https://marywood.ezijing.com/',
          },
          { name: '瑞士酒店管理大学MBA', href: 'https://shms.ezijing.com/' },
        ],
      },
      {
        name: 'DBA',
        items: [{ name: '科创企业家学者项目DBA', href: 'https://ppai.ezijing.com/' }],
      },
      {
        name: 'EMBA',
        items: [{ name: '玛丽伍德大学数字时代领航人才EMBA', href: 'https://marywood.ezijing.com/' }],
      },
    ],
    moreText: '了解更多学位项目',
    moreHref: '/internationalDegree',
  },
  {
    name: '职业技能',
    items: [
      {
        name: '人工智能通识应用',
        href: 'https://eec.ezijing.com/AI',
        items: [{ name: '零基础AI工具课' }, { name: '学ChatGPT等工具职场实操' }, { name: '适配全行业提效职员' }],
      },
      {
        name: '智能数据分析与实战应用',
        href: 'https://eec.ezijing.com/product',
        items: [{ name: '数据可视化实操课' }, { name: 'Python/Tableau+真实案例' }, { name: '适配市场/运营/财务岗' }],
      },
      {
        name: '智能数据营销与实战应用',
        href: 'https://eec.ezijing.com/',
        items: [{ name: 'AI营销升级课' }, { name: '智能画像+平台投放' }, { name: '适配营销/新媒体从业者' }],
      },
      {
        name: '私人财富风险管理课程',
        href: 'https://prp.ezijing.com/',
        items: [{ name: '资产风控课' }, { name: '风险识别+避险策略' }, { name: '适配高净值人群/理财顾问' }],
      },
    ],
    moreText: '了解更多职业技能',
    moreHref: 'https://eec.ezijing.com',
  },
  {
    name: '就业服务',
    items: [{ name: '1V1定制化' }, { name: '全程辅导' }, { name: '内推面试' }, { name: '内推入职' }],
    moreText: '了解更多就业服务',
    moreHref: '/',
  },
])

const colList = computed(() => {
  const grouped = items.value[0].items.reduce((acc, item) => {
    const key = item.colIndex
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(item)
    return acc
  }, {})
  return Object.values(grouped)
})
</script>

<template>
  <div class="home-personal" id="personal">
    <div class="home-personal-inner">
      <div class="home-personal-title">
        <h2>个人客户</h2>
      </div>
      <div class="home-personal-main">
        <div v-for="(item, index) in items" :key="index" class="home-personal-item">
          <div class="home-personal-item-content">
            <h3>{{ item.name }}</h3>
            <ul>
              <li v-for="subItem in item.items" :key="subItem.name">{{ subItem.name }}</li>
            </ul>
          </div>
          <div class="home-personal-item-content-hover">
            <h3>{{ item.name }}</h3>
            <div class="box1" v-if="index === 0">
              <div v-for="items in colList" :key="items.name">
                <dl v-for="source in items" :key="source.name">
                  <dt>
                    <a :href="source.href" target="_blank">{{ source.name }}</a>
                  </dt>
                  <dd>
                    <ul>
                      <li v-for="item in source.desc" :key="item.name">
                        <a :href="source.href" target="_blank">{{ item }}</a>
                      </li>
                    </ul>
                  </dd>
                </dl>
              </div>
            </div>
            <div class="box2" v-if="index === 1">
              <dl v-for="source in item.groupItems" :key="source.name">
                <dt>{{ source.name }}</dt>
                <dd>
                  <ul>
                    <li v-for="item in source.items" :key="item.name">
                      <a :href="item.href" target="_blank">{{ item.name }}</a>
                    </li>
                  </ul>
                </dd>
              </dl>
            </div>
            <div class="box3" v-if="index === 2">
              <dl v-for="source in item.items" :key="source.name">
                <dt>
                  <a :href="source.href" target="_blank">{{ source.name }}</a>
                </dt>
                <dd>
                  <ul>
                    <li v-for="item in source.items" :key="item.name">
                      <a :href="source.href" target="_blank">{{ item.name }}</a>
                    </li>
                  </ul>
                </dd>
              </dl>
            </div>
            <div class="box4" v-if="index === 3">
              <h4>8步就业辅导体系覆盖求职全流程</h4>
              <p>精准解决核心问题，为求职者提供科学、高效的就业支持</p>
              <div class="ul-box">
                <ul>
                  <li>1. 职业测评</li>
                  <li>2. 职业规划</li>
                  <li>3. 简历设计</li>
                  <li>4. 网申辅导</li>
                </ul>
                <ul>
                  <li>5. 面试辅导</li>
                  <li>6. 岗位内推</li>
                  <li>7. offer 分析</li>
                  <li>8. 试用期辅导</li>
                </ul>
              </div>
            </div>
            <div class="more">
              <a :href="item.moreHref" target="_blank"
                >{{ item.moreText }}
                <IconMore />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

    .home-personal-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-personal-main {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .home-personal-item {
    flex: 1;
    position: relative;
    height: 400px;
    color: #fff;
    transition: flex 0.3s ease;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.12);
    &.active,
    &:hover {
      color: #333;
      flex: 0 0 620px;

      .home-personal-item-content-hover {
        display: block;
      }

      .home-personal-item-content {
        display: none;
      }
    }

    &:nth-child(1) {
      background-image: url('~/assets/images/home/personal_bg_1.png');

      &:hover {
        background-image: url('~/assets/images/home/personal_bg_1_hover.png');
      }
    }

    &:nth-child(2) {
      background-image: url('~/assets/images/home/personal_bg_2.png');

      &:hover {
        background-image: url('~/assets/images/home/personal_bg_2_hover.png');
      }
    }

    &:nth-child(3) {
      background-image: url('~/assets/images/home/personal_bg_3.png');

      &:hover {
        background-image: url('~/assets/images/home/personal_bg_3_hover.png');
      }
    }

    &:nth-child(4) {
      background-image: url('~/assets/images/home/personal_bg_4.png');

      &:hover {
        background-image: url('~/assets/images/home/personal_bg_4_hover.png');
      }
    }

    .home-personal-item-content {
      padding: 65px 20px 0;

      h3 {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 24px;
        line-height: 1;
      }

      ul {
        margin-top: 40px;
      }

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

    .home-personal-item-content-hover {
      display: none;
      width: 620px;
      height: 400px;
      padding: 65px 40px 0;

      h3 {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 24px;
        line-height: 1;
        margin-bottom: 40px;
      }
    }

    .more {
      position: absolute;
      bottom: 50px;
      width: 240px;
      height: 32px;
      background: #ffffff;
      box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.1);
      border-radius: 33px;
      font-size: 14px;

      a {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
      }
    }
  }

  .box1 {
    margin-top: -10px;
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex-wrap: wrap;

    dl + dl {
      margin-top: 15px;
    }

    dt {
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      color: var(--main-color);
      margin-bottom: 5px;
    }

    li {
      font-size: 16px;
      line-height: 30px;
    }
  }

  .box2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;

    dt {
      font-size: 16px;
      font-weight: bold;
      line-height: 1;
      color: var(--main-color);
      margin-bottom: 10px;
    }

    li {
      font-size: 16px;
      line-height: 26px;
    }
  }

  .box3 {
    margin-top: -20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;

    dt {
      font-size: 16px;
      font-weight: bold;
      line-height: 1;
      color: var(--main-color);
      margin-bottom: 10px;
    }

    li {
      font-size: 14px;
      line-height: 20px;
    }
  }

  .box4 {
    h4 {
      margin-bottom: 10px;
      font-size: 18px;
      line-height: 1;
      color: var(--main-color);
    }

    p {
      font-size: 16px;
      font-weight: bold;
      line-height: 1;
    }

    .ul-box {
      margin-top: 20px;
      display: flex;
      gap: 80px;
    }

    li {
      font-size: 16px;
      line-height: 24px;
    }
  }
}
</style>
