<template>
  <div>
    <div class="job-page-header">
      <h2 class="job-page-header__title">发现理想职位</h2>
      <p class="job-page-header__subtitle">找到最适合你的工作机会</p>
    </div>
    <div class="job-page-header__tabs mt20">
      <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.30rem;':''"
        @click="handleTabClick(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

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

/** activeTab: 当前激活的 Tab key，由父组件通过 v-model 传入 */
const props = defineProps<{
  activeTab: string
  /** 收藏总数，由父组件传入 */
  favoriteCount?: number
  /** 投递总数，由父组件传入 */
  applyCount?: number
}>()

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

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

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

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

/** Tab 选项列表 */
const tabs = computed(() => [
  { key: 'recommend', label: '推荐' },
  { key: 'collected', label: `收藏（${props.favoriteCount ?? 0}）` },
  { key: 'applied', label: `投递（${props.applyCount ?? 0}）` },
])

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

/**
 * 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>
