<script setup>
import EnterpriseIcons from './enterpriseIcons.vue'

const enterpriseList = [
  {
    name: '教育部',
    icon: 1,
    desc: `2025:院校技术支持获得世界职业技能大赛新一代信息技术赛项金奖

2024:院校技术支持单位获得世界职业技能大赛智慧金融赛项金奖第一名

2021:教育部产学合作协同育人项目单位

2021:教育部供需对接就业育人项目单位

2020:《1+X金融产品数字化营销》职业技能评价单位`,
  },
  {
    name: '清华大学出版社',
    icon: 2,
    desc: `根植清华大学，1980 年成立，秉持清华校训，主打学术专著、精品教材与前沿科技读物，聚焦人工智能、智能制造等国家重点领域，兼顾教育教学与专业出版，是综合性、多层次的知名大学出版社，数字化转型与国际合作成果显著。`,
  },
  {
    name: '中国电子商会',
    icon: 6,
    desc: `授予清控紫荆教育元宇宙专委会副理事长单位牌匾，并在此设立中国电子商会元宇宙专委会教培秘书处。双方将整合行业资源与教育优势，携手为数字经济教育革新注入国家级平台力量，推动AIGC产教融合迈向新高度。`,
  },
  {
    name: '工信部',
    icon: 7,
    desc: `2025：工信部职业技能提升行动-人工智能通识应用评价组织

2024：工信部职业技能提升行动-智能数据分析与实战应用评价组织

2024： 工信部职业技能提升行动-智能数字营销与实战应用）评价组织`,
  },
  {
    name: '中国标准出版社',
    icon: 5,
    desc: `国家权威标准类专业出版社，核心出版国家标准、行业标准、地方标准及标准配套读物，同步推出标准培训教材、计量与质量相关专著，精准服务标准化工作推进，是国内标准出版领域的核心阵地，助力各行各业规范发展。`,
  },
  {
    name: '华为',
    icon: 9,
    desc: `携手华为、新疆轻工职业技术学院共建ICT产业学院！
 
携手华为、新疆交通职业技术学院共建ICT产业学院！`,
  },
  {
    name: '中华全国供销合作总社',
    icon: 10,
    desc: `2025：清控紫荆“数智营销实践教学平台”纳入工种考试系统
清控紫荆“商务数据分析实践教学平台”纳入工种考试系统
共同开发人社部“商务数据分析师”“营销师”数字教材

2024： 中华全国供销合作总社职业技能(商务数据分析师/营销师）在线课程提供商`,
  },
  {
    name: '中国经济出版社',
    icon: 8,
    desc: `经济学领域权威出版机构，深耕经济理论、国企改革、经济管理等核心板块，紧扣国家经济发展战略，打造国企改革出版特色品牌，推出众多贴合政策导向与行业需求的精品力作，获评经济学领域最具学术影响力出版社，兼具专业性与实用性。`,
  },
  {
    name: '百融云创',
    icon: 12,
    desc: `清控紫荆教育携手百融云创，整合教育资源与产业技术，共探数字化人才高效培养新范式。`,
  },
  {
    name: '国家广播电视总局',
    icon: 16,
    desc: `2025：广电主办人社部“网络主播”职业二类国赛技术支持单位

2024：首届网络视听行业职业技能大赛技术支持单位
第二届网络视听行业职业技能大赛技术支持单位`,
  },
  {
    name: '中国金融出版社',
    icon: 11,
    desc: `1956年成立，直属中国人民银行，国内优质的金融专业出版社，主营金融理论、实务操作、金融教材及法律法规类读物，出版《中国金融》等核心期刊，覆盖金融全领域内容，兼具权威政策解读与大众金融知识普及功能，是金融从业者与学习者的核心读物来源。`,
  },
  {
    name: '电科北斗',
    icon: 15,
    desc: `清控紫荆教育与电科北斗签订人才战略合作框架协议，双方将共同探索数字化企业中所需人才，通过定制化培养、招聘服务、实习实训基地共建、引产入校等方式，打造数字人才培训与服务体系。`,
  },
  {
    name: '国家新闻出版署',
    icon: 13,
    desc: `2024：副组长单位参与《数字教材平台接口》、《高等教育和职业教育数字出版产品质量要求》两项行业标准制定`,
  },
  {
    name: '西安交通大学出版社',
    icon: 14,
    desc: `西安交通大学出版社是1983年成立、1998年合并重组的教育部直属综合性大学出版社，依托西安交大优势学科主攻多领域高教教材与学术专著出版，曾获“国家一级出版社”等多项殊荣，深耕融合出版并与国际优质机构合作实现版权全球输出。`,
  },
  {
    name: '国开在线',
    icon: 18,
    desc: `清控紫荆教育携手国开在线合作斯蒂文斯理工学院工程管理硕士项目、雪城大学计算机科学、计算机工程、电电气工程、帕克大学工商管理硕士、信息系统与商业数据分析等热门硕士项目。`,
  },
  {
    name: '全国科学技术名词审定委员会',
    icon: 4,
    desc: `2022年，清控紫荆教育与全国科学技术名词审定委员会双方就数字经济方向设立科研课题、数字经济领域学术成果发表、数字经济人才培养、国际论坛交流活动等方面进行深入探讨和交流，并举行战略合作签约仪式。`,
  },
  {
    name: '中国中小企业协会',
    icon: 3,
    desc: `清控紫荆教育成为中国中小企业协会副会长单位。

中国中小企业协会数字经济人才专业委员会成立！`,
  },
  {
    name: '查看更多+',
  },
]

