<template>
  <div class="case-verification">
    <el-card class="case-list">
      <h3>待核查案件列表</h3>
      <el-table :data="cases" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
        <el-table-column prop="caseNumber" 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="ownerUnit" label="权属单位"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleAction(scope.row, 'verify')">核查</el-button>
            <el-button type="text" @click="handleAction(scope.row, 'resolve')">结案</el-button>
            <el-button type="text" @click="handleAction(scope.row, 'reassign')">再次派遣</el-button>
            <el-button type="text" @click="handleAction(scope.row, 'export')">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-input v-model="searchInput" placeholder="搜索案件..." clearable @keyup.enter="searchCases"></el-input>
    </el-card>

    <el-card v-if="selectedCase" class="case-details">
      <h3>案件详情</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案件编号">{{ selectedCase.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="报警类型">{{ selectedCase.alarmType }}</el-descriptions-item>
        <el-descriptions-item label="用途">{{ selectedCase.purpose }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ selectedCase.address }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedCase.alarmDescription }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedCase.ownerUnit }}</el-descriptions-item>
        <el-descriptions-item label="多媒体信息">
          <el-image :src="selectedCase.media" fit="contain"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="办理经过">
          <p>{{ selectedCase.process }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="处置信息">
          <p>{{ selectedCase.disposalInfo }}</p>
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" @click="showMap">在地图上定位</el-button>
      <el-button type="success" @click="approveCase">通过</el-button>
      <el-button type="danger" @click="rejectCase">退回</el-button>
    </el-card>

    <!-- 地图查看弹窗 -->
    <el-dialog v-model="mapVisible" title="地图查看" width="60%">
      <div id="mapContainer" style="height: 400px;"></div>
    </el-dialog>
  </div>
</template>

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

// 模拟数据
const cases = ref([
  {
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    purpose: '供水',
    ownerUnit: '水务局',
    address: '和平大道与胜利路交叉口',
    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
    process: '已收到工单，正在处理中...',
    disposalInfo: '已更换新的井盖，安全得到保障。'
  },
  {
    caseNumber: 'C20230915002',
    alarmLevel: '普通',
    alarmType: '丢失',
    alarmDescription: '井盖丢失，行人通行不便。',
    purpose: '排水',
    ownerUnit: '市政工程局',
    address: '胜利路与建设路交叉口',
    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
    process: '已收到工单，正在处理中...',
    disposalInfo: '已重新安装井盖，恢复正常。'
  }
]);

const selectedCase = ref(null);
const mapVisible = ref(false);
const searchInput = ref('');

// 案件列表点击事件
const handleRowClick = (row) => {
  selectedCase.value = row;
};

// 处理操作
const handleAction = (row, action) => {
  switch (action) {
    case 'verify':
      ElMessage.info('核查案件');
      break;
    case 'resolve':
      ElMessage.success('案件已结案');
      break;
    case 'reassign':
      ElMessage.warning('案件已再次派遣');
      break;
    case 'export':
      ElMessage.info('导出案件');
      break;
    default:
      break;
  }
};

// 搜索案件
const searchCases = () => {
  // 实现逻辑：根据输入的案件信息搜索相关案件
  console.log('搜索案件:', searchInput.value);
};

// 显示地图
const showMap = () => {
  mapVisible.value = true;
};

// 通过案件
const approveCase = () => {
  ElMessage.success('案件已通过');
};

// 退回案件
const rejectCase = () => {
  ElMessage.warning('案件已退回');
};

// 初始化地图
onMounted(() => {
  initMap();
});

// 初始化地图
function initMap() {
  // 假设这里有一个地图库，比如百度地图或高德地图
  // 这里只是示例，实际使用时需要引入地图库并配置相应的API Key
  // 下面是示例代码，用于演示如何初始化地图
  const mapContainer = document.getElementById('mapContainer');
  // 假设这里有一个地图对象
  const map = new Map(mapContainer, {
    center: [116.404, 39.915],
    zoom: 15
  });

  // 添加标记点或其他地图元素
  // 这里仅作示例，具体实现取决于使用的地图库
  // const marker = new Marker({
  //   position: [116.404, 39.915],
  //   draggable: true
  // });
  // map.add(marker);
}
</script>

<style scoped>
.case-verification {
  padding: 20px;
}
.case-list {
  margin-bottom: 20px;
}
.case-details {
  margin-top: 20px;
}
#mapContainer {
  border: 1px solid #ccc;
}
</style>
