<script setup>
import { Search } from '@element-plus/icons-vue'
import IconPhone from './icons/IconPhone.vue'
const { locale, setLocale } = useI18n()
const runtimeConfig = useRuntimeConfig()

const navList = [
  {
    name: '院校客户',
    path: '/#school',
    isFull: true,
    items: [
      { name: '学习服务', items: [{ name: 'AI学习助手', href: '' }] },
      {
        name: '职业技能',
        groupItems: [
          {
            name: '工信部',
            items: [
              { name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
              { name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
              { name: '数智营销师', href: 'https://eec.ezijing.com' },
            ],
          },
          {
            name: '教育部',
            items: [{ name: '1+X金融产品数字化营销', href: 'https://x.ezijing.com' }],
          },
          {
            name: '人社部',
            items: [
              { name: '商务数据分析师', href: '/about/news/420311578702516225' },
              { name: '营销员', href: '/about/news/496389699913539584' },
              { name: '无人机驾驶员', href: '' },
            ],
          },
          {
            name: '协会',
            items: [
              { name: '私人财富风险管理顾问', href: 'https://prp.ezijing.com' },
              { name: '“未来管理者”MBA课程', href: 'https://cfflp.ezijing.com' },
            ],
          },
        ],
      },
      {
        name: '解决方案',
        items: [
          { name: 'AI+专业改造', href: '/digital/yx_3' },
          { name: '新双高建设', href: '' },
          { name: '应用型本科', href: '' },
          { name: '产教融合实训基地', href: '/digital/zf_1' },
          { name: '国赛/省赛/行业赛', href: '/digital/ds' },
          { name: '国际合作', href: '' },
        ],
      },
      {
        name: 'AI专业建设',
        items: [
          {
            name: '新工科',
            items: [
              { 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' },
            ],
          },
          {
            name: '新商科',
            items: [
              { name: 'AIGC智能营销实验室', href: '/digital/ds' },
              { name: 'AIGC金融工程智能创新实验室', href: '/digital/ds' },
              { name: 'AIGC融媒体实验室', href: '/digital/ds' },
              { name: 'AIGC网络主播实验室', href: '/digital/ds' },
            ],
          },
          {
            name: '低空经济',
            items: [
              { name: '低空技术', href: '/digital/ds' },
              { name: '低空文旅', href: '/digital/ds' },
              { name: '低空物流', href: '/digital/ds' },
            ],
          },
        ],
      },
      {
        name: 'AI教学基础层',
        items: [
          { name: '人工智能基础:数据分析通识课', href: '/digital/yx_1_3' },
          { name: '人工智能应用通识课', href: '/digital/yx_1_4' },
          { name: '数字教材', href: '/digital/sz' },
          { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
          { name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
        ],
      },
    ],
  },
  {
    name: '个人客户',
    path: '/#personal',
    isFull: true,
    items: [
      {
        name: '国际留学',
        href: '/studyAbroad',
        groupItems: [
          {
            name: '雪城大学',
            href: 'https://syracuse-plus.ezijing.com/',
            items: [
              { name: '计算机工程硕士', href: 'https://syracuse-plus.ezijing.com/' },
              { name: '计算机科学硕士', href: 'https://syracuse-plus.ezijing.com/' },
              { name: '电气工程硕士', href: 'https://syracuse-plus.ezijing.com/' },
            ],
          },
          {
            name: '斯蒂文斯理工学院',
            href: 'https://sit-plus.ezijing.com/',
            items: [{ name: '工程管理硕士', href: 'https://sit-plus.ezijing.com/' }],
          },
          {
            name: '纽约州立大学石溪分校',
            href: 'https://sbu-plus.ezijing.com/',
            items: [{ name: '金融学硕士', href: 'https://sbu-plus.ezijing.com/' }],
          },
          {
            name: '帕克大学',
            href: 'https://park-plus.ezijing.com/',
            items: [
              { name: '工商管理硕士', href: 'https://park-plus.ezijing.com/' },
              { name: '信息系统与商业数据分析硕士', href: 'https://park-plus.ezijing.com/' },
            ],
          },
          {
            name: '德保罗大学',
            href: 'https://depaul-plus.ezijing.com/',
            items: [{ name: '金融学硕士', href: 'https://depaul-plus.ezijing.com/' }],
          },
        ],
      },
      {
        name: '国际学位',
        href: '/internationalDegree',
        groupItems: [
          {
            name: '硕士',
            items: [
              { name: '教育学硕士(儿童)MED', href: 'https://cu.ezijing.com/' },
              { name: '教育学硕士(家庭)MED', href: 'https://cuw.ezijing.com/' },
            ],
          },
          {
            name: 'EMBA',
            items: [{ name: '玛丽伍德大学数字时代领航人才EMBA', href: 'https://marywood.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: '职业技能',
        href: 'https://eec.ezijing.com',
        items: [
          { name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
          { name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
          { name: '智能数据营销与实战应用', href: 'https://eec.ezijing.com' },
          { name: '私人财富风险管理课程', href: 'https://prp.ezijing.com' },
        ],
      },
      {
        name: '就业服务',
        href: '',
        items: [
          { name: '1V1定制化', href: '' },
          { name: '全程辅导', href: '' },
          { name: '内推面试', href: '' },
          { name: '内推入职', href: '' },
        ],
      },
    ],
  },
  {
    name: '政企客户',
    path: '/#enterprise',
    isFull: true,
    isBrand: true,
    items: [
      { name: '教育部' },
      { name: '全国科学技术名词审定委员会' },
      { name: '工信部' },
      { name: '供销合作总社' },
      { name: '国家新闻出版署' },
      { name: '国家广播电视总局' },
      { name: '清华大学出版社' },
      { name: '中国标准出版社' },
      { name: '中国经济出版社' },
      { name: '中国金融出版社' },
      { name: '中国科学技术出版社' },
      { name: '西安交通大学出版社' },
      { name: '中国中小企业协会' },
      { name: '中国电子商会' },
      { name: '华为' },
      { name: '百融云创' },
      { name: '电科北斗' },
      { name: '国开在线' },
    ],
  },
  {
    name: '关于紫荆',
    path: '/about',
    items: [
      { name: '紫荆简介', href: '/about' },
      { name: '文化理念', href: '/about/culture' },
      { name: '企业动态', href: '/about/news' },
      { name: '校友故事', href: '/alumnus/story' },
      { name: '公开课', href: '/about/lesson' },
      { name: '联系我们', href: '/about/contact' },
    ],
  },
  { name: '下载APP' },
]

const searchKeyword = ref('')

const toggleLocale = () => {
  // setLocale(locale.value === 'zh' ? 'en' : 'zh')
}

const handleLogin = () => {
  window.open(
    runtimeConfig.public.loginURL + '/login/index?redirect_uri=' + encodeURIComponent(location.href),
    '_blank'
  )
}

const handleRegister = () => {
  window.open(runtimeConfig.public.loginURL + '/register?redirect_uri=' + encodeURIComponent(location.href), '_blank')
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    console.log('搜索:', searchKeyword.value)
  }
}
</script>

<template>
  <header class="app-header">
    <!-- 顶部栏 -->
    <div class="top-bar">
      <div class="top-bar-inner">
        <div class="logo-section">
          <NuxtLink to="/" class="logo">
            <img src="https://webapp-pub.ezijing.com/website/base/logo_white.svg" alt="清控紫荆教育" class="logo-img" />
          </NuxtLink>
          <span class="slogan">让每个人都有改变的能力</span>
        </div>
        <div class="user-section">
          <a href="javascript:;" class="login-btn" @click="handleLogin">登录/学习空间</a>
          <a href="javascript:;" class="register-btn" @click="handleRegister">注册</a>
          <span class="lang-switch" @click="toggleLocale">
            {{ locale === 'zh' ? '中文' : 'EN' }} / {{ locale === 'zh' ? 'EN' : '中文' }}
          </span>
        </div>
      </div>
    </div>

    <!-- 导航栏 -->
    <nav class="app-nav">
      <div class="nav-inner">
        <ul class="nav-list">
          <li
            v-for="item in navList"
            :key="item.name"
            :class="{ 'nav-item': true, 'is-position-relative': !item.isFull }">
            <NuxtLink :to="item.path" class="nav-link">{{ item.name }}</NuxtLink>
            <template v-if="item.items">
              <div class="nav-item-full-box" v-if="item.isFull">
                <div class="nav-item-full-box-inner">
                  <h3 class="nav-item-full-box-title">{{ item.name }}</h3>
                  <div class="nav-item-full-box-content">
                    <ul class="enterprise-list" v-if="item.isBrand">
                      <li class="enterprise-list-item" v-for="subitem in item.items" :key="subitem.name">
                        <NuxtLink :to="subitem.href" target="_blank">{{ subitem.name }}</NuxtLink>
                      </li>
                    </ul>
                    <dl class="nav-item-full-box-content-item" v-for="subitem in item.items" :key="subitem.name" v-else>
                      <dt class="nav-item-full-box-content-item-title">
                        <NuxtLink :to="subitem.href" target="_blank">{{ subitem.name }}</NuxtLink>
                      </dt>
                      <dd class="nav-item-full-box-content-item-content">
                        <ul v-if="subitem.items">
                          <li v-for="item in subitem.items" :key="item.name">
                            <NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
                          </li>
                        </ul>
                        <div class="group" v-if="subitem.groupItems">
                          <dl
                            class="nav-item-full-box-content-item-group"
                            v-for="groupItem in subitem.groupItems"
                            :key="groupItem.name">
                            <dt>
                              <NuxtLink :to="groupItem.href" target="_blank">{{ groupItem.name }}</NuxtLink>
                            </dt>
                            <dd>
                              <ul>
                                <li v-for="item in groupItem.items" :key="item.name">
                                  <NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
                                </li>
                              </ul>
                            </dd>
                          </dl>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="nav-item-box" v-else>
                <ul>
                  <li v-for="subitem in item.items" :key="subitem.name">
                    <NuxtLink :to="subitem.href">{{ subitem.name }}</NuxtLink>
                  </li>
                </ul>
              </div>
            </template>
          </li>
        </ul>
        <div class="nav-right">
          <div class="phone">
            <IconPhone class="phone-icon" />
            <span>010-62793909</span>
          </div>
          <div class="search-box">
            <input
              v-model="searchKeyword"
              type="text"
              placeholder="搜索"
              class="search-input"
              @keyup.enter="handleSearch" />
            <button class="search-btn" @click="handleSearch">
              <el-icon>
                <Search />
              </el-icon>
            </button>
          </div>
        </div>
      </div>
    </nav>
    <div class="school-box">
      <!-- <div class="title">院校客户</div> -->
    </div>
    <div class="personal-box"></div>
    <div class="enterprise-box"></div>
  </header>
</template>

<style lang="scss">
.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 顶部栏 */
.top-bar {
  background-color: var(--main-color);
  height: 70px;
}

.top-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 44px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 40px;
}

.slogan {
  color: #fff;
  font-size: 18px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login-btn {
  width: 100px;
  text-align: center;
  background: #fff;
  border: 1px solid #fff;
  color: #333;
  border-radius: 22px;
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.login-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.register-btn {
  width: 100px;
  text-align: center;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 22px;
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.register-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lang-switch {
  margin-left: 40px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.lang-switch:hover {
  opacity: 0.85;
}

/* 导航栏 */
.app-nav {
  position: relative;
  background-color: #fff;
  height: 100px;
}

.nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-item {
  padding: 26px 0;
  &.is-position-relative {
    position: relative;
  }
}

.nav-item-box {
  display: none;
  position: absolute;
  left: 0;
  top: 80px;
  width: 300px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  border: 1px solid #d5d5d5;
  li {
    line-height: 50px;
    padding: 0 20px;
    border-radius: 12px;
    &:hover {
      background: #ededed;
    }
  }
}

.nav-item-full-box {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  background: #ffffff;
  border-top: #d5d5d5 1px solid;
  &-inner {
    width: 1300px;
    margin: 0 auto;
    padding: 40px 0;
  }
  &-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: var(--main-color);
    margin-bottom: 30px;
  }
  &-content {
    &-item {
      margin-bottom: 30px;
      display: flex;
      gap: 38px;
      &-title {
        width: 160px;
        padding: 16px;
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
        color: var(--main-color);
        border: 1px solid var(--main-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .enterprise-list {
      padding-bottom: 40px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 30px;
      &-item {
        padding: 0 10px;
        min-height: 60px;
        background: #f7f0f2;
        border-radius: 12px;
        text-align: center;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  &-content-item-content {
    align-content: center;
    font-size: 18px;
    line-height: 32px;
    dl {
      display: flex;
      gap: 20px;
    }
    dt {
      font-weight: bold;
      color: var(--main-color);
      white-space: nowrap;
    }
    li {
      position: relative;
      display: inline-block;
      line-height: 30px;
    }
    li + li {
      padding-left: 20px;
      &::after {
        content: '';
        width: 1px;
        height: 18px;
        background: #333;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .group {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 0 50px;
    }
  }
}

.nav-link {
  display: block;
  padding: 0 24px;
  font-size: 18px;
  line-height: 48px;
  border-radius: 12px;
  transition: background-color 0.3s;
}
.nav-item:hover {
  .nav-link {
    background-color: #ededed;
    font-weight: bold;
  }
  .nav-item-box {
    display: block;
  }
  .nav-item-full-box {
    display: block;
  }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 68px;
}

.phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.phone-icon {
  width: 14px;
  height: 14px;
  color: #6c6c6c;
}

.search-box {
  display: flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #d5d5d5;
  overflow: hidden;
}

.search-input {
  width: 140px;
  height: 28px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 14px;
}

.search-input::placeholder {
  color: #999;
}

.search-btn {
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: transparent;
}

.search-btn:hover {
  color: var(--main-color);
}
</style>
