<template>
  <a-modal v-model:visible="visible" title="工单回访" @cancel="handleCancel" @ok="handleOk"
    :confirm-loading="confirmLoading">
    <a-form :model="formData" ref="formRef" :rules="formRules">
      <!-- 满意度（带 tooltip 提示） -->
      <!-- 满意度 -->
      <a-form-item label="满意度" name="satisfaction" :required="true">
        <a-tooltip title="对服务整体满意程度的评价" placement="right" trigger="hover">
          <span>
            <a-rate v-model:value="formData.satisfaction" allow-half />
          </span>
        </a-tooltip>
      </a-form-item>

      <!-- 服务人员评分 -->
      <a-form-item label="服务人员" name="staffSatisfaction" :required="true">
        <a-tooltip title="对服务人员态度、专业能力等的评价" placement="right" trigger="hover">
          <span>
            <a-rate v-model:value="formData.staffSatisfaction" allow-half />
          </span>
        </a-tooltip>
      </a-form-item>

      <!-- 服务反馈（非必填） -->
      <a-form-item label="服务反馈">
        <a-textarea v-model:value="formData.feedback" placeholder="客观地评价及记录有助于用户决策"
          :auto-size="{ minRows: 3, maxRows: 6 }" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

// 弹框显隐
const visible = ref(false)
// 提交加载状态
const confirmLoading = ref(false)
// 表单引用（用于验证）
const formRef = ref()
// 表单数据
const formData = reactive({
  satisfaction: null,   // 满意度星级
  staffSatisfaction: null, // 服务人员星级
  feedback: ''          // 服务反馈
})

// 表单验证规则
const formRules = {
  satisfaction: [
    { required: true, message: '请选择满意度', trigger: 'change' }
  ],
  staffSatisfaction: [
    { required: true, message: '请选择服务人员满意度', trigger: 'change' }
  ]
}

// 向父组件暴露事件
const emit = defineEmits(['ok', 'cancel'])

// 确定提交
const handleOk = async () => {
  try {
    // 表单验证
    await formRef.value.validate()
    confirmLoading.value = true

    // 模拟接口提交（实际项目替换为真实接口请求）
    setTimeout(() => {
      confirmLoading.value = false
      visible.value = false
      emit('ok', formData) // 向父组件传递表单数据
      message.success('回访提交成功')
    }, 500)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 取消/关闭弹框
const handleCancel = () => {
  visible.value = false
  emit('cancel')
}

// 暴露给父组件的“打开弹框”方法
defineExpose({
  handleOpen: (record) => {
    formRef.value?.resetFields() // 重置表单
    formData.satisfaction = null
    formData.staffSatisfaction = null
    formData.feedback = ''
    visible.value = true
  }
})
</script>