<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <header class="home-nav mt0">
      <div class="home-nav__inner" :class="{ 'home-nav__inner--scorlled': isScrolled }">
        <div class="home-nav__logo">
          <!-- 导航栏Logo图片 -->
          <img src="@/assets/images/logo.png" alt="Offer派" class="home-nav__logo-img" />
        </div>
        <!-- 中间Tab导航 -->
        <div class="home-nav__tabs">
          <div
            v-for="tab in navTabs"
            :key="tab.key"
            class="home-nav__tab"
            :class="{ 'home-nav__tab--active': activeTab === tab.key }"
            @click="activeTab = tab.key"
          >
            <span>{{ tab.label }}</span>
          </div>
        </div>
        <div class="dflex-end aliite-c">
          <!-- 未登录时显示登录和立即加入按钮 -->
          <div v-if="!store.state.isAuthenticated" class="fs14 color-1 mr40 fw600 cursor-po" @click="handleLoginClick">登录</div>
          <button v-if="!store.state.isAuthenticated" class="home-nav__btn" @click="router.push('/jobs')">立即加入</button>
          <!-- 已登录时显示进入平台按钮 -->
          <button v-else class="home-nav__btn" @click="router.push('/jobs')">进入平台</button>
        </div>
      </div>
    </header>

    <!-- Tab内容区域 -->
    <component :is="activeTabComponent" />

    <!-- CTA Section（首页tab内容自带，岗位雷达自带，校招公告自带，求职辅导自带，其他tab也复用） -->
    <section v-if="activeTab !== 'home' && activeTab !== 'jobRadar' && activeTab !== 'announcement' && activeTab !== 'mentor' && activeTab !== 'about'" class="home-cta">
      <div class="home-cta__inner">
        <h2>让Offer派带你找到<br/>人生第一份好工作</h2>
        <button class="home-cta__btn" @click="router.push('/jobs')">免费体验</button>
      </div>
    </section>

    <!-- Footer -->
    <footer class="home-footer">
      <div class="home-footer__inner">
        <div class="home-footer__col">
          <div class="home-footer__logo">
            <img src="@/assets/images/logo.png" alt="Offer派" class="home-footer__logo-img" />
          </div>
          <p class="home-footer__slogan">大学生AI求职平台</p>
        </div>
        <div class="home-footer__col">
          <h5>核心功能</h5>
          <ul>
            <li @click="router.push('/jobs')">智能岗位匹配</li>
            <li @click="router.push('/resume')">AI简历优化</li>
            <li @click="router.push('/jobs')">AI求职助手</li>
            <li @click="router.push('/jobs')">一键投递</li>
            <li><a href="https://www.jianshixingqiu.com/mentor" target="_blank">名企导师</a></li>
          </ul>
        </div>
        <div class="home-footer__col">
          <h5>求职资源</h5>
          <ul>
            <li><a href="https://www.jianshixingqiu.com/tutoring" target="_blank">一站式求职辅导</a></li>
            <li><a href="https://www.jianshixingqiu.com/internship" target="_blank">名企实习</a></li>
            <li><a href="https://www.jianshixingqiu.com/biunique" target="_blank">名企导师1V1</a></li>
            <li><a href="https://www.jianshixingqiu.com/directTrain" target="_blank">Offer直通车</a></li>
          </ul>
        </div>
        <div class="home-footer__col">
          <h5>其他信息</h5>
          <ul>
            <li @click="openAgreement('hf8375i8')" style="cursor: pointer;">隐私协议</li>
            <li @click="openAgreement('ae8065i3')" style="cursor: pointer;">会员服务协议</li>
          </ul>
        </div>
      </div>
      <div class="home-footer__bottom">
        <p>©2016-2026 - 广州油梨信息科技有限公司 版权所有</p>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="">粤ICP备16019697号-7</a>
      </div>
    </footer>

    <!-- 隐私协议预览弹窗 -->
    <AgreementPreviewDialog v-model="showPrivacyDialog" :code="agreementCode" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import AgreementPreviewDialog from '@/components/tools/AgreementPreviewDialog.vue'
import HomeContent from '@/components/HomeContent.vue'
import HomeJobRadar from '@/components/HomeJobRadar.vue'
import HomeAnnouncement from '@/components/HomeAnnouncement.vue'
import HomeMentor from '@/components/HomeMentor.vue'
import HomeAbout from '@/components/HomeAbout.vue'

/** 路由实例 */
const router = useRouter()
/** Vuex 状态管理实例 */
const store = useStore()

// 声明友盟统计 _czc 对象
const _czc: any[] = (window as any)._czc || [];
(window as any)._czc = _czc;
_czc.push(["_setAccount", "1281490571"]);

// ==================== Tab导航 ====================

/** 导航Tab列表 */
const navTabs = [
  { key: 'home', label: '首页' },
  { key: 'jobRadar', label: '岗位雷达' },
  { key: 'announcement', label: '校招公告' },
  { key: 'mentor', label: '求职辅导' },
  { key: 'about', label: '关于我们' },
]

/** 当前激活的Tab */
const activeTab = ref('home')

/** 当前激活Tab对应的组件 */
const activeTabComponent = computed(() => {
  switch (activeTab.value) {
    case 'home':
      return HomeContent
    case 'jobRadar':
      return HomeJobRadar
    case 'announcement':
      return HomeAnnouncement
    case 'mentor':
      return HomeMentor
    case 'about':
      return HomeAbout
    default:
      return HomeContent
  }
})

// ==================== 页面滚动 ====================

/** 页面是否已向下滚动超过 20px */
const isScrolled = ref(false)

onMounted(() => {
  const isScaleMode = () => {
    return !!document.body.style.transform && document.body.style.transform.includes('scale')
  }
  const getScrollTop = () => {
    return document.body.scrollTop || window.scrollY || document.documentElement.scrollTop
  }
  const handleScroll = () => {
    const scrollTop = getScrollTop()
    isScrolled.value = scrollTop > 20
  }
  // scale 模式下持续用 rAF 更新吸顶导航的 top 位置
  const tickNav = () => {
    if (isScaleMode()) {
      const el = document.querySelector('.home-nav__inner') as HTMLElement | null
      if (el && isScrolled.value) {
        el.style.top = (document.body.scrollTop + 20) + 'px'
      } else if (el && !isScrolled.value) {
        el.style.top = ''
      }
    } else {
      const el = document.querySelector('.home-nav__inner') as HTMLElement | null
      if (el && el.style.top) {
        el.style.top = ''
      }
    }
    requestAnimationFrame(tickNav)
  }
  requestAnimationFrame(tickNav)

  window.addEventListener('scroll', handleScroll)
  document.body.addEventListener('scroll', handleScroll)
  handleScroll()

  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
    document.body.removeEventListener('scroll', handleScroll)
  })

  // 检测 URL 中的邀请码参数
  const urlParams = new URLSearchParams(window.location.search)
  const inviteCode = urlParams.get('invite_code')
  if (inviteCode && inviteCode.length === 10) {
    store.commit('SET_INVITE_CODE', inviteCode)
  }

  // 加载公共工具数据
  store.dispatch('loadCommonData')
})

/** 点击登录按钮 */
function handleLoginClick() {
  store.dispatch('openLogin', '/jobs')
}

/** 隐私协议弹窗显示状态 */
const showPrivacyDialog = ref(false)
/** 当前要预览的协议码 */
const agreementCode = ref('')

/** 打开协议预览弹窗 */
function openAgreement(code: string) {
  agreementCode.value = code
  showPrivacyDialog.value = true
}
</script>
