<template>
  <div class="flex flex-col h-full bg-gray-50">
    <div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
      <span class="text-lg font-normal text-gray-900">申请计划书</span>
      <IconFont name="close" size="16" color="#9CA3AF" @click="close" />
    </div>

    <div class="flex-1 overflow-y-auto p-4">
      <div class="bg-white rounded-xl p-5 shadow-sm">
        <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>
      </div>
    </div>

    <div class="p-4 pt-2 pb-8 flex justify-between gap-4 bg-gray-50">
      <div
        class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base bg-white"
        @click="close"
      >
        取消
      </div>
      <div
        class="flex-1 py-3 text-center bg-blue-600 text-white rounded-lg text-base"
        @click="submit"
      >
        提交申请
      </div>
    </div>

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

<script setup>
/**
 * @description 录入计划书 - 方案A 内容组件
 * @emits close - 关闭弹窗事件
 * @emits submit - 提交事件，携带表单数据
 */
import { ref, reactive } from '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' },
];

const toggleSelection = (field, value) => {
  const index = form[field].indexOf(value);
  if (index === -1) {
    form[field].push(value);
  } else {
    form[field].splice(index, 1);
  }
};

const confirmIndustry = ({ selectedValue, selectedOptions }) => {
  form.industry = selectedOptions[0].text;
  showIndustryPicker.value = false;
};

const close = () => {
  emit('close');
};

const submit = () => {
  // Validate form if needed
  console.log('Submit form:', 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>