<template>
  <div class="bg-f mb16 prl24 ptb16 dflex aliite-c">
    <div class="job-page-header dflex-start aliite-c">
      <h2 class="job-page-header__title">发现理想职位</h2>
      <div class="job-page-header__tabs ml30 ">
        <div
            v-for="(tab,index) in tabs"
            :key="tab.key"
            class="job-page-header__tab"
            :class="{ 'job-page-header__tab--active': activeTab === tab.key }"
            :style="index==0?'padding:0.06rem 0.20rem;':''"
            @click="handleTabClick(tab.key)"
        >
          {{ tab.label }}
          <!-- 收藏/已投递 计数圆形徽章 -->
          <span v-if="tab.count !== undefined" class="job-page-header__tab-badge">{{ tab.count }}</span>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { fetchFavoriteCount, fetchApplyCount } from '@/api/jobs'

// ==================== Props & Emits ====================

/** activeTab: 当前激活的 Tab key，由父组件通过 v-model 传入 */
const props = defineProps<{
  activeTab: string
}>()

/** 双向绑定事件，在 Jobs 页面内切换 Tab 时触发 */
const emit = defineEmits<{
  (e: 'update:activeTab', value: string): void
}>()

// ==================== 路由相关 ====================

const router = useRouter()
const route = useRoute()
const store = useStore()

/** 登录状态 */
const isAuthenticated = computed(() => store.state.isAuthenticated)

// ==================== 收藏 & 投递统计 ====================

/** 收藏总数 */
const favoriteTotal = ref(0)

/** 投递总数 */
const applyTotal = ref(0)

/** 加载收藏统计 */
async function loadFavoriteCount() {
  try {
    const res = await fetchFavoriteCount()
    if (res.code === '0' && res.data) {
      favoriteTotal.value = res.data.totalCount
    }
  } catch (e) {
    console.error('加载收藏统计失败', e)
  }
}

/** 加载投递统计 */
async function loadApplyCount() {
  try {
    const res = await fetchApplyCount()
    if (res.code === '0' && res.data) {
      applyTotal.value = res.data.totalCount
    }
  } catch (e) {
    console.error('加载投递统计失败', e)
  }
}

/** 组件挂载时请求收藏和投递统计 */
onMounted(() => {
  if (isAuthenticated.value) {
    loadFavoriteCount()
    loadApplyCount()
  }
})

/** 暴露刷新方法给父组件调用，以便收藏/投递操作后同步刷新计数 */
defineExpose({
  loadFavoriteCount,
  loadApplyCount,
})

// ==================== 常量数据 ====================

/** Tab 选项列表，count 用于显示圆形徽章计数 */
const tabs = computed(() => [
  { key: 'recommend', label: '推荐', count: undefined },
  { key: 'collected', label: '收藏', count: favoriteTotal.value },
  { key: 'applied', label: '已投递', count: applyTotal.value },
])

// ==================== 事件处理 ====================

/**
 * Tab 点击处理：
 * - 在 Jobs 页面：直接切换 activeTab（通过 emit 通知父组件）
 * - 在其他页面（如 JobDetail）：跳转到 Jobs 页面并携带 tab query 参数
 */
function handleTabClick(key: string) {
  if (route.name === 'Jobs') {
    emit('update:activeTab', key)
  } else {
    router.push({ name: 'Jobs', query: { tab: key } })
  }
}
</script>
