<template>
  <div class="work-order-management">
    <h2>经办工单管理</h2>
    <el-card>
      <!-- 搜索过滤 -->
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="案件编号">
          <el-input v-model="searchForm.caseNumber" placeholder="请输入案件编号" />
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="searchForm.caseName" placeholder="请输入案件名称" />
        </el-form-item>
        <el-form-item label="案件地址">
          <el-input v-model="searchForm.caseAddress" placeholder="请输入案件地址" />
        </el-form-item>
        <el-form-item label="案件级别">
          <el-select v-model="searchForm.caseLevel" placeholder="请选择案件级别">
            <el-option label="紧急" value="紧急" />
            <el-option label="普通" value="普通" />
          </el-select>
        </el-form-item>
        <el-form-item label="井盖用途">
          <el-select v-model="searchForm.coverPurpose" placeholder="请选择井盖用途">
            <el-option label="排水" value="排水" />
            <el-option label="电力" value="电力" />
          </el-select>
        </el-form-item>
        <el-form-item label="权属单位">
          <el-input v-model="searchForm.assignedUnit" placeholder="请输入权属单位" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchWorkOrders">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 工单列表 -->
      <el-table
          :data="filteredWorkOrders"        style="width: 100%"
          @row-click="showWorkOrderDetail"
      >
        <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-dialog v-model="dialogVisible" title="工单详情" width="50%">
        <el-form :model="currentWorkOrder" label-width="120px">
          <el-form-item label="案件编号">
            <span>{{ currentWorkOrder.caseNumber }}</span>
          </el-form-item>
          <el-form-item label="案件名称">
            <span>{{ currentWorkOrder.caseName }}</span>
          </el-form-item>
          <el-form-item label="案件地址">
            <span>{{ currentWorkOrder.address }}</span>
          </el-form-item>
          <el-form-item label="案件级别">
            <span>{{ currentWorkOrder.alarmLevel }}</span>
          </el-form-item>
          <el-form-item label="报警类型">
            <span>{{ currentWorkOrder.alarmType }}</span>
          </el-form-item>
          <el-form-item label="报警描述">
            <span>{{ currentWorkOrder.alarmDescription }}</span>
          </el-form-item>
          <el-form-item label="用途">
            <span>{{ currentWorkOrder.purpose }}</span>
          </el-form-item>
          <el-form-item label="权属单位">
            <span>{{ currentWorkOrder.assignedUnit }}</span>
          </el-form-item>
          <el-form-item label="办理经过">
            <span>{{ currentWorkOrder.process }}</span>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
                class="upload-demo"
                action=""
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="currentWorkOrder.attachment" :src="currentWorkOrder.attachment" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</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-card>
  </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号',
    caseName: '井盖损坏事件',
    process: '正在处理中...',
    attachment: 'https://example.com/attachment.jpg',
    latitude: 31.2304,
    longitude: 121.4737,
  },
  // 更多模拟数据...
]);

const searchForm = ref({
  caseNumber: '',
  caseName: '',
  caseAddress: '',
  caseLevel: '',
  coverPurpose: '',
  assignedUnit: '',
});

const filteredWorkOrders = ref(workOrders.value);

const dialogVisible = ref(false);
const mapDialogVisible = ref(false);
const currentWorkOrder = ref({});

// 搜索工单
function searchWorkOrders() {
  const { caseNumber, caseName, caseAddress, caseLevel, coverPurpose, assignedUnit } = searchForm.value;
  filteredWorkOrders.value = workOrders.value.filter(order => {
    return (
        (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 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: '井盖位置',
  });
}

// 文件上传相关
const handleAvatarSuccess = res => {
  ElMessage.success('上传成功');
};
const beforeAvatarUpload = file => {
  const isJPG = file.type === 'image/jpeg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};

// 初始化地图
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>
