<template>
  <div class="work-order-management">
    <el-card class="work-order-list">
      <h3>待办工单列表</h3>
      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
        <el-table-column prop="deviceSerial" label="设备编号"></el-table-column>
        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
        <el-table-column prop="status" label="工单状态"></el-table-column>
        <el-table-column prop="assignedDate" label="指派日期"></el-table-column>
        <el-table-column prop="lastUpdate" label="最后更新时间"></el-table-column>
      </el-table>
    </el-card>

    <el-card v-if="selectedWorkOrder" class="work-order-details">
      <h3>工单详情</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="工单编号">{{ selectedWorkOrder.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ selectedWorkOrder.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
        <el-descriptions-item label="工单状态">{{ selectedWorkOrder.status }}</el-descriptions-item>
        <el-descriptions-item label="报警核实信息">{{ selectedWorkOrder.verificationInfo }}</el-descriptions-item>
        <el-descriptions-item label="指派日期">{{ selectedWorkOrder.assignedDate }}</el-descriptions-item>
        <el-descriptions-item label="最后更新时间">{{ selectedWorkOrder.lastUpdate }}</el-descriptions-item>
        <el-descriptions-item label="工单办理经过">
          <p>{{ selectedWorkOrder.process }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="附件多媒体信息">
          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟数据
const workOrders = ref([
  {
    orderNumber: 'W20230915001',
    deviceSerial: 'D202301001',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    alarmType: '损坏',
    assignedUnit: '水务局',
    status: '待处理',
    verificationInfo: '已核实，情况属实。',
    assignedDate: '2023-09-15',
    lastUpdate: '2023-09-17',
    process: '案件已分配给水务局，正在处理中...',
    media: [
      { url: 'https://example.com/image1.jpg' },
      { url: 'https://example.com/image2.jpg' }
    ]
  },
  {
    orderNumber: 'W20230915002',
    deviceSerial: 'D202301002',
    alarmDescription: '井盖丢失，行人通行不便。',
    alarmType: '丢失',
    assignedUnit: '市政工程局',
    status: '待处理',
    verificationInfo: '已核实，情况属实。',
    assignedDate: '2023-09-15',
    lastUpdate: '2023-09-16',
    process: '案件已分配给市政工程局，正在处理中...',
    media: [
      { url: 'https://example.com/image3.jpg' },
      { url: 'https://example.com/image4.jpg' }
    ]
  }
]);

const selectedWorkOrder = ref(null);

// 工单列表点击事件
const handleRowClick = (row) => {
  selectedWorkOrder.value = row;
};

// 初始化
onMounted(() => {
  // 初始化逻辑
});
</script>

<style scoped>
.work-order-management {
  padding: 20px;
}

.work-order-list,
.work-order-details {
  margin-bottom: 20px;
}
</style>
