<template>
  <a-modal 
    :width="900" 
    :open="modal.open" 
    title="查看工单" 
    :confirm-loading="modal.confirmLoading"
    :after-close="onAfterClose" 
    cancel-text="关闭" 
    ok-text="确认" 
    :ok-button-props="{ disabled: true }"
    @ok="handleOk" 
    @cancel="handleCancel"
  >
    <a-tabs default-active-key="1" :tab-bar-style="{ marginBottom: '16px' }">
      <!-- 工单信息页签 -->
      <a-tab-pane key="1" tab="工单信息">
        <a-form layout="vertical" ref="formRef" :model="formData">
          <!-- 工单信息 -->
          <a-card class="mb-4" title="工单信息">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="工单号" name="workOrderNo">
                  <a-input v-model:value="formData.workOrderNo" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="工单状态" name="status">
                  <a-input v-model:value="formData.status" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="工单类型" name="type">
                  <a-input v-model:value="formData.type" disabled />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <!-- 用户信息 -->
          <a-card class="mb-4" title="用户信息">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="姓名" name="userName">
                  <a-input v-model:value="formData.userName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="性别" name="gender">
                  <a-select v-model:value="formData.gender" disabled>
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="年龄" name="age">
                  <a-input-number v-model:value="formData.age" disabled style="width: 100%" :min="0" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="身份证号" name="idCard">
                  <a-input v-model:value="formData.idCard" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系电话" name="phone">
                  <a-input v-model:value="formData.phone" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="评估等级" name="assessmentLevel">
                  <a-input v-model:value="formData.assessmentLevel" disabled />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <!-- 服务信息 -->
          <a-card class="mb-4" title="服务信息">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="护理员" name="nurseName">
                  <a-input v-model:value="formData.nurseName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="护理等级" name="nurseLevel">
                  <a-input v-model:value="formData.nurseLevel" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="计划开始日期" name="planStartDate">
                  <a-date-picker v-model:value="formData.planStartDate" format="YYYY-MM-DD" disabled style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="计划结束日期" name="planEndDate">
                  <a-date-picker v-model:value="formData.planEndDate" format="YYYY-MM-DD" disabled style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="计划服务开始时间" name="planStartTime">
                  <a-time-picker v-model:value="formData.planStartTime" format="HH:mm" disabled style="width: 100%" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="服务地址" name="serviceAddress">
                  <a-input v-model:value="formData.serviceAddress" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="服务项目">
                  <a-button type="link" @click="showServiceItems" disabled>项目清单</a-button>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="服务内容" name="serviceContent">
                  <a-textarea v-model:value="formData.serviceContent" disabled rows="3" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="下单人" name="orderer">
                  <a-input v-model:value="formData.orderer" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="下单时间" name="orderTime">
                  <a-date-picker v-model:value="formData.orderTime" show-time format="YYYY-MM-DD HH:mm:ss" disabled style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <!-- 服务小结与反馈 -->
          <a-card class="mb-4" title="服务小结与反馈">
            <a-row :gutter="16">
              <a-col :span="24">
                <a-form-item label="服务小结" name="summary">
                  <a-textarea v-model:value="formData.summary" disabled rows="3" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="用户需求反馈" name="feedback">
                  <a-textarea v-model:value="formData.feedback" disabled rows="3" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <!-- 异常处理信息 -->
          <a-card class="mb-4" title="异常工单处理信息">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="处理状态" name="exceptionStatus">
                  <a-input v-model:value="formData.exceptionStatus" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="处理原因" name="exceptionReason">
                  <a-input v-model:value="formData.exceptionReason" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="处理人" name="exceptionHandler">
                  <a-input v-model:value="formData.exceptionHandler" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="处理时间" name="exceptionTime">
                  <a-date-picker v-model:value="formData.exceptionTime" show-time format="YYYY-MM-DD HH:mm:ss" disabled style="width: 100%" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-form>
      </a-tab-pane>

      <!-- 服务评价页签 -->
      <a-tab-pane key="2" tab="服务评价">
        <a-space direction="vertical" style="width: 100%">
          <!-- 回访评价 -->
          <a-card title="回访评价" size="small">
            <a-descriptions :column="{ xs: 1, sm: 2, md: 2 }" bordered>
              <a-descriptions-item label="服务满意度">
                {{ formData.visitSatisfaction || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="服务人员满意度">
                {{ formData.staffSatisfaction || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="服务反馈" :span="2">
                {{ formData.visitFeedback || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="回访人">
                {{ formData.visitor || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="回访时间">
                {{
                  formData.visitTime
                    ? dayjs(formData.visitTime).format('YYYY-MM-DD HH:mm:ss')
                    : '-'
                }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <!-- 服务评价 -->
          <a-card title="服务评价" size="small" style="margin-top: 16px">
            <a-descriptions :column="{ xs: 1, sm: 2, md: 2 }" bordered>
              <a-descriptions-item label="服务满意度">
                {{ formData.serviceSatisfaction || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="评价渠道">
                {{ formData.evaluationChannel || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="评价内容" :span="2">
                {{ formData.evaluationContent || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="评价人">
                {{ formData.evaluator || '-' }}
              </a-descriptions-item>
              <a-descriptions-item label="评价时间">
                {{
                  formData.evaluationTime
                    ? dayjs(formData.evaluationTime).format('YYYY-MM-DD HH:mm:ss')
                    : '-'
                }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-space>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

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

const emit = defineEmits(['ok'])
const { modal, showModal, hideModal } = useModal()
const { formData, formRef, resetForm } = useForm()

// 初始化表单数据（含服务评价字段）
const initFormData = () => ({
  workOrderNo: '',
  status: '',
  type: '',
  userName: '',
  gender: '',
  age: null,
  idCard: '',
  phone: '',
  assessmentLevel: '',
  nurseName: '',
  nurseLevel: '',
  planStartDate: null,
  planEndDate: null,
  planStartTime: null,
  serviceAddress: '',
  serviceContent: '',
  orderer: '',
  orderTime: null,
  summary: '',
  feedback: '',
  exceptionStatus: '',
  exceptionReason: '',
  exceptionHandler: '',
  exceptionTime: null,
  // 服务评价相关字段
  visitSatisfaction: '',
  staffSatisfaction: '',
  visitFeedback: '',
  visitor: '',
  visitTime: null,
  serviceSatisfaction: '',
  evaluationContent: '',
  evaluator: '',
  evaluationTime: null,
  evaluationChannel: '',
})

// 初始化表单
formData.value = initFormData()

// ================== Methods ==================

/**
 * 查看工单（唯一打开弹框的方法）
 * @param {Object} record - 工单数据
 */
function handleView(record = {}) {
  showModal({ mode: 'view', title: '查看工单' })
  loadRecord(record)
}

/**
 * 加载工单数据到表单
 * @param {Object} record - 工单数据
 */
function loadRecord(record) {
  console.log('loadRecord', record)

  formData.value = {
    ...initFormData(),
    workOrderNo: record.workOrderNo || '',
    status: record.status || '',
    type: record.type || '',
    userName: record.userName || '',
    gender: record.gender || '',
    age: record.age || null,
    idCard: record.idCard || '',
    phone: record.phone || '',
    assessmentLevel: record.assessmentLevel || '',
    nurseName: record.nurseName || '',
    nurseLevel: record.nurseLevel || '',
    planStartDate: record.planStartDate ? dayjs(record.planStartDate) : null,
    planEndDate: record.planEndDate ? dayjs(record.planEndDate) : null,
    planStartTime: record.planStartTime ? dayjs(`1970-01-01 ${record.planStartTime}`) : null,
    serviceAddress: record.serviceAddress || '',
    serviceContent: record.serviceContent || '',
    orderer: record.orderer || '',
    orderTime: record.orderTime ? dayjs(record.orderTime) : null,
    summary: record.summary || '',
    feedback: record.feedback || '',
    exceptionStatus: record.exceptionStatus || '',
    exceptionReason: record.exceptionReason || '',
    exceptionHandler: record.exceptionHandler || '',
    exceptionTime: record.exceptionTime ? dayjs(record.exceptionTime) : null,
    // 服务评价字段
    visitSatisfaction: record.visitSatisfaction || '',
    staffSatisfaction: record.staffSatisfaction || '',
    visitFeedback: record.visitFeedback || '',
    visitor: record.visitor || '',
    visitTime: record.visitTime ? dayjs(record.visitTime) : null,
    serviceSatisfaction: record.serviceSatisfaction || '',
    evaluationContent: record.evaluationContent || '',
    evaluator: record.evaluator || '',
    evaluationTime: record.evaluationTime ? dayjs(record.evaluationTime) : null,
    evaluationChannel: record.evaluationChannel || '',
  }
}

/**
 * 确认按钮（禁用状态，仅保留逻辑）
 */
function handleOk() {
  hideModal()
  emit('ok')
}

/**
 * 取消/关闭按钮
 */
function handleCancel() {
  hideModal()
}

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

/**
 * 服务项目清单（查看模式下禁用，保留提示）
 */
function showServiceItems() {
  message.info('服务项目清单')
}

// 仅暴露查看方法
defineExpose({
  handleView,
})
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}

.ant-descriptions-title {
  font-weight: bold;
  margin-bottom: 12px;
}

.ant-descriptions-view table {
  width: 100%;
  table-layout: fixed;
}

.ant-descriptions-item-label {
  display: inline-block;
  min-width: 100px;
  font-weight: normal;
}

.ant-descriptions-item-content {
  display: inline-block;
  padding-left: 8px;
}
</style>