<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-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button type="danger" link @click="handleRevert(row)">回退</el-button>
          </template>
        </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>

    <!-- 回退弹窗 -->
    <el-dialog title="回退工单" v-model="dialogRevertVisible" width="30%">
      <el-form :model="revertForm">
        <el-form-item label="回退理由" :label-width="formLabelWidth">
          <el-input v-model="revertForm.reason" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogRevertVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmRevert">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

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

// 模拟数据
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' }
    ]
  },
  // 更多模拟数据...
]);

const selectedWorkOrder = ref(null);
const dialogRevertVisible = ref(false);
const revertForm = ref({ reason: '' });
const formLabelWidth = ref('120px');

// 处理表格点击事件
function handleRowClick(row) {
  selectedWorkOrder.value = row;
}

// 回退处理
function handleRevert(row) {
  selectedWorkOrder.value = row;
  dialogRevertVisible.value = true;
}

// 确认回退
function handleConfirmRevert() {
  // 这里可以添加逻辑来处理回退操作
  ElMessage.success('工单已回退');
  dialogRevertVisible.value = false;
}
</script>

<style scoped>
.work-order-management {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
