<template>
  <div v-if="config">
    <!-- 申请人 -->
    <PlanFieldName
      v-model="form.customer_name"
      label="申请人"
      placeholder="请输入申请人"
      :required="true"
      class="mb-5"
    />

    <!-- 性别 -->
    <PlanFieldRadio
      v-model="form.gender"
      label="性别"
      :options="['男', '女']"
      :required="true"
      class="mb-5"
    />

    <!-- 出生年月日 -->
    <PlanFieldDatePicker
      v-model="form.birthday"
      label="出生年月日"
      placeholder="请选择年月日"
      :required="true"
      class="mb-5"
    />

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

    <!-- 保额 -->
    <PlanFieldAmount
      v-model="form.coverage"
      label="保额"
      placeholder="请输入保额"
      :input-label="'请输入保额金额'"
      :currency="config.currency"
      :required="true"
      class="mb-5"
    />

    <!-- 缴费年期 - 单选形式 -->
    <PaymentPeriodRadio
      v-model="form.payment_period"
      label="缴费年期"
      :options="config.payment_periods"
      :required="true"
      class="mb-5"
    />
  </div>

  <!-- 配置缺失提示 -->
  <div v-else class="text-center text-gray-500 py-10">
    <p>⚠️ 模板配置未找到</p>
    <p class="text-sm mt-2">请检查产品配置或联系开发人员</p>
  </div>
</template>

<script setup>
/**
 * 人寿保险计划书模板
 *
 * @description WIOP3E/WIOP3 等人寿保险产品的计划书录入表单
 *              - 表单字段：性别、出生年月日、是否吸烟、保额、缴费年期
 * @author Claude Code
 * @example
 * <LifeInsuranceTemplate
 *   v-model="formData"
 *   :config="templateConfig"
 * />
 */
import { reactive, watch, toRefs } from 'vue'
import Taro from '@tarojs/taro'
import PlanFieldName from '../PlanFields/NameInput.vue'
import PlanFieldAmount from '../PlanFields/AmountKeyboard.vue'
import PlanFieldDatePicker from '../PlanFields/DatePickerGlobal.vue'
import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
import PaymentPeriodRadio from '../PlanFields/PaymentPeriodRadio.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}
 *
 * ⚠️ 重要：处理父组件重置表单的情况
 * 问题：reactive() 只在初始化时赋值，父组件重置时子组件不会自动更新
 *
 * 解决方案：使用 watch 监听，但只在重置时（空对象）才清空
 * - 判断重置的标准：从有数据变为空对象
 * - 用户输入时的更新：只合并新字段，不删除已有字段
 */
const form = reactive({})

let previousModelValue = null

// 监听父组件的数据变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (!newVal) {
      // null 或 undefined：清空
      Object.keys(form).forEach(key => delete form[key])
      previousModelValue = null
      return
    }

    // 判断是否是重置（从有数据变为空对象）
    const isReset = previousModelValue &&
                      Object.keys(previousModelValue).length > 0 &&
                      Object.keys(newVal).length === 0

    if (isReset) {
      // 父组件重置了：清空表单
      Object.keys(form).forEach(key => delete form[key])
      previousModelValue = newVal
    } else {
      // 正常更新：合并新字段，不删除已有字段
      // 这很重要！因为用户可能刚填写了某些字段，其他字段还没更新
      Object.keys(newVal).forEach(key => {
        form[key] = newVal[key]
      })
      previousModelValue = newVal
    }
  },
  { immediate: true }
)

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

/**
 * 表单校验
 * @returns {boolean} 是否通过校验
 */
const validate = () => {
  if (!form.customer_name || !form.customer_name.trim()) {
    Taro.showToast({ title: '请输入申请人', icon: 'none' })
    return false
  }
  if (!form.gender) {
    Taro.showToast({ title: '请选择性别', icon: 'none' })
    return false
  }
  if (!form.birthday) {
    Taro.showToast({ title: '请选择出生年月日', icon: 'none' })
    return false
  }
  if (!form.smoker) {
    Taro.showToast({ title: '请选择是否吸烟', icon: 'none' })
    return false
  }
  if (!form.coverage) {
    Taro.showToast({ title: '请输入保额', icon: 'none' })
    return false
  }
  if (!form.payment_period) {
    Taro.showToast({ title: '请选择缴费年期', icon: 'none' })
    return false
  }
  return true
}

/**
 * 清除验证错误
 * @description 由于使用 Toast 显示错误，无需清除状态
 *              保留此方法以保持接口一致性
 */
const clearErrors = () => {
  // 当前使用 Toast 显示错误，无需清除错误状态
  // 如果将来改用内联错误提示，可以在这里清除错误状态
}

defineExpose({
  validate,
  clearErrors
})
</script>

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