<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 class="border-t border-gray-200 my-6"></div>

    <!-- 提取计划配置 -->
    <div v-if="config.withdrawal_plan?.enabled" class="withdrawal-plan-section">
      <!-- 第一层：是否希望生成一份允许减少名义金额的提取说明？ -->
      <PlanFieldRadio
        v-model="form.withdrawal_enabled"
        label="是否希望生成一份允许减少名义金额的提取说明？"
        :options="['是', '否']"
        :required="true"
        class="mb-5"
      />

      <!-- 款项提取配置（始终显示，不受上面字段影响） -->
      <h3 class="text-base font-semibold text-gray-900 mb-4">款项提取（允许减少名义金额）</h3>

      <!-- 提取选项：指定提取金额 / 最高固定提取金额 -->
      <PlanFieldRadio
          v-model="form.withdrawal_mode"
          label="提取选项"
          :options="['指定提取金额', '最高固定提取金额']"
          :required="true"
          class="mb-5"
        />

        <!-- 指定提取金额模式 -->
        <template v-if="form.withdrawal_mode === '指定提取金额'">
          <!-- 提取方式：只有按年岁 -->
          <PlanFieldRadio
            v-model="form.withdrawal_method"
            label="提取方式"
            :options="['按年岁']"
            :required="true"
            class="mb-5"
          />

          <!-- 按年岁 -->
          <template v-if="form.withdrawal_method === '按年岁'">
            <!-- 每年提取金额 -->
            <PlanFieldAmount
              v-model="form.annual_withdrawal_amount"
              label="每年提取金额"
              placeholder="请输入每年提取金额"
              :input-label="'请输入每年提取金额'"
              :currency="config.withdrawal_plan.default_currency"
              :required="true"
              class="mb-5"
            />

            <!-- 由几岁开始 -->
            <PlanFieldAgePicker
              v-model="form.withdrawal_start_age"
              label="由几岁开始"
              placeholder="请输入开始提取年龄"
              :required="true"
              class="mb-5"
            />

            <!-- 提取期（年） -->
            <PlanFieldSelect
              v-model="form.withdrawal_period"
              label="提取期（年）"
              placeholder="请选择提取期"
              :options="withdrawalPeriods"
              :required="true"
              class="mb-5"
            />

            <!-- 每年递增提取之百分比 -->
            <div class="mb-5">
              <div class="text-sm text-gray-700 mb-2 flex items-center">
                <span class="text-red-500 mr-1">*</span>
                <span>每年递增提取之百分比（%）</span>
              </div>
              <nut-input
                v-model="form.annual_increase_percentage"
                type="digit"
                placeholder="请输入递增百分比"
                @input="onPercentageInput"
                class="w-full"
              />
            </div>
          </template>
        </template>

        <!-- 最高固定提取金额模式 -->
        <template v-if="form.withdrawal_mode === '最高固定提取金额'">
          <!-- 按年岁：由几岁开始 -->
          <PlanFieldAgePicker
            v-model="form.withdrawal_start_age"
            label="按年岁：由几岁开始"
            placeholder="请输入开始提取年龄"
            :required="true"
            class="mb-5"
          />

          <!-- 提取期（年） -->
          <PlanFieldSelect
            v-model="form.withdrawal_period"
            label="提取期（年）"
            placeholder="请选择提取期"
            :options="withdrawalPeriods"
            :required="true"
            class="mb-5"
          />
        </template>
    </div>
  </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 GS/GC/FA/LV2 等储蓄型保险产品的计划书录入表单
 *              - 表单字段：性别、出生年月日、是否吸烟、保额、缴费年期
 *              - 提取计划：指定提取金额（按年岁/按保单年度）、最高固定提取金额
 * @author Claude Code
 * @example
 * <SavingsTemplate
 *   v-model="formData"
 *   :config="templateConfig"
 * />
 */
import { reactive, watch, computed, nextTick } from 'vue'
import Taro from '@tarojs/taro'
import PlanFieldName from '../PlanFields/NameInput.vue'
import PlanFieldAgePicker from '../PlanFields/AgePickerGlobal.vue'
import PlanFieldAmount from '../PlanFields/AmountKeyboard.vue'
import PlanFieldDatePicker from '../PlanFields/DatePickerGlobal.vue'
import PlanFieldRadio from '../PlanFields/RadioGroup.vue'
import PlanFieldSelect from '../PlanFields/SelectPickerGlobal.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 - 保险期间
   * @property {Object} withdrawal_plan - 提取计划配置
   * @property {boolean} withdrawal_plan.enabled - 是否启用提取计划
   * @property {Array<string>} withdrawal_plan.currencies - 支持的币种
   * @property {string} withdrawal_plan.default_currency - 默认币种
   * @property {Array<string>} withdrawal_plan.withdrawal_modes - 提取模式
   * @property {Array<string>} withdrawal_plan.withdrawal_periods - 提取年期
   */
  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

