<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :model="searchForm" ref="searchFormRef" label-width="120px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="工单编号" prop="orderNumber">
            <el-input v-model="searchForm.orderNumber" placeholder="请输入工单编号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案件编号" prop="caseNumber">
            <el-input v-model="searchForm.caseNumber" placeholder="请输入案件编号" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案件名称" prop="caseName">
            <el-input v-model="searchForm.caseName" placeholder="请输入案件名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案件地址" prop="caseAddress">
            <el-input v-model="searchForm.caseAddress" placeholder="请输入案件地址" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="案件级别" prop="caseLevel">
            <el-select v-model="searchForm.caseLevel" placeholder="请选择案件级别">
              <el-option v-for="item in alarmLevels" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用途" prop="coverPurpose">
            <el-select v-model="searchForm.coverPurpose" placeholder="请选择用途">
              <el-option v-for="item in purposes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="权属单位" prop="assignedUnit">
            <el-input v-model="searchForm.assignedUnit" placeholder="请输入权属单位" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="searchWorkOrders">查询</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 工单列表 -->
    <el-table :data="filteredWorkOrders" style="width: 100%" @row-click="showWorkOrderDetail">
      <el-table-column prop="orderNumber" label="工单编号" width="180" />
      <el-table-column prop="alarmLevel" label="报警级别" width="120" />
      <el-table-column prop="caseNumber" label="案件编号" width="180" />
      <el-table-column prop="alarmType" label="报警类型" width="120" />
      <el-table-column prop="alarmDescription" label="报警描述" />
      <el-table-column prop="purpose" label="用途" width="120" />
      <el-table-column prop="assignedUnit" label="权属单位" width="180" />
      <el-table-column prop="address" label="详细地址" />
    </el-table>

    <!-- 工单详情对话框 -->
    <el-dialog v-model="dialogVisible" title="工单详情" width="50%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案件名称">{{ currentWorkOrder.caseName }}</el-descriptions-item>
        <el-descriptions-item label="工单编号">{{ currentWorkOrder.orderNumber }}</el-descriptions-item>
        <el-descriptions-item label="案件编号">{{ currentWorkOrder.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="案件地址">{{ currentWorkOrder.address }}</el-descriptions-item>
        <el-descriptions-item label="案件级别">{{ currentWorkOrder.alarmLevel }}</el-descriptions-item>
        <el-descriptions-item label="用途">{{ currentWorkOrder.purpose }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ currentWorkOrder.assignedUnit }}</el-descriptions-item>
        <el-descriptions-item label="处理过程">{{ currentWorkOrder.process }}</el-descriptions-item>
        <el-descriptions-item label="附件">
          <el-image :src="currentWorkOrder.attachment" fit="contain" />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="showMap">地 图 定 位</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 地图对话框 -->
    <el-dialog v-model="mapDialogVisible" title="地图定位" width="50%">
      <div id="mapContainer" style="height: 400px;"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="mapDialogVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导出按钮 -->
    <el-button type="primary" @click="exportData" style="margin-top: 16px;">导出数据</el-button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
// import * as XLSX from 'xlsx'; // 导出数据到 Excel

// 模拟数据
const workOrders = ref([
  {
    orderNumber: 'W20230915001',
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    purpose: '排水',
    assignedUnit: '水务局',
    address: '上海市浦东新区陆家嘴环路1000号',
    caseName: '井盖损坏事件',
    process: '正在处理中...',
    attachment: 'https://example.com/attachment.jpg',
    latitude: 31.2304,
    longitude: 121.4737,
  },
  // 更多模拟数据...
]);

// 搜索表单
const searchForm = ref({
  orderNumber: '',
  caseNumber: '',
  caseName: '',
  caseAddress: '',
  caseLevel: '',
  coverPurpose: '',
  assignedUnit: '',
});

// 报警级别选项
const alarmLevels = ref([
  { value: '紧急', label: '紧急' },
  { value: '重要', label: '重要' },
  { value: '一般', label: '一般' },
]);

// 用途选项
const purposes = ref([
  { value: '排水', label: '排水' },
  { value: '供水', label: '供水' },
  { value: '电力', label: '电力' },
]);

// 过滤后的工单列表
const filteredWorkOrders = ref(workOrders.value);

// 对话框状态
const dialogVisible = ref(false);
const mapDialogVisible = ref(false);

// 当前选中的工单
const currentWorkOrder = ref({});

// 搜索工单
function searchWorkOrders() {
  const { orderNumber, caseNumber, caseName, caseAddress, caseLevel, coverPurpose, assignedUnit } = searchForm.value;
  filteredWorkOrders.value = workOrders.value.filter(order => {
    return (
        (orderNumber === '' || order.orderNumber.includes(orderNumber)) &&
        (caseNumber === '' || order.caseNumber.includes(caseNumber)) &&
        (caseName === '' || order.caseName.includes(caseName)) &&
        (caseAddress === '' || order.address.includes(caseAddress)) &&
        (caseLevel === '' || order.alarmLevel === caseLevel) &&
        (coverPurpose === '' || order.purpose === coverPurpose) &&
        (assignedUnit === '' || order.assignedUnit.includes(assignedUnit))
    );
  });
}

// 重置搜索表单
function resetSearchForm() {
  searchForm.value = {
    orderNumber: '',
    caseNumber: '',
    caseName: '',
    caseAddress: '',
    caseLevel: '',
    coverPurpose: '',
    assignedUnit: '',
  };
  filteredWorkOrders.value = workOrders.value;
}

// 展示工单详情
function showWorkOrderDetail(row) {
  currentWorkOrder.value = row;
  dialogVisible.value = true;
}

// 显示地图
function showMap() {
  mapDialogVisible.value = true;
  // 这里可以加载地图并设置坐标
  // 示例：加载高德地图
  loadAMap();
}

// 加载高德地图
function loadAMap() {
  const mapContainer = document.getElementById('mapContainer');
  const map = new AMap.Map(mapContainer, {
    zoom: 13,
    center: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
  });

  // 添加标记
  new AMap.Marker({
    position: [currentWorkOrder.value.longitude, currentWorkOrder.value.latitude],
    map: map,
    title: '井盖位置',
  });
}

// 导出数据到 Excel
// function exportData() {
//   const ws = XLSX.utils.json_to_sheet(filteredWorkOrders.value);
//   const wb = XLSX.utils.book_new();
//   XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
//   XLSX.writeFile(wb, 'closed_work_orders.xlsx');
// }

// 初始化地图
onMounted(() => {
  // 这里可以加载高德地图的 JS 库
  // 示例：加载高德地图 JS 库
  loadAMapLibrary();
});

// 加载高德地图 JS 库
function loadAMapLibrary() {
  if (typeof AMap === 'undefined') {
    const script = document.createElement('script');
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=your_key_here&plugin=AMap.Geocoder,AMap.Marker';
    script.onload = () => {
      // 地图库加载完成
    };
    document.head.appendChild(script);
  }
}
</script>
