<template>
  <a-modal
    :width="920"
    :open="modal.open"
    :title="modal.title"
    :footer="null"
    @cancel="handleCancel"
    wrapClassName="order-detail-modal"
  >
    <!-- 服务轨迹 -->
    <a-descriptions bordered size="small" :column="2" class="mb-6">
      <template #title>
        <a-divider orientation="left" class="!mt-0">服务轨迹</a-divider>
      </template>

      <a-descriptions-item label="签入时间">
        {{ detail.checkInTime }}
      </a-descriptions-item>
      <a-descriptions-item label="签入距离">
        {{ detail.checkInDistance }}
      </a-descriptions-item>

      <a-descriptions-item label="签入地址" :span="2">
        {{ detail.checkInAddress }}
      </a-descriptions-item>

      <a-descriptions-item label="签入图片" :span="2">
        <div class="image-preview-group">
          <a-space>
            <a-image
              v-for="(img, index) in detail.checkInImages"
              :key="'in-' + index"
              :src="img"
              :width="100"
              :height="100"
              :preview-src-list="detail.checkInImages"
              :preview-visible="false"
              class="rounded"
            />
          </a-space>
          <span v-if="!detail.checkInImages?.length" class="text-gray-400">无</span>
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="签出时间">
        {{ detail.checkOutTime }}
      </a-descriptions-item>
      <a-descriptions-item label="签出距离">
        {{ detail.checkOutDistance }}
      </a-descriptions-item>

      <a-descriptions-item label="签出地址" :span="2">
        {{ detail.checkOutAddress }}
      </a-descriptions-item>

      <a-descriptions-item label="签出图片" :span="2">
        <div class="image-preview-group">
          <a-space>
            <a-image
              v-for="(img, index) in detail.checkOutImages"
              :key="'out-' + index"
              :src="img"
              :width="100"
              :height="100"
              :preview-src-list="detail.checkOutImages"
              :preview-visible="false"
              class="rounded"
            />
          </a-space>
          <span v-if="!detail.checkOutImages?.length" class="text-gray-400">无</span>
        </div>
      </a-descriptions-item>

      <a-descriptions-item label="签出备注" :span="2">
        {{ detail.checkOutRemark || '无' }}
      </a-descriptions-item>

      <a-descriptions-item label="实际服务时长" :span="2">
        {{ detail.serviceDuration }}
      </a-descriptions-item>
    </a-descriptions>

    <!-- 用户信息 -->
    <a-descriptions bordered size="small" :column="2" class="mb-6">
      <template #title>
        <a-divider orientation="left">用户信息</a-divider>
      </template>
      <a-descriptions-item label="工单号">{{ detail.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="姓名">{{ detail.userName }}</a-descriptions-item>
      <a-descriptions-item label="性别">{{ detail.gender }}</a-descriptions-item>
      <a-descriptions-item label="年龄">{{ detail.age }} 岁</a-descriptions-item>
      <a-descriptions-item label="联系电话">{{ detail.phone }}</a-descriptions-item>
      <a-descriptions-item label="身份证号">{{ detail.idCard }}</a-descriptions-item>
      <a-descriptions-item label="评估等级" :span="2">
        {{ detail.assessmentLevel || '未填写' }}
      </a-descriptions-item>
    </a-descriptions>

    <!-- 任务信息 -->
    <a-descriptions bordered size="small" :column="2" class="mb-6">
      <template #title>
        <a-divider orientation="left">任务信息</a-divider>
      </template>
      <a-descriptions-item label="护理员">{{ detail.caregiver }}</a-descriptions-item>
      <a-descriptions-item label="护理等级">{{ detail.careLevel || '未填写' }}</a-descriptions-item>
      <a-descriptions-item label="计划服务时间">{{ detail.plannedTime }}</a-descriptions-item>
      <a-descriptions-item label="服务地址" :span="2">
        {{ detail.serviceAddress }}
      </a-descriptions-item>
    </a-descriptions>

    <!-- 服务项目 -->
    <div class="mb-6">
      <a-divider orientation="left">服务项目</a-divider>
      <a-table
        :dataSource="detail.serviceItems"
        :columns="serviceColumns"
        size="small"
        :pagination="false"
        bordered
        class="compact-table"
      />
    </div>

    <!-- 异常工单处理信息 -->
    <a-descriptions bordered size="small" :column="2">
      <template #title>
        <a-divider orientation="left">异常工单处理信息</a-divider>
      </template>
      <a-descriptions-item label="处理状态">{{ detail.exceptionStatus }}</a-descriptions-item>
      <a-descriptions-item label="处理原因">{{ detail.exceptionReason || '无' }}</a-descriptions-item>
      <a-descriptions-item label="处理人">{{ detail.exceptionHandler || '无' }}</a-descriptions-item>
      <a-descriptions-item label="处理时间">{{ detail.exceptionTime || '无' }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script setup>
import { reactive } from 'vue'
import { useModal } from '@/hooks'

const { modal, hideModal } = useModal()

// 模拟数据（实际应由父组件传入）
const detail = reactive({
  checkInTime: '2025-10-15 11:44:01',
  checkInDistance: '14996 m',
  checkInAddress: '江苏省南通市通州区十总镇南通市通州区十总镇五总居8-128西北775米',
  checkInImages: [
    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/6a4ddb23-8733-4ca4-a1f9-b0f061a4ca0a.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=bygou7kYVrQ6f9bDDWlpebs15Nc%3D',
    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/11ce319c-705e-431a-a3a7-4a9bb8350fce.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=cOHYxAxsTP0RQDgT2bNv2jjkWco%3D'
  ],
  checkOutTime: '2025-10-15 12:44:43',
  checkOutDistance: '14984 m',
  checkOutAddress: '江苏省南通市通州区十总镇南通市通州区十总镇五总居8-128西北757米',
  checkOutImages: [
    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/3e7817e4-4d31-41d8-ba89-6532a5baea5d.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=efu9s%2BjgIXdxZPU6sEH5OR0ipdE%3D',
    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/9902435e-fd61-423c-9681-7f11bcab7ee8.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=y204ac9D%2BiI%2BWtNOaOu9UylAezg%3D',
    'https://akt.obs.cn-east-3.myhuaweicloud.com:443/hahacloud/saas/1813150290048446464/157a72f1-c081-4407-ab48-e38e25b38a24.jpg?AccessKeyId=EBJWO1KETPFJKBWNCG5V&Expires=1761122523&Signature=wvjINjdpPlG3QhkuDYIAISc20sY%3D'
  ],
  checkOutRemark: '助洁理发，助餐剥花生',
  serviceDuration: '60 分钟',
  orderNo: '202510151043270345563994',
  userName: '顾美田',
  gender: '男',
  age: '90',
  phone: '18452439097',
  idCard: '320624193507244576',
  assessmentLevel: '',
  caregiver: '于圣霞',
  careLevel: '',
  plannedTime: '2025-10-15 10:42:00',
  serviceAddress: '江苏省南通市通州区十总镇五总社区居委会通州区五总居十七组3号',
  serviceItems: [
    { itemCategoryName: '助乐服务', itemName: '精神关爱', careDuration: '60' }
  ],
  exceptionStatus: '未处理',
  exceptionReason: '',
  exceptionHandler: '',
  exceptionTime: ''
})

const serviceColumns = [
  { title: '服务项目分类', dataIndex: 'itemCategoryName', width: '30%' },
  { title: '服务项目名称', dataIndex: 'itemName', width: '40%' },
  { title: '服务时长(分钟)', dataIndex: 'careDuration', width: '30%' }
]

function handleCancel() {
  hideModal()
}

function handleView() {
  modal.value.open = true
  modal.value.title = '工单详情'
}

defineExpose({
  handleView
})
</script>

<style scoped>
/* 全局调整 modal 内部样式 */
.order-detail-modal :deep(.ant-descriptions-title) {
  padding: 0;
}

.order-detail-modal :deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 600;
}

/* 图片预览区域 */
.image-preview-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 32px;
}

.image-preview-group .ant-image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.image-preview-group .text-gray-400 {
  color: #8c8c8c;
  font-style: italic;
}

/* 表格紧凑 */
.compact-table :deep(.ant-table-tbody > tr > td),
.compact-table :deep(.ant-table-thead > tr > th) {
  padding: 8px 12px;
}

/* 区块间距 */
.mb-6 {
  margin-bottom: 24px;
}

/* 覆盖 divider margin */
.order-detail-modal :deep(.ant-divider-horizontal) {
  margin: 20px 0 16px;
}
</style>