<!--
 * @Date: 2026-02-10 14:06:03
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-10 14:44:03
 * @FilePath: /manulife-weapp/src/components/plan/PlanFields/NameInput.vue
 * @Description: 姓名输入框组件
-->
<template>
  <!-- 姓名输入框 -->
  <div class="mb-5">
    <label v-if="label" class="block mb-[16rpx] text-sm text-gray-600">
      <text v-if="required" class="text-red-500">*</text>
      {{ label }}
    </label>
    <input
      :value="modelValue"
      :placeholder="placeholder"
      type="text"
      class="w-full h-[80rpx] px-[24rpx] text-sm text-[#333] rounded-[12rpx] border border-solid border-gray-200 box-border transition-all duration-300 focus:bg-white focus:border-[#4caf50] focus:outline-none placeholder:text-[#999]"
      :class="{ 'text-[#333]': modelValue }"
      @input="handleInput"
    />
  </div>
</template>

<script setup>
/**
 * 姓名输入框组件
 *
 * @description 计划书表单的姓名输入字段
 *              - 支持双向绑定
 *              - 支持必填标识
 *              - 清晰的视觉反馈
 * @author Claude Code
 * @example
 * <PlanFieldName
 *   v-model="form.customer_name"
 *   label="申请人"
 *   placeholder="请输入申请人"
 *   :required="true"
 * />
 */
const props = defineProps({
  /**
   * 字段值
   * @type {string}
   */
  modelValue: {
    type: String,
    default: ''
  },
  /**
   * 标签文本
   * @type {string}
   */
  label: {
    type: String,
    default: ''
  },
  /**
   * 占位符文本
   * @type {string}
   */
  placeholder: {
    type: String,
    default: '请输入姓名'
  },
  /**
   * 是否必填
   * @type {boolean}
   */
  required: {
    type: Boolean,
    default: false
  }
})

/**
 * 组件事件
 */
const emit = defineEmits([
  /**
   * 更新值事件
   * @event update:modelValue
   * @param {string} value - 输入的值
   */
  'update:modelValue'
])

/**
 * 处理输入事件
 * @param {Event} e - 输入事件对象
 */
const handleInput = (e) => {
  const value = e.detail.value
  emit('update:modelValue', value)
}
</script>