<template>
  <div>
    <!-- 性别 -->
    <PlanFieldRadio
      v-model="form.gender"
      label="性别"
      :options="['男', '女']"
    />

    <!-- 出生年月日 -->
    <PlanFieldDatePicker
      v-model="form.birthday"
      label="出生年月日"
      placeholder="请选择日期"
      @change="onBirthdayChange"
    />

    <!-- 年龄（根据出生日期自动计算，可编辑） -->
    <PlanFieldAgePicker
      v-model="form.age"
      label="年龄"
      placeholder="请选择出生日期自动计算"
    />

    <!-- 是否吸烟 -->
    <PlanFieldRadio
      v-model="form.smoker"
      label="是否吸烟"
      :options="['是', '否']"
    />

    <!-- 保额 -->
    <PlanFieldAmount
      v-model="form.coverage"
      label="保额"
      placeholder="请输入保额"
      :currency="config.currency"
    />

    <!-- 缴费年期 -->
    <PlanFieldSelect
      v-model="form.payment_period"
      label="缴费年期"
      placeholder="请选择缴费年期"
      :options="config.payment_periods"
    />

    <!-- 保险期间 -->
    <div class="flex justify-between items-start mb-5">
      <span class="text-sm text-gray-600 mt-1.5">保险期间</span>
      <div class="bg-blue-50 rounded-md px-3 py-1.5">
        <span class="text-sm text-blue-600">{{ config.insurance_period }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 重疾保险计划书模版
 *
 * @description MPC/MBC PRO/MBC2 等重疾保险产品的计划书录入表单
 *              - 支持出生日期自动计算年龄
 *              - 表单字段：性别、年龄、出生年月日、是否吸烟、保额、缴费年期
 * @author Claude Code
 * @example
 * <CriticalIllnessTemplate
 *   v-model="formData"
 *   :config="templateConfig"
 * />
 */
import { reactive, watch } from 'vue'
import PlanFieldAgePicker from '../PlanFields/AgePicker.vue'
import PlanFieldAmount from '../PlanFields/AmountInput.vue'
import PlanFieldDatePicker from '../PlanFields/DatePicker.vue'
import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
import PlanFieldSelect from '../PlanFields/SelectPicker.vue'

/**
 * 组件属性
 */
const props = defineProps({
  /**
   * 表单数据对象
   * @type {Object}
   */
  modelValue: {
    type: Object,
    default: () => ({})
  },

  /**
   * 模版配置
   * @type {Object}
   * @property {string} currency - 币种代码
   * @property {Array<string>} payment_periods - 缴费年期选项
   * @property {Object} age_range - 年龄范围 { min, max }
   * @property {string} insurance_period - 保险期间
   */
  config: {
    type: Object,
    required: true
  }
})

/**
 * 组件事件
 */
const emit = defineEmits([
  /**
   * 更新表单数据事件
   * @event update:modelValue
   * @param {Object} value - 表单数据
   */
  'update:modelValue'
])

/**
 * 表单数据
 * @type {Object}
 */
const form = reactive(props.modelValue || {})

/**
 * 监听表单数据变化，同步到父组件
 */
watch(
  () => form,
  (newVal) => emit('update:modelValue', newVal),
  { deep: true }
)

/**
 * 出生日期变化时自动计算年龄
 * @param {string} birthday - 出生日期（格式：YYYY-MM-DD）
 *
 * @description 用户选择出生日期后，自动计算并填充年龄字段
 *              计算公式：当前年份 - 出生年份
 */
const onBirthdayChange = (birthday) => {
  if (birthday) {
    // 兼容 iOS 的日期格式 (YYYY/MM/DD)
    const dateStr = birthday.replace(/-/g, '/')
    const birthDate = new Date(dateStr)

    if (!Number.isNaN(birthDate.getTime())) {
      const birthYear = birthDate.getFullYear()
      const currentYear = new Date().getFullYear()
      const calculatedAge = currentYear - birthYear

      // 自动填充年龄字段（确保非负）
      form.age = Math.max(0, calculatedAge)
    }
  }
}
</script>

<style lang="less" scoped>
/* 模版样式 */
</style>