<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/NavHeader.vue'
import SectionCard from '@/components/SectionCard.vue'
import { useSectionList } from '@/composables/useSectionList'

/**
 * 家办相关页面数据
 */
const FAMILY_OFFICE_SECTIONS = [
  {
    title: '家庭成员',
    items: [
      {
        id: 'family-member-list',
        title: '成员列表',
        subtitle: '管理家庭成员信息',
        icon: 'my'
      },
      {
        id: 'family-member-add',
        title: '新增成员',
        subtitle: '添加家庭成员',
        icon: 'edit'
      }
    ]
  },
  {
    title: '健康档案',
    items: [
      {
        id: 'family-health-checkup',
        title: '体检报告',
        subtitle: '查看家庭成员体检记录',
        icon: 'order'
      },
      {
        id: 'family-health-medical',
        title: '就医记录',
        subtitle: '家庭成员就医历史',
        icon: 'clock'
      }
    ]
  },
  {
    title: '资产管理',
    items: [
      {
        id: 'family-asset-policy',
        title: '保单管理',
        subtitle: '家庭保单汇总',
        icon: 'star'
      },
      {
        id: 'family-asset-overview',
        title: '资产总览',
        subtitle: '家庭资产分布',
        icon: 'find'
      }
    ]
  },
  {
    title: '生活服务',
    items: [
      {
        id: 'family-service-medical',
        title: '高端医疗',
        subtitle: '预约高端医疗服务',
        icon: 'service'
      },
      {
        id: 'family-service-health',
        title: '康养服务',
        subtitle: '健康养生服务',
        icon: 'playCircleFill'
      }
    ]
  }
]

/**
 * 处理项目点击事件
 *
 * @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(FAMILY_OFFICE_SECTIONS, handleItemClickWithNav)
</script>

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