<template>
  <div class="flex flex-col h-full bg-gray-50">
    <!-- Header -->
    <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>
      <img
        class="w-5 h-5"
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng43284a8c3fc98c60509d6d415fed8113414c4c0b072fa0f3b41fc26e76a03b15"
        @click="close"
      />
    </div>

    <!-- Scrollable Content -->
    <div class="flex-1 overflow-y-auto p-4">
      <div class="bg-white rounded-xl p-5 shadow-sm">
        <!-- 币种 -->
        <div class="flex justify-between items-start mb-5">
          <span class="text-sm text-gray-600 mt-1.5">币种</span>
          <div class="bg-blue-50 rounded-md px-3 py-1.5">
            <span class="text-sm text-blue-600">美元保单</span>
          </div>
        </div>

        <!-- 计划 -->
        <div class="flex justify-between items-start mb-5">
          <span class="text-sm text-gray-600 mt-1.5">计划</span>
          <div class="bg-blue-50 rounded-md px-3 py-1.5">
            <span class="text-sm text-blue-600">基础情景</span>
          </div>
        </div>

        <!-- 附加计划 & 性别 -->
        <div class="flex justify-between items-center mb-5">
           <span class="text-base text-gray-900">附加计划</span>
           <div class="flex items-center">
             <span class="text-sm text-gray-600 mr-4">性别</span>
             <div class="flex items-center">
                <div
                  class="flex items-center mr-4 cursor-pointer"
                  @click="form.gender = 'female'"
                >
                  <img
                    class="w-4.5 h-4.5 mr-1"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng1015590381802ed3f770814c3e05e4b73e6534f72e97a9a0721c459ed1dbac6a"
                  />
                  <span :class="form.gender === 'female' ? 'text-blue-600 font-bold' : 'text-gray-800'" class="text-sm">女</span>
                </div>
                <div
                  class="flex items-center cursor-pointer"
                  @click="form.gender = 'male'"
                >
                  <img
                    class="w-4.5 h-4.5 mr-1"
                    src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngb0bb17420dba3691281e919f69d1e06a69d343e53ee68ad570ec2fe340cdb09c"
                  />
                  <span :class="form.gender === 'male' ? 'text-blue-600 font-bold' : 'text-gray-500'" class="text-sm">男</span>
                </div>
             </div>
           </div>
        </div>

        <!-- 年龄 -->
        <div class="flex justify-between items-center mb-5">
          <span class="text-sm text-gray-600">年龄</span>
          <div class="flex items-center">
             <nut-input
                v-model="form.age"
                type="digit"
                placeholder="请输入"
                class="!p-0 !bg-transparent !w-16 !text-right !text-gray-900 !text-sm"
                :border="false"
                input-align="right"
              />
            <span class="text-sm text-gray-900 mx-1">周岁</span>
            <img
              class="w-4 h-4"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4f1ca24a37fc014649249f2a5db80cdec300bf86076429fb76cc42dff9b59f3d"
            />
          </div>
        </div>

        <!-- 保险期间 -->
        <div class="flex justify-between items-start mb-5">
          <span class="text-sm text-gray-600 mt-1.5">保险期间</span>
          <div class="bg-blue-50 rounded-md px-3 py-1.5">
            <span class="text-sm text-blue-600">终身</span>
          </div>
        </div>

        <!-- 交费期间 -->
        <div class="text-sm text-gray-600 mb-3">交费期间</div>
        <div class="flex flex-wrap gap-3 mb-5">
          <div
            v-for="period in paymentPeriods"
            :key="period"
            class="px-4 py-2 rounded-lg text-sm cursor-pointer transition-colors border"
            :class="form.paymentPeriod === period ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 text-gray-600 border-gray-200'"
            @click="form.paymentPeriod = period"
          >
            {{ period }}
          </div>
        </div>

        <!-- 年交保费 -->
        <div class="text-sm text-gray-600 mb-2">年交保费</div>
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-3 flex justify-between items-center">
           <nut-input
            v-model="form.premium"
            type="digit"
            placeholder="请输入保费"
            class="!p-0 !bg-transparent flex-1 !text-base !text-gray-900"
            :border="false"
          />
          <span class="text-sm text-gray-500 ml-2">美元</span>
        </div>
      </div>
    </div>

    <!-- Footer Buttons -->
    <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>
  </div>
</template>

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

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

const form = reactive({
  currency: '美元保单',
  plan: '基础情景',
  gender: 'female',
  age: '30',
  insurancePeriod: '终身',
  paymentPeriod: '10年交',
  premium: '100000',
});

const paymentPeriods = ['10年交', '3年交', '5年交', '躸交', '2年交'];

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

const submit = () => {
  console.log('SchemeB Submit:', form);
  emit('submit', form);
};
</script>

<style lang="less" scoped>
:deep(.nut-input) {
  padding: 0;
  background: transparent;
}
</style>