const rows = computed(() => {
  const result = []
  for (let i = 0; i < enterpriseList.length; i += 3) {
    result.push(enterpriseList.slice(i, i + 3))
  }
  return result
})
</script>

<template>
  <div class="home-enterprise" id="enterprise">
    <div class="home-enterprise-inner">
      <div class="home-enterprise-title">
        <h2>政企客户</h2>
      </div>
      <div class="home-enterprise-main">
        <div class="home-enterprise-col" v-for="(item, index) in rows" :key="index">
          <div class="home-enterprise-box" v-for="(item, index) in item" :key="index">
            <div class="home-enterprise-box-inner">
              <div class="home-enterprise-box-inner-header">
                <div class="home-enterprise-box-icon" v-if="item.icon">
                  <EnterpriseIcons :name="item.icon" />
                </div>
                <p class="home-enterprise-box-name">{{ item.name }}</p>
              </div>
              <div class="home-enterprise-box-desc" v-html="item.desc"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.home-enterprise {
  background: #f0f2f5;
  padding-bottom: 90px;

  .home-enterprise-inner {
    max-width: 1200px;
    margin: 0 auto;

    .home-enterprise-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-enterprise-main {
    display: flex;
    gap: 6px;
  }

  .home-enterprise-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s;

    // 只有当第一行 box 被 hover 时，整列才变宽
    &:has(.home-enterprise-box:first-child:hover) {
      flex: 2;
    }
  }

  .home-enterprise-box {
    position: relative;
    flex: 1;
    min-height: 160px;

    // 只有第一行的 box 有 hover 效果
    &:first-child:hover {
      z-index: 10;
      cursor: pointer;

      .home-enterprise-box-inner {
        padding: 20px 20px 0;
        color: #fff;
        background-color: var(--main-color);
        height: calc(200% + 10px);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
      }

      .home-enterprise-box-inner-header {
        flex-direction: row;
        gap: 14px;
      }
      .home-enterprise-box-name {
        font-size: 18px;
        white-space: nowrap;
      }
      .home-enterprise-box-icon {
        --main-color: #fff;
        svg {
          width: 30px;
          height: 30px;
        }
      }

      .home-enterprise-box-desc {
        display: block;
      }
    }

    &:last-child {
      .home-enterprise-box-inner {
        bottom: 0;
      }
    }
  }

  .home-enterprise-box-inner {
    transition: all 0.3s;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background-color: #fff;
    border-radius: 12px;
    padding: 0 20px;
  }

  .home-enterprise-box-inner-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .home-enterprise-box-name {
    font-family: Source Han Sans CN;
    font-size: 14px;
    line-height: 1;
    text-align: center;
  }

  .home-enterprise-box-desc {
    display: none;
    font-family: Source Han Sans CN;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
  }
}
</style>
