<template>
  <a-modal
    :width="780"
    :open="modal.open"
    :title="modal.title"
    :confirm-loading="modal.confirmLoading"
    :after-close="onAfterClose"
    :cancel-text="cancelText"
    :ok-text="okText"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
    >
      <!-- 用 Row + Col 实现两列排版 -->
      <a-row :gutter="24">
        <!-- 服务对象（只读） -->
        <a-col :span="12">
          <a-form-item label="服务对象" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input v-model:value="formData.serviceTarget" disabled />
          </a-form-item>
        </a-col>

        <!-- 服务人员（下拉选择） -->
        <a-col :span="12">
          <a-form-item label="服务人员" name="serviceStaff" required :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-select
              v-model:value="formData.serviceStaff"
              placeholder="请选择服务人员"
              :options="staffOptions"
            />
          </a-form-item>
        </a-col>

        <!-- 服务项目（单选下拉） -->
        <a-col :span="12">
          <a-form-item label="服务项目" name="serviceItems" required :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-select
              v-model:value="formData.serviceItems"
              placeholder="请选择服务项目"
              :options="serviceItemOptions"
            />
          </a-form-item>
        </a-col>

        <!-- 服务费用（普通输入框） -->
        <a-col :span="12">
          <a-form-item label="服务费用" name="serviceFee" required :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-model:value="formData.serviceFee"
              placeholder="请填写服务费用"
              type="number"
            />
          </a-form-item>
        </a-col>

        <!-- 计划日期范围（占满一行） -->
        <a-col :span="12">
          <a-form-item label="计划开始日期" name="planDateRange" required :label-col="{ span:8}" :wrapper-col="{ span: 16 }">
            <a-range-picker
              v-model:value="formData.planDateRange"
              format="YYYY-MM-DD"
              :placeholder="['开始日期', '结束日期']"
            />
          </a-form-item>
        </a-col>

        <!-- 计划开始时间 -->
        <a-col :span="12">
          <a-form-item label="计划开始时间" name="planStartTime" required :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-time-picker
              v-model:value="formData.planStartTime"
              format="HH:mm:ss"
              placeholder="请选择计划开始时间"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>

        <!-- 要求工单时长（分钟） -->
        <a-col :span="12">
          <a-form-item label="要求工单时长" name="requiredDuration" required :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input-number
              v-model:value="formData.requiredDuration"
              :min="0"
              :step="1"
              style="width: 80%"
              placeholder="请填写要求工单时长"
            />
            <span style="margin-left: 8px">分钟</span>
          </a-form-item>
        </a-col>

        <!-- 服务地址（级联选择，占满一行） -->
        <a-col :span="24">
          <a-form-item label="服务地址" name="serviceArea" required :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-cascader
              v-model:value="formData.serviceArea"
              :options="areaOptions"
              change-on-select
              placeholder="请选择服务地址"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>

        <!-- 详细地址（占满一行） -->
        <a-col :span="24">
          <a-form-item label="详细地址" name="detailAddress" required :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-input v-model:value="formData.detailAddress" placeholder="请填写详细地址" />
          </a-form-item>
        </a-col>

        <!-- 地图定位地址（只读+图标，占满一行） -->
        <a-col :span="24">
          <a-form-item label="地图定位地址" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <div style="display: flex; align-items: center;">
              <span style="margin-right: 8px; cursor: pointer;" @click="openMap">📍</span>
              <a-input v-model:value="formData.mapAddress" readonly />
            </div>
          </a-form-item>
        </a-col>

        <!-- 备注（占满一行） -->
        <a-col :span="24">
          <a-form-item label="备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
            <a-textarea
              v-model:value="formData.remark"
              placeholder="请填写备注"
              :auto-size="{ minRows: 2, maxRows: 4 }"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useForm } from '@/hooks'
import { useModal } from '@/hooks'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

// 模拟下拉选项（实际从接口获取）
const staffOptions = [
  { value: '邢光平', label: '邢光平' },
  { value: '张三', label: '张三' },
  { value: '李四', label: '李四' }
]

const serviceItemOptions = [
  { value: '兴趣活动', label: '兴趣活动' },
  { value: '生活照料', label: '生活照料' },
  { value: '康复训练', label: '康复训练' }
]

