<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 SIGNING_SECTIONS = [
  {
    title: '培训板块',
    items: [
      {
        id: 'signing-training-company',
        icon: 'shop',
        title: '公司介绍',
        subtitle: '企业背景及发展历程'
      },
      {
        id: 'signing-training-product',
        icon: 'category',
        title: '产品介绍及更新',
        subtitle: '最新产品资料库'
      }
    ]
  },
  {
    title: '签单前',
    items: [
      {
        id: 'signing-pre-underwriting',
        icon: 'check',
        title: '预核保',
        subtitle: '核保流程指引'
      },
      {
        id: 'signing-pre-plan',
        icon: 'edit',
        title: '做计划书',
        subtitle: '方案设计工具'
      }
    ]
  },
  {
    title: '签单中',
    items: [
      {
        id: 'signing-process-info',
        icon: 'checklist',
        title: '信息收集及健康告知模板',
        subtitle: '标准表格及注意事项'
      },
      {
        id: 'signing-process-payment',
        icon: 'cart',
        title: '缴费方式银行开户',
        subtitle: '支付渠道办理指南'
      },
      {
        id: 'signing-process-checkup',
        icon: 'people',
        title: '体检经验',
        subtitle: '体检流程及常见问题'
      }
    ]
  },
  {
    title: '签单后',
    items: [
      {
        id: 'signing-post-endorsement',
        icon: 'order',
        title: '批单跟进',
        subtitle: '保单变更处理流程'
      },
      {
        id: 'signing-post-pending',
        icon: 'clock',
        title: '核保/pending',
        subtitle: '核保进度查询'
      },
      {
        id: 'signing-post-renewal',
        icon: 'refresh',
        title: '续保',
        subtitle: '续期服务指引'
      }
    ]
  },
  {
    title: '售后',
    items: [
      {
        id: 'signing-aftercare-doctor',
        icon: 'location',
        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(SIGNING_SECTIONS, handleItemClickWithNav)
</script>

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