<template>
  <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
    <!-- Navigation Header -->
    <NavHeader title="入职相关" />

    <!-- Content List -->
    <div class="px-[40rpx] mt-[40rpx] relative z-10">
      <SectionCard
        v-for="(section, index) in sections"
        :key="index"
        :title="section.title"
        :items="section.items"
        @item-click="handleItemClick"
      />
    </div>
  </div>
</template>

<script setup>
import NavHeader from '@/components/navigation/NavHeader.vue'
import SectionCard from '@/components/list/SectionCard.vue'
import { useSectionList } from '@/composables/useSectionList'

/**
 * 入职相关页面数据
 */
const ONBOARDING_SECTIONS = [
  {
    title: '入职前',
    items: [
      {
        id: 'onboarding-exam',
        icon: '',
        title: '考试报名',
        subtitle: '报名参加代理人资格考试'
      },
      {
        id: 'onboarding-interview',
        icon: '',
        title: '面试结果查询',
        subtitle: '查看面试状态和结果'
      },
      {
        id: 'onboarding-materials',
        icon: '',
        title: '入职材料提交',
        subtitle: '上传入职所需证件和资料'
      }
    ]
  },
  {
    title: '入职中',
    items: [
      {
        id: 'onboarding-timeline',
        icon: '',
        title: '各个进度时间线表格',
        subtitle: '查看入职流程关键节点'
      },
      {
        id: 'onboarding-tasks',
        icon: '',
        title: '待办事项清单',
        subtitle: '你需要完成的任务列表'
      },
      {
        id: 'onboarding-contract',
        icon: '',
        title: '签署合同',
        subtitle: '电子合同在线签署'
      }
    ]
  },
  {
    title: '入职后',
    items: [
      {
        id: 'onboarding-training',
        icon: '',
        title: '新人培训',
        subtitle: '参加新人岗前培训课程'
      },
      {
        id: 'onboarding-target',
        icon: '',
        title: '业绩目标设定',
        subtitle: '制定首月业绩目标'
      },
      {
        id: 'onboarding-team',
        icon: '',
        title: '团队介绍',
        subtitle: '了解你的团队和主管'
      }
    ]
  }
]

/**
 * 处理项目点击事件
 *
 * @description 点击列表项时跳转到资料列表页，并带上分类 ID 和标题
 * @param {Object} item - 被点击的项目数据
 * @param {Function} go - 导航函数
 */
const handleItemClickWithNav = (item, go) => {
  go('/pages/material-list/index', {
    categoryId: item.id,
    title: item.title
  })
}

// 使用 useSectionList composable 管理列表数据，传入自定义点击处理
const { sections, handleItemClick } = useSectionList(ONBOARDING_SECTIONS, handleItemClickWithNav)
</script>

<script>
export default {
  name: 'OnboardingIndex'
}
</script>