<template>
  <el-drawer v-model="visible" title="工单详情" size="50%">
    <div v-if="currentOrder" class="detail-content">
      <el-steps :active="getStepActive(currentOrder.status)" finish-status="success" class="mb-20">
        <el-step title="提交报修" :description="currentOrder.createTime" />
        <el-step title="物业派单" :description="currentOrder.dispatchTime" />
        <el-step title="维修中" />
        <el-step title="已完工" :description="currentOrder.completeTime" />
        <el-step title="评价" />
      </el-steps>

      <el-descriptions title="基础信息" border :column="2" class="mb-20">
        <el-descriptions-item label="工单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="报修类型">{{ getRepairType(currentOrder.type).label }}</el-descriptions-item>
        <el-descriptions-item label="报修人">{{ currentOrder.reporter }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentOrder.phone }}</el-descriptions-item>
        <el-descriptions-item label="报修地点" :span="2">{{ currentOrder.location }}</el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="2">{{ currentOrder.content }}</el-descriptions-item>
      </el-descriptions>

      <div class="mb-20">
        <div class="section-title">现场照片</div>
        <div class="image-list">
           <el-image 
            v-for="url in currentOrder.images" 
            :key="url" 
            :src="url" 
            :preview-src-list="currentOrder.images"
            class="repair-image"
          />
        </div>
      </div>

      <div v-if="currentOrder.worker" class="worker-info mb-20">
        <div class="section-title">维修人员信息</div>
        <div class="worker-card">
          <vab-icon icon="user-settings-line" class="worker-icon" />
          <div class="info">
            <div class="name">{{ currentOrder.worker.name }}</div>
            <div class="role">{{ currentOrder.worker.role }}</div>
          </div>
          <div class="phone">
            <vab-icon icon="phone-line" /> {{ currentOrder.worker.phone }}
          </div>
        </div>
      </div>

      <div v-if="currentOrder.evaluate" class="evaluate-info">
        <div class="section-title">用户评价</div>
        <el-rate v-model="currentOrder.evaluate.score" disabled show-score text-color="#ff9900" />
        <div class="comment mt-10">{{ currentOrder.evaluate.comment }}</div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const currentOrder = ref(null)

const open = (row) => {
  currentOrder.value = row
  visible.value = true
}

const getRepairType = (type) => {
  const map = {
    water_electric: { label: '水电维修', tag: '' },
    furniture: { label: '家具维修', tag: 'info' },
    door_window: { label: '门窗维修', tag: 'warning' },
    ac: { label: '空调维修', tag: 'danger' },
    network: { label: '网络故障', tag: 'success' },
  }
  return map[type] || { label: '其他', tag: 'info' }
}

const getStepActive = (status) => {
  const map = { pending: 1, processing: 2, completed: 5 } // 简化步骤映射
  return map[status] || 0
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.mt-10 { margin-top: 10px; }

.detail-content {
  padding: 20px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 15px;
    border-left: 4px solid var(--el-color-primary);
    padding-left: 10px;
  }

  .image-list {
    display: flex;
    gap: 10px;
    .repair-image {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .worker-card {
    display: flex;
    align-items: center;
    background: #f5f7fa;
    padding: 15px;
    border-radius: 8px;

    .worker-icon {
      font-size: 40px;
      color: #909399;
      margin-right: 15px;
    }

    .info {
      flex: 1;
      .name { font-size: 16px; font-weight: bold; }
      .role { font-size: 12px; color: #909399; }
    }

    .phone {
      font-size: 16px;
      color: var(--el-color-primary);
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }

  .evaluate-info {
    background: #fffbf0;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed #e6a23c;
    
    .comment {
      color: #606266;
      font-style: italic;
    }
  }
}
</style>