// 初始化默认值
const initializeForm = (value) => {
  if (!value) {
    Object.keys(form).forEach(key => delete form[key])
    return
  }

  Object.assign(form, {
    ...value,
    // 默认值
    withdrawal_enabled: value.withdrawal_enabled || '否',
    withdrawal_mode: value.withdrawal_mode || '指定提取金额',
    withdrawal_method: value.withdrawal_method || '按年岁',
    // 新字段默认值（使用 null 以匹配 AmountKeyboard 的 Number 类型）
    annual_withdrawal_amount: value.annual_withdrawal_amount ?? null,
    annual_increase_percentage: value.annual_increase_percentage ?? 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) {
      // 父组件重置了：清空表单
      initializeForm(newVal)
      previousModelValue = newVal
    } else {
      // 正常更新：合并新字段，保留默认值逻辑
      Object.assign(form, {
        ...newVal,
        // 默认值
        withdrawal_enabled: newVal.withdrawal_enabled || '否',
        withdrawal_mode: newVal.withdrawal_mode || '指定提取金额',
        withdrawal_method: newVal.withdrawal_method || '按年岁',
        // 新字段默认值（使用 null 以匹配 AmountKeyboard 的 Number 类型）
        annual_withdrawal_amount: newVal.annual_withdrawal_amount ?? null,
        annual_increase_percentage: newVal.annual_increase_percentage ?? null
      })
      previousModelValue = newVal
    }
  },
  { immediate: true }
)

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

/**
 * 监听提取模式变化，清空对应字段
 */
watch(
  () => form.withdrawal_mode,
  (newMode, oldMode) => {
    // 每次切换模式时，只清空输入字段（保留模式选择字段）
    if (newMode === '最高固定提取金额') {
      // 清空"指定提取金额"模式的输入字段
      form.annual_withdrawal_amount = null
      form.annual_increase_percentage = null
      form.withdrawal_start_age = null
      form.withdrawal_period = null
      // 立即同步给父组件
      emit('update:modelValue', { ...form })
    } else if (newMode === '指定提取金额') {
      // 清空"最高固定提取金额"模式的输入字段
      form.withdrawal_start_age = null
      form.withdrawal_period = null
      // 立即同步给父组件
      emit('update:modelValue', { ...form })
    }
  }
)

/**
 * 提取年期选项（从配置读取）
 * @type {ComputedRef<Array<string>>}
 */
const withdrawalPeriods = computed(() => {
  return props.config?.withdrawal_plan?.withdrawal_periods || [
    '1年',
    '2年',
    '3年',
    '5年',
    '10年',
    '15年',
    '20年',
    '终身'
  ]
})

/**
 * 百分比输入限制（实时）
 * @description 限制百分比输入为有效数值，最多2位小数
 *              只允许输入数字和一个小数点
 * @param {string} value - 输入值
 */
const onPercentageInput = (value) => {
  // 转换为字符串（处理 value 为 null 或其他类型的情况）
  let strValue = String(value ?? '')

  // 移除所有非数字字符（保留小数点）
  let cleaned = strValue.replace(/[^0-9.]/g, '')

  // 只允许一个小数点
  const parts = cleaned.split('.')
  if (parts.length > 2) {
    cleaned = parts[0] + '.' + parts.slice(1).join('')
  }

  // 限制小数位数为2位
  if (parts.length === 2 && parts[1].length > 2) {
    cleaned = parts[0] + '.' + parts[1].slice(0, 2)
  }

  // 限制范围：0-100
  const numValue = parseFloat(cleaned)
  if (!Number.isNaN(numValue)) {
    if (numValue > 100) {
      cleaned = '100'
    } else if (numValue < 0) {
      cleaned = '0'
    }
  }

  // 更新表单值
  form.annual_increase_percentage = cleaned
}

/**
 * 表单校验
 * @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
  }

  // 提取计划校验
  if (props.config.withdrawal_plan?.enabled) {
    // withdrawal_enabled 只是一个可选字段，不需要校验
    // 真正需要校验的是提取方案配置

    if (!form.withdrawal_mode) {
      Taro.showToast({ title: '请选择提取选项', icon: 'none' })
      return false
    }

    // 根据选择的提取模式进行校验
    if (form.withdrawal_mode === '指定提取金额') {
      if (!form.withdrawal_method) {
        Taro.showToast({ title: '请选择提取方式', icon: 'none' })
        return false
      }

      if (form.withdrawal_start_age === undefined || form.withdrawal_start_age === '') {
        Taro.showToast({ title: '请输入开始提取年龄', icon: 'none' })
        return false
      }

      if (!form.withdrawal_period) {
        Taro.showToast({ title: '请选择提取期', icon: 'none' })
        return false
      }

      if (form.withdrawal_method === '按年岁') {
        if (!form.annual_withdrawal_amount || form.annual_withdrawal_amount === '') {
          Taro.showToast({ title: '请输入每年提取金额', icon: 'none' })
          return false
        }
        if (form.annual_increase_percentage === undefined || form.annual_increase_percentage === '') {
          Taro.showToast({ title: '请输入每年递增提取之百分比', icon: 'none' })
          return false
        }

        // 验证百分比范围
        const percentage = parseFloat(form.annual_increase_percentage)
        if (Number.isNaN(percentage) || percentage < 0 || percentage > 100) {
          Taro.showToast({ title: '请输入0-100之间的百分比', icon: 'none' })
          return false
        }
      }
    } else if (form.withdrawal_mode === '最高固定提取金额') {
      if (form.withdrawal_start_age === undefined || form.withdrawal_start_age === '') {
        Taro.showToast({ title: '请输入开始提取年龄', icon: 'none' })
        return false
      }
      if (!form.withdrawal_period) {
        Taro.showToast({ title: '请选择提取期', icon: 'none' })
        return false
      }
    }
  }

  return true
}

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

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

<style lang="less">
/* 提取计划区域样式 */
.withdrawal-plan-section {
  .nut-input {
    padding-left: 20rpx !important;
  }
}
</style>