<template>
  <PlanPopup title="申请计划书" @close="close" @submit="submit">
    <!-- 客户姓名 -->
    <div class="text-sm text-gray-600 mb-2">客户姓名</div>
    <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
      <nut-input
        v-model="form.name"
        placeholder="请输入客户姓名"
        class="!p-0 !bg-transparent !text-sm !text-gray-900"
        :border="false"
      />
    </div>

    <!-- 性别 -->
    <div class="text-sm text-gray-600 mb-2">性别</div>
    <nut-radio-group v-model="form.gender" direction="horizontal" class="mb-4">
      <nut-radio label="male" class="mr-8">男</nut-radio>
      <nut-radio label="female">女</nut-radio>
    </nut-radio-group>

    <!-- 年龄 -->
    <div class="text-sm text-gray-600 mb-2">年龄</div>
    <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
      <nut-input
        v-model="form.age"
        type="digit"
        placeholder="请输入年龄"
        class="!p-0 !bg-transparent !text-sm !text-gray-900"
        :border="false"
      />
    </div>

    <!-- 行业 -->
    <div class="text-sm text-gray-600 mb-2">行业</div>
    <div
      class="flex justify-between items-center border border-gray-200 rounded-lg p-3 mb-4 overflow-hidden"
      @click="showIndustryPicker = true"
    >
      <span :class="form.industry ? 'text-gray-900' : 'text-gray-400'" class="text-sm">
        {{ form.industry || '请选择职业' }}
      </span>
      <IconFont name="right" size="14" color="#9CA3AF" />
    </div>

    <!-- 年收入区间 -->
    <div class="text-sm text-gray-600 mb-2">年收入区间</div>
    <div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
      <nut-input
        v-model="form.income"
        type="digit"
        placeholder="请输入年收入"
        class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
        :border="false"
      />
      <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">万元</span>
    </div>

    <!-- 家庭结构 -->
    <div class="text-sm text-gray-600 mb-3">家庭结构(多选)</div>
    <div class="flex flex-wrap gap-3 mb-5">
      <div
        v-for="item in familyOptions"
        :key="item.value"
        class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
        :class="form.family.includes(item.value) ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
        @click="toggleSelection('family', item.value)"
      >
        {{ item.label }}
      </div>
    </div>

    <!-- 保险需求 -->
    <div class="text-sm text-gray-600 mb-3">保险需求(多选)</div>
    <div class="flex flex-wrap gap-3 mb-5">
      <div
        v-for="item in insuranceOptions"
        :key="item.value"
        class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
        :class="form.insurance.includes(item.value) ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
        @click="toggleSelection('insurance', item.value)"
      >
        {{ item.label }}
      </div>
    </div>

    <!-- 期望收益率 -->
    <div class="text-sm text-gray-600 mb-2">期望收益率</div>
    <div class="border border-gray-200 rounded-lg mb-4 flex items-center overflow-hidden">
      <nut-input
        v-model="form.returnRate"
        type="digit"
        placeholder="请输入期望收益率"
        class="!p-0 !bg-transparent flex-1 !text-sm !text-gray-900"
        :border="false"
      />
      <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">%</span>
    </div>

    <!-- Industry Picker -->
    <nut-popup position="bottom" v-model:visible="showIndustryPicker">
      <nut-picker
        :columns="industryColumns"
        title="选择行业"
        @confirm="confirmIndustry"
        @cancel="showIndustryPicker = false"
      />
    </nut-popup>
  </PlanPopup>
</template>

<script setup>
/**
 * @description 录入计划书 - 方案A 内容组件
 * @description 使用 PlanPopup 容器组件提供统一的布局和按钮
 *
 * @emits close - 关闭弹窗事件
 * @emits submit - 提交事件，携带表单数据
 */
import { ref, reactive } from 'vue'
import PlanPopup from './PlanPopup.vue'
import IconFont from '@/components/IconFont.vue'

const emit = defineEmits(['close', 'submit'])

/**
 * 表单数据
 */
const form = reactive({
  name: '',
  gender: '', // 'male' | 'female'
  age: '',
  industry: '',
  income: '',
  family: [],
  insurance: [],
  returnRate: ''
})

/**
 * 控制行业选择器显示
 */
const showIndustryPicker = ref(false)

/**
 * 行业选项
 */
const industryColumns = [
  { text: 'IT/互联网', value: 'it' },
  { text: '金融', value: 'finance' },
  { text: '教育', value: 'education' },
  { text: '医疗', value: 'medical' },
  { text: '其他', value: 'other' }
]

/**
 * 家庭结构选项
 */
const familyOptions = [
  { label: '配偶', value: 'spouse' },
  { label: '子女', value: 'children' },
  { label: '父母', value: 'parents' },
  { label: '其他', value: 'others' }
]

/**
 * 保险需求选项
 */
const insuranceOptions = [
  { label: '人身保障', value: 'life' },
  { label: '财富传承', value: 'wealth' },
  { label: '子女教育', value: 'education' },
  { label: '养老规划', value: 'pension' }
]

/**
 * 切换多选项的选择状态
 * @param {string} field - 字段名
 * @param {string} value - 选项值
 */
const toggleSelection = (field, value) => {
  const index = form[field].indexOf(value)
  if (index === -1) {
    form[field].push(value)
  } else {
    form[field].splice(index, 1)
  }
}

/**
 * 确认行业选择
 * @param {Object} params - 选择器返回参数
 * @param {Array} params.selectedOptions - 选中的选项
 */
const confirmIndustry = ({ selectedOptions }) => {
  form.industry = selectedOptions[0].text
  showIndustryPicker.value = false
}

/**
 * 关闭弹窗
 */
const close = () => {
  emit('close')
}

/**
 * 提交表单
 */
const submit = () => {
  console.log('SchemeA Submit:', form)
  emit('submit', form)
}
</script>

<style lang="less" scoped>
/* Override NutUI input styles to match design */
:deep(.nut-input) {
  padding: 0;
  background: transparent;
  border-radius: inherit;
}
</style>