const areaOptions = [
  {
    value: '江苏省',
    label: '江苏省',
    children: [
      {
        value: '南通市',
        label: '南通市',
        children: [
          {
            value: '通州区',
            label: '通州区',
            children: [
              {
                value: '金新街道',
                label: '金新街道',
                children: [
                  { value: '大石桥村委会', label: '大石桥村委会' }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

// 表单 & 弹窗逻辑
const emit = defineEmits(['ok'])
const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
const { formData, formRef, formRules, resetForm } = useForm()

// 初始化表单数据（与图片展示内容一致）
formData.value = reactive({
  serviceTarget: '袁正芬', // 服务对象（只读）
  serviceStaff: '邢光平', // 服务人员
  serviceItems: '兴趣活动', // 服务项目（单选）
  serviceFee: '40', // 服务费用
  planDateRange: [dayjs('2025-10-17'), dayjs('2025-10-31')], // 计划日期范围
  planStartTime: dayjs('00:03:00', 'HH:mm:ss'), // 计划开始时间
  requiredDuration: 90, // 要求工单时长（分钟）
  serviceArea: ['江苏省', '南通市', '通州区', '金新街道', '大石桥村委会'], // 服务地址（级联）
  detailAddress: '南通市通州区川姜镇大石桥村九组131号', // 详细地址
  mapAddress: '', // 地图定位地址（暂空）
  remark: '' // 备注
})

// 表单验证规则
formRules.value = {
  serviceStaff: [{ required: true, message: '请选择服务人员' }],
  serviceItems: [{ required: true, message: '请选择服务项目' }],
  serviceFee: [
    { required: true, message: '请填写服务费用' },
    { pattern: /^\d+$/, message: '请输入有效数字' }
  ],
  planDateRange: [{ required: true, message: '请选择计划日期范围' }],
  planStartTime: [{ required: true, message: '请选择计划开始时间' }],
  requiredDuration: [{ required: true, message: '请填写要求工单时长' }],
  serviceArea: [{ required: true, message: '请选择服务地址' }],
  detailAddress: [{ required: true, message: '请填写详细地址' }]
}

// 按钮文案
const cancelText = ref('取消')
const okText = ref('保存')

// 打开地图（示例方法，可扩展真实逻辑）
function openMap() {
  message.info('地图定位功能待实现')
}

// 确定保存
async function handleOk() {
  try {
    const values = await formRef.value.validateFields()
    showLoading()

    // 构造提交数据（根据后端需求调整格式，如日期转字符串）
    const payload = {
      ...values,
      planStartDate: values.planDateRange?.[0]?.format('YYYY-MM-DD') || '',
      planEndDate: values.planDateRange?.[1]?.format('YYYY-MM-DD') || '',
      planStartTime: values.planStartTime?.format('HH:mm:ss') || ''
    }

    // 模拟接口请求：await apis.workOrder.save(payload)
    setTimeout(() => {
      hideLoading()
      hideModal()
      emit('ok', payload)
      message.success('保存成功')
    }, 500)
  } catch (error) {
    console.error('表单验证失败:', error)
    hideLoading()
  }
}

// 取消
function handleCancel() {
  hideModal()
}

// 关闭后重置表单
function onAfterClose() {
  resetForm()
}

// 暴露“显示编辑弹窗”方法（若需外部调用）
defineExpose({
  showEditModal(record) {
    // 若为“编辑”场景，需将 record 数据映射到 formData（示例逻辑）
    formData.value = reactive({
      serviceTarget: record?.serviceTarget || '袁正芬',
      serviceStaff: record?.serviceStaff || '邢光平',
      serviceItems: record?.serviceItems || '兴趣活动',
      serviceFee: record?.serviceFee || '40',
      planDateRange: record?.planDateRange
        ? [dayjs(record.planStartDate), dayjs(record.planEndDate)]
        : [dayjs('2025-10-17'), dayjs('2025-10-31')],
      planStartTime: record?.planStartTime
        ? dayjs(record.planStartTime, 'HH:mm:ss')
        : dayjs('00:03:00', 'HH:mm:ss'),
      requiredDuration: record?.requiredDuration || 90,
      serviceArea: record?.serviceArea || ['江苏省', '南通市', '通州区', '金新街道', '大石桥村委会'],
      detailAddress: record?.detailAddress || '南通市通州区川姜镇大石桥村九组131号',
      mapAddress: record?.mapAddress || '',
      remark: record?.remark || ''
    })

    showModal({
      type: 'edit',
      title: '编辑工单'
    })
  }
})
</script>