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

onMounted(() => {
  fetchUser()
})

const showDownloadPopup = () => {
  visibleAppDownloadPopup.value = true
}

const navList = ref([
  {
    name: '院校客户',
    path: '/#school',
    items: [
      {
        name: 'AI教学基础设施',
        items: [
          { name: '人工智能基础:数据分析实践通识课', href: '/bi' },
          { name: '人工智能应用实践通识课', href: '/ai' },
          { name: '数字教材', href: '/book' },
          { name: '个性化智能学习平台', href: 'https://saas-learn.ezijing.com/' },
          { name: '紫荆e-SaaS', href: 'https://e-saas.ezijing.com/' },
        ],
      },
      {
        name: 'AI+专业建设',
        items: [
          {
            name: '新工科',
            href: '/platform',
            items: [
              { name: '大数据实验室', href: '/platform/new-engineering/1' },
              { name: '网络安全实验室', href: '/platform/new-engineering/4' },
              { name: '人工智能开发实验室', href: '/platform/new-engineering/2' },
              { name: '物联网实验室', href: '/platform/new-engineering/5' },
              { name: '信息安全实验室', href: '/platform/new-engineering/3' },
            ],
          },
          {
            name: '新商科',
            href: '/platform',
            items: [
              { name: 'AIGC智能营销实验室', href: '/platform/new-business-studies/3' },
              { name: 'AIGC金融工程智能创新实验室', href: '/platform/new-business-studies/4' },
              { name: 'AIGC融媒体实验室', href: '/platform/new-business-studies/5' },
              { name: 'AIGC网络主播实验室', href: '/platform/new-business-studies/6' },
            ],
          },
          {
            name: '低空经济',
            href: '/platform/dk',
            items: [
              { name: '低空技术', href: '/platform/dk' },
              { name: '低空文旅', href: '/platform/dk' },
              { name: '低空物流', href: '/platform/dk' },
            ],
          },
        ],
      },

      {
        name: '解决方案',
        items: [
          { name: 'AI+专业改造', href: '/solution/ai' },
          { name: '新双高建设', href: '/solution/new-double-high' },
          { name: '应用型本科', href: '/solution/applied-undergraduate' },
          // { name: '产教融合实训基地', href: '/solution/base' },
          // { name: '国赛/省赛/行业赛', href: '/competition' },
          // { name: '国际合作', href: '/solution/international' },
        ],
      },
    ],
  },
  {
    name: '个人客户',
    path: '/#personal',
    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: '/certificate',
        items: [
          { name: '人工智能通识应用', href: 'https://eec.ezijing.com/AI' },
          { name: '智能数据分析与实战应用', href: 'https://eec.ezijing.com/product' },
          { name: '智能数据营销与实战应用', href: 'https://eec.ezijing.com' },
          { name: '1+X金融产品数字化营销', href: 'https://x.ezijing.com' },
          { name: '私人财富风险管理课程', href: 'https://prp.ezijing.com' },
          { name: '“未来管理者”MBA课程', href: 'https://cfflp.ezijing.com' },
        ],
      },
      {
        name: '就业服务',
        href: '/job',
        // items: [
        //   { name: '1V1定制化', href: '/job' },
        //   { name: '全程辅导', href: '/job' },
        //   { name: '内推面试', href: '/job' },
        //   { name: '内推入职', href: '/job' },
        // ],
      },
    ],
  },
  {
    name: '政企客户',
    path: '/#enterprise',
    items: [{ name: '产教融合实训基地', href: '/solution/base' }],
  },
  {
    name: '关于紫荆',
    path: '/about',
    items: [
      { name: '紫荆简介', href: '/about' },
      { name: '文化理念', href: '/about/culture' },
      { name: '企业动态', href: '/about/news' },
      { name: '校友故事', href: '/about/alumnus' },
      { name: '公开课', href: '/about/lesson' },
      { name: '联系我们', href: '/about/contact' },
    ],
  },
  { name: '下载APP', onClick: showDownloadPopup },
])

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)
  }
}

// 追踪当前鼠标悬停的二级菜单索引
const activeSubIndex = ref(-1)

