<template>
  <div>
    <!-- 地图展示 -->
<!--    <el-main>-->
<!--      <div class="map-display">-->
<!--        <h2>地图展示</h2>-->
<!--        <div id="mapContainer" style="height: 400px; width: 100%;"></div>-->
<!--      </div>-->
<!--    </el-main>-->

    <!-- 故障查询 -->
    <el-main>
      <div class="fault-query">
        <h2>故障查询</h2>
        <el-form :model="searchForm" ref="searchFormRef" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="终端编号">
                <el-input v-model="searchForm.deviceId" placeholder="请输入终端编号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="故障状态">
                <el-select v-model="searchForm.status" placeholder="请选择故障状态">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="searchFaults">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table :data="filteredFaults" style="width: 100%" border>
          <el-table-column prop="deviceId" label="终端编号" width="180" />
          <el-table-column prop="problem" label="故障描述" width="300" />
          <el-table-column prop="status" label="故障状态" width="180" />
          <el-table-column prop="lastUpdate" label="最后更新时间" width="180" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="viewFaultDetails(row)">查看详情</el-button>
              <el-button size="small" type="info" @click="dispatchMaintenance(row)">故障处置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>

    <!-- 故障详情 -->
    <el-dialog v-model="dialogVisible" title="故障详情" width="50%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="终端编号">{{ currentFault.deviceId }}</el-descriptions-item>
        <el-descriptions-item label="故障描述">{{ currentFault.problem }}</el-descriptions-item>
        <el-descriptions-item label="故障状态">{{ currentFault.status }}</el-descriptions-item>
        <el-descriptions-item label="最后更新时间">{{ currentFault.lastUpdate }}</el-descriptions-item>
        <el-descriptions-item label="位置信息">{{ currentFault.location }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 故障处置 -->
    <el-dialog v-model="maintenanceDialogVisible" title="故障处置" width="50%">
      <el-form :model="maintenanceForm" ref="maintenanceFormRef" label-width="120px">
        <el-form-item label="处置方式">
          <el-radio-group v-model="maintenanceForm.action">
            <el-radio label="拆卸">拆卸</el-radio>
            <el-radio label="返厂">返厂</el-radio>
            <el-radio label="报废">报废</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处置描述">
          <el-input v-model="maintenanceForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maintenanceDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitMaintenance">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 故障导出 -->
    <el-main>
      <div class="fault-export">
        <h2>故障导出</h2>
        <el-form :model="exportForm" ref="exportFormRef" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="故障类型">
                <el-select v-model="exportForm.faultType" placeholder="请选择故障类型">
                  <el-option v-for="item in faultTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维修类型">
                <el-select v-model="exportForm.maintenanceType" placeholder="请选择维修类型">
                  <el-option v-for="item in maintenanceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维修人员">
                <el-input v-model="exportForm.maintainer" placeholder="请输入维修人员" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="开始日期">
                <el-date-picker v-model="exportForm.startDate" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束日期">
                <el-date-picker v-model="exportForm.endDate" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="exportFaults">导出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 模拟数据
const faults = ref([
  {
    deviceId: 'D20230915001',
    problem: '信号弱',
    status: '24小时内',
    lastUpdate: '2023-09-15',
    location: '上海市浦东新区陆家嘴环路1000号',
    latitude: 31.2304,
    longitude: 121.4737,
  },
  {
    deviceId: 'D20230915002',
    problem: '无法连接',
    status: '48-72小时',
    lastUpdate: '2023-09-16',
    location: '上海市徐汇区漕溪北路1200号',
    latitude: 31.1944,
    longitude: 121.4375,
  },
  // 更多模拟数据...
]);

// 搜索表单
const searchForm = ref({
  deviceId: '',
  status: '',
});

// 故障状态选项
const statusOptions = ref([
  { value: '24小时内', label: '24小时内' },
  { value: '24-48小时', label: '24-48小时' },
  { value: '48-72小时', label: '48-72小时' },
  { value: '正常', label: '正常' },
]);

// 过滤后的故障列表
const filteredFaults = ref(faults.value);

// 当前查看的故障
const currentFault = ref({});

// 故障详情对话框状态
const dialogVisible = ref(false);

// 故障处置对话框状态
const maintenanceDialogVisible = ref(false);

// 故障处置表单
const maintenanceForm = ref({
  action: '',
  description: '',
});

// 故障导出表单
const exportForm = ref({
  faultType: '',
  maintenanceType: '',
  maintainer: '',
  startDate: null,
  endDate: null,
});

// 故障类型选项
const faultTypeOptions = ref([
  { value: '部件', label: '部件' },
]);

// 维修类型选项
const maintenanceTypeOptions = ref([
  { value: '拆卸', label: '拆卸' },
  { value: '返厂', label: '返厂' },
  { value: '报废', label: '报废' },
]);

// 初始化地图
function initMap() {
  // 地图初始化逻辑
}

// 根据状态获取颜色
function getColorByStatus(status) {
  // 返回颜色的逻辑
}

// 导出故障数据
function exportFaultData() {
  // 导出数据的逻辑
}

// 其他功能函数...

</script>
