<template>
  <div class="flex flex-col h-full bg-white">
    <!-- Header -->
    <div class="flex justify-between items-center px-6 py-6 border-b border-gray-100">
      <span class="text-lg font-normal text-gray-800">申请计划书</span>
      <img
        class="w-6 h-6"
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng9edea6fd27cf6cb2ff57c90a0834dcda1f86b6072ce07f5e7e07069c2d3b3e9e"
        @click="close"
      />
    </div>

    <!-- Scrollable Content -->
    <div class="flex-1 overflow-y-auto px-6 py-4">
      <!-- 客户姓名 -->
      <div class="text-sm text-gray-700 mb-2">客户姓名</div>
      <nut-input
        v-model="form.name"
        placeholder="请输入客户姓名"
        class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4"
        :border="false"
      />

      <!-- 性别 -->
      <div class="text-sm text-gray-700 mb-2">性别</div>
      <div class="flex items-center mb-4">
        <div 
          class="flex items-center mr-8 cursor-pointer" 
          @click="form.gender = 'male'"
        >
          <img
            class="w-5 h-5 mr-2"
            src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa89ac8577908dfb2901e1067741dcdc9a5b58739da04a5243e45c296275f5ef"
          />
          <span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-800'">男</span>
        </div>
        <div 
          class="flex items-center cursor-pointer" 
          @click="form.gender = 'female'"
        >
          <img
            class="w-5 h-5 mr-2"
            src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng86258dc38e0dde555b09ba68a94fb042ce0172628791dc178dd1a7c0c89a824f"
          />
          <span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'">女</span>
        </div>
      </div>

      <!-- 年龄 -->
      <div class="text-sm text-gray-700 mb-2">年龄</div>
      <nut-input
        v-model="form.age"
        type="digit"
        placeholder="请输入年龄"
        class="!border !border-gray-200 !rounded-lg !px-3 !py-2 mb-4"
        :border="false"
      />

      <!-- 行业 -->
      <div class="text-sm text-gray-700 mb-2">行业</div>
      <div
        class="flex justify-between items-center p-3 border border-gray-200 rounded-lg mb-4 bg-white"
        @click="showIndustryPicker = true"
      >
        <span :class="form.industry ? 'text-gray-900' : 'text-gray-400'" class="text-sm">
          {{ form.industry || '请选择职业' }}
        </span>
        <img
          class="w-3.5 h-3.5"
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngcf768ccd4a7e2a9d761be1bbd425d7c09e15f44c66570d21e5e9121448ccada5"
        />
      </div>

      <!-- 年收入区间 -->
      <div class="text-sm text-gray-700 mb-2">年收入区间</div>
      <div class="relative mb-4">
        <nut-input
          v-model="form.income"
          type="digit"
          placeholder="请输入年收入"
          class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10"
          :border="false"
        />
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">万元</span>
      </div>

      <!-- 家庭结构 -->
      <div class="text-sm text-gray-700 mb-2">家庭结构</div>
      <div class="flex flex-wrap gap-4 mb-4">
        <div
          v-for="item in familyOptions"
          :key="item.value"
          class="flex items-center cursor-pointer min-w-[60px]"
          @click="toggleSelection('family', item.value)"
        >
          <img :src="item.icon" class="w-5 h-5 mr-2" />
          <span :class="form.family.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
            {{ item.label }}
          </span>
        </div>
      </div>

      <!-- 保险需求 -->
      <div class="text-sm text-gray-700 mb-2">保险需求</div>
      <div class="flex flex-wrap gap-4 mb-4">
        <div
          v-for="item in insuranceOptions"
          :key="item.value"
          class="flex items-center cursor-pointer min-w-[85px]"
          @click="toggleSelection('insurance', item.value)"
        >
          <img :src="item.icon" class="w-5 h-5 mr-2" />
          <span :class="form.insurance.includes(item.value) ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">
            {{ item.label }}
          </span>
        </div>
      </div>

      <!-- 期望收益率 -->
      <div class="text-sm text-gray-700 mb-2">期望收益率</div>
      <div class="relative mb-8">
        <nut-input
          v-model="form.returnRate"
          type="digit"
          placeholder="请输入期望收益率"
          class="!border !border-gray-200 !rounded-lg !px-3 !py-2 !pr-10"
          :border="false"
        />
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm">%</span>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div class="p-6 pt-2 pb-8 flex justify-between gap-4 border-t border-gray-100 bg-white">
      <div 
        class="flex-1 py-3 text-center border border-blue-600 text-blue-600 rounded-lg text-base"
        @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', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' },
  { label: '子女', value: 'children', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
  { label: '父母', value: 'parents', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' }, // Using same icon as placeholder from design if needed, or check if unique one exists. Design uses same for parents/others in reference code snippet (lines 70, 78) but distinct in variable name logic? Actually design uses specific URLs. I copied from reference.
  { label: '其他', value: 'others', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
];

// Reference code lines 70, 78 use the same URL as 62 (children). I'll use them as is.

const insuranceOptions = [
  { label: '人身保障', value: 'life', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng78cf3ef069859580d9e4f17fc5095d6fbf460f1437ac3deaa43ab0a5a71a775e' },
  { label: '财富传承', value: 'wealth', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
  { label: '子女教育', value: 'education', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
  { label: '养老规划', value: 'pension', icon: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng845af3ba96be197313380a56d1607660c93f44687cb6e966dbf28c9d51142dd9' },
];

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;
}
</style>