<template>
  <div class="case-processing">
    <el-card class="case-list">
      <h3>作废案件列表</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="searchInput" placeholder="搜索案件..." clearable @keyup.enter="searchCases"></el-input>
        </el-col>
        <el-col :span="16">
          <el-form :inline="true" :model="filterForm" @submit.native.prevent>
            <el-form-item label="案件编号">
              <el-input v-model="filterForm.caseNumber" placeholder="案件编号"></el-input>
            </el-form-item>
            <el-form-item label="案件名称">
              <el-input v-model="filterForm.caseName" placeholder="案件名称"></el-input>
            </el-form-item>
            <el-form-item label="案件地址">
              <el-input v-model="filterForm.address" placeholder="案件地址"></el-input>
            </el-form-item>
            <el-form-item label="案件级别">
              <el-select v-model="filterForm.level" placeholder="请选择案件级别">
                <el-option label="紧急" value="紧急"></el-option>
                <el-option label="普通" value="普通"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用途">
              <el-select v-model="filterForm.purpose" placeholder="请选择用途">
                <el-option label="供水" value="供水"></el-option>
                <el-option label="排水" value="排水"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="权属单位">
              <el-select v-model="filterForm.ownerUnit" placeholder="请选择权属单位">
                <el-option label="水务局" value="水务局"></el-option>
                <el-option label="市政工程局" value="市政工程局"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchCases">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <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, 'view')">查看</el-button>
            <el-button type="text" @click="handleAction(scope.row, 'export')">导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="exportSelectedCases">导出选中案件</el-button>
      <el-button type="primary" @click="exportAllCases">导出所有案件</el-button>
    </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.flow }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="办理经过">
          <p>{{ selectedCase.process }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="结案信息">
          <p>{{ selectedCase.conclusion }}</p>
        </el-descriptions-item>
      </el-descriptions>
      <el-button type="primary" @click="showMap">在地图上定位</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',
    flow: '案件已分配给水务局，正在处理中...',
    process: '已收到工单，正在处理中...',
    conclusion: '案件已结案'
  },
  {
    caseNumber: 'C20230915002',
    alarmLevel: '普通',
    alarmType: '丢失',
    alarmDescription: '井盖丢失，行人通行不便。',
    purpose: '排水',
    ownerUnit: '市政工程局',
    address: '胜利路与建设路交叉口',
    media: 'https://dummyimage.com/600x400/000/fff&text=Media+Image',
    flow: '案件已分配给市政工程局，正在处理中...',
    process: '已收到工单，正在处理中...',
    conclusion: '案件已结案'
  }
]);

const selectedCase = ref(null);
const mapVisible = ref(false);
const searchInput = ref('');
const filterForm = ref({});
const selectedCases = ref([]);

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

// 处理操作
const handleAction = (row, action) => {
  switch (action) {
    case 'view':
      ElMessage.info('查看案件详情');
      break;
    case 'export':
      ElMessage.success('案件已导出');
      break;
    default:
      break;
  }
};

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

// 导出选中案件
const exportSelectedCases = () => {
  if (selectedCases.value.length === 0) {
    ElMessage.warning('请至少选择一个案件进行导出！');
    return;
  }
  ElMessage.success('已导出选中案件');
};

// 导出所有案件
const exportAllCases = () => {
  ElMessage.success('已导出所有案件');
};

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

// 初始化地图
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-processing {
  padding: 20px;
}
.case-list {
  margin-bottom: 20px;
}
.case-details {
  margin-top: 20px;
}
#mapContainer {
  border: 1px solid #ccc;
}
</style>