// 鼠标进入/离开二级菜单项
const onDropdownEnter = (subIndex) => {
  activeSubIndex.value = subIndex
}
const onDropdownLeave = () => {
  activeSubIndex.value = -1
}
</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">
          <template v-if="isLogin">
            <p>欢迎，{{ user.realname || user.nickname || user.username }}</p>
            <NuxtLink :to="learningLink" target="_blank" class="login-btn">登录/学习空间</NuxtLink>
          </template>
          <template v-else>
            <a href="javascript:;" class="login-btn" @click="handleLogin">登录/学习空间</a>
            <a href="javascript:;" class="register-btn" @click="handleRegister">注册</a>
          </template>
          <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 class="nav-item" v-for="(item, navIndex) in navList" :key="item.name">
            <NuxtLink :to="item.path" class="nav-link" v-if="!item.onClick">{{ item.name }}</NuxtLink>
            <a href="javascript:;" class="nav-link" @click="item.onClick" v-else>{{ item.name }}</a>
            <div class="nav-item-box" v-if="item.items" @mouseleave="onDropdownLeave">
              <div class="level2-box">
                <div
                  class="nav-item-box-item"
                  :class="{ 'is-active': activeSubIndex === subIndex }"
                  @mouseenter="onDropdownEnter(subIndex)"
                  v-for="(subitem, subIndex) in item.items"
                  :key="subitem.name">
                  <div
                    class="nav-item-box-item-title"
                    :class="{
                      'has-children':
                        (subitem.items && subitem.items.length) || (subitem.groupItems && subitem.groupItems.length),
                    }">
                    <NuxtLink :to="subitem.href">{{ subitem.name }}</NuxtLink>
                  </div>
                </div>
              </div>
              <div
                class="level3-box"
                v-if="
                  activeSubIndex !== -1 && (item.items[activeSubIndex]?.items || item.items[activeSubIndex]?.groupItems)
                ">
                <template v-for="(subitem, subIndex) in item.items" :key="subitem.name">
                  <div class="nav-item-box-item-children" v-if="activeSubIndex === subIndex">
                    <ul v-if="subitem.items">
                      <li v-for="child in subitem.items" :key="child.name">
                        <NuxtLink :to="child.href" target="_blank">{{ child.name }}</NuxtLink>
                      </li>
                    </ul>
                    <dl v-for="groupItem in subitem.groupItems" :key="groupItem.name">
                      <dt>
                        <NuxtLink :to="groupItem.href" target="_blank">{{ groupItem.name }}</NuxtLink>
                      </dt>
                      <dd>
                        <span v-for="item in groupItem.items" :key="item.name">
                          <NuxtLink :to="item.href" target="_blank">{{ item.name }}</NuxtLink>
                        </span>
                      </dd>
                    </dl>
                  </div>
                </template>
              </div>
            </div>
          </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>
  </header>
</template>

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

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

.top-bar-inner {
  max-width: 1200px;
  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;
  p {
    color: #fff;
  }
}

.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 {
  color: #fff;
  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: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.nav-item {
  position: relative;
  padding: 26px 0;
  &:hover {
    .nav-link {
      background-color: #ededed;
      font-weight: bold;
    }
    .nav-item-box {
      display: flex;
    }
  }
}

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

.nav-item-box {
  display: none;
  position: absolute;
  left: 0;
  top: 90px;
  padding: 20px;
  background: #fff;
  box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  border: 1px solid #d5d5d5;
  width: max-content;
  transition: opacity 0.3s ease; /* 移除非宽度的 transition，防止动画跳动 */
  gap: 30px;
  .level2-box {
    width: 240px;
    flex-shrink: 0;
  }

  .level3-box {
    min-width: 300px;
    width: max-content;
    flex-shrink: 0;
    border-left: 1px solid #f0f0f0;
    padding: 10px 50px 10px 50px;
  }

  /* 每个项样式 */
  &-item {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
    border-radius: 12px;

    /* 左侧标题样式 */
    &-title {
      padding: 10px 16px;
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.18s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #333;
    }

    /* 右侧箭头（默认隐藏，只有有子菜单时显示） */
    &-title::after {
      content: '\203A';
      color: #bdbdbd;
      font-size: 18px;
      margin-left: 8px;
      opacity: 0;
      transform: translateX(-6px);
      transition:
        opacity 0.18s ease,
        transform 0.18s ease;
      pointer-events: none;
    }

    &:hover,
    &.is-active {
      .nav-item-box-item-title {
        background: #ededed;
      }
      .nav-item-box-item-title.has-children::after {
        opacity: 1;
        transform: translateX(0);
      }
    }
  }

  &-item-children {
    font-size: 14px;
    line-height: 38px;

    ul li {
      white-space: nowrap;
      &:hover a {
        color: var(--main-color);
      }
    }

    dl {
      display: flex;
      gap: 20px;
      dt {
        flex-shrink: 0;
        font-weight: bold;
        color: var(--main-color);
      }
      dd {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        span:hover a {
          color: var(--main-color);
        }
      }
    }
  }
}

.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>
