<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="caseNumber" label="案件编号"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
        <el-table-column prop="purpose" label="用途"></el-table-column>
        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
        <el-table-column prop="address" 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.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</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 v-if="selectedWorkOrder && selectedWorkOrder.location" class="map-container">
      <h3>井盖设备位置</h3>
      <l-map :zoom="15" :center="selectedWorkOrder.location" style="height: 400px">
        <l-tile-layer :url="tileLayerUrl" />
        <l-marker :lat-lng="selectedWorkOrder.location">
          <l-icon :icon-url="markerIconUrl" :icon-size="[30, 41]" :icon-anchor="[15, 41]" />
        </l-marker>
      </l-map>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// 模拟数据
const workOrders = ref([
  {
    orderNumber: 'W20230915001',
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    purpose: '排水',
    assignedUnit: '水务局',
    address: '上海市浦东新区陆家嘴环路1000号',
    location: [31.2304, 121.4737],
    media: [
      { url: 'https://example.com/image1.jpg' },
      { url: 'https://example.com/image2.jpg' }
    ]
  },
  {
    orderNumber: 'W20230915002',
    caseNumber: 'C20230915002',
    alarmLevel: '一般',
    alarmType: '丢失',
    alarmDescription: '井盖丢失，行人通行不便。',
    purpose: '供水',
    assignedUnit: '市政工程局',
    address: '上海市徐汇区漕溪路180号',
    location: [31.1977, 121.4328],
    media: [
      { url: 'https://example.com/image3.jpg' },
      { url: 'https://example.com/image4.jpg' }
    ]
  }
]);

const selectedWorkOrder = ref(null);
const tileLayerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const markerIconUrl = 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png';

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

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

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

.work-order-list,
.work-order-details {
  margin-bottom: 20px;
}

.map-container {
  margin-top: 20px;
}
</style>
