<template>
  <div class="cover-shielding">
    <el-card class="shielding-settings">
      <h3>设备屏蔽设置</h3>
      <el-form :inline="true" class="shielding-query-form">
        <el-form-item label="道路搜索">
          <el-input v-model="roadSearch" placeholder="请输入道路名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchRoads">搜索道路</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">报警类型屏蔽</el-divider>
      <el-checkbox-group v-model="selectedAlarmTypes">
        <el-checkbox v-for="type in alarmTypes" :label="type" :key="type">{{ type }}</el-checkbox>
      </el-checkbox-group>
      <el-divider content-position="left">井盖设备用途屏蔽</el-divider>
      <el-checkbox-group v-model="selectedPurposeTypes">
        <el-checkbox v-for="purpose in purposeTypes" :label="purpose" :key="purpose">{{ purpose }}</el-checkbox>
      </el-checkbox-group>
      <el-divider content-position="left">屏蔽截止时间</el-divider>
      <el-form-item>
        <el-date-picker
            v-model="endDate"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyShielding">应用屏蔽</el-button>
      </el-form-item>
    </el-card>

    <el-card class="shielded-road-info">
      <h3>已屏蔽道路及区域信息</h3>
      <el-table :data="shieldedRoads" style="width: 100%">
        <el-table-column prop="roadName" label="道路名称"></el-table-column>
        <el-table-column prop="shieldStartTime" label="屏蔽开始时间"></el-table-column>
        <el-table-column prop="shieldEndTime" label="屏蔽结束时间"></el-table-column>
        <el-table-column prop="shieldedAlarms" label="屏蔽报警类型"></el-table-column>
        <el-table-column prop="shieldedPurposes" label="屏蔽井盖用途"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="viewMap(scope.row)">查看地图</el-button>
          </template>
        </el-table-column>
      </el-table>
    </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 roadSearch = ref('');
const selectedAlarmTypes = ref([]);
const selectedPurposeTypes = ref([]);
const endDate = ref(null);
const mapVisible = ref(false);

// 模拟的报警类型和井盖用途
const alarmTypes = ['漏水', '损坏', '丢失'];
const purposeTypes = ['供水', '排水', '电力'];

// 已屏蔽的道路信息
const shieldedRoads = ref([
  {
    roadName: '和平大道',
    shieldStartTime: '2023-09-15 14:30:00',
    shieldEndTime: '2023-09-15 17:30:00',
    shieldedAlarms: '漏水,损坏',
    shieldedPurposes: '供水,排水'
  },
  {
    roadName: '胜利路',
    shieldStartTime: '2023-09-15 15:00:00',
    shieldEndTime: '2023-09-15 18:00:00',
    shieldedAlarms: '丢失',
    shieldedPurposes: '电力'
  }
]);

// 搜索道路
const searchRoads = () => {
  console.log('搜索道路:', roadSearch.value);
  // 实现逻辑：根据输入的道路名称搜索相关道路
};

// 应用屏蔽
const applyShielding = () => {
  console.log('应用屏蔽:', selectedAlarmTypes.value, selectedPurposeTypes.value, endDate.value);
  // 实现逻辑：保存屏蔽设置
  // 示例：添加一条新的屏蔽记录
  shieldedRoads.value.push({
    roadName: '新屏蔽道路',
    shieldStartTime: '2023-09-15 16:00:00',
    shieldEndTime: endDate.value,
    shieldedAlarms: selectedAlarmTypes.value.join(','),
    shieldedPurposes: selectedPurposeTypes.value.join(',')
  });
};

// 查看地图
const viewMap = (row) => {
  console.log('查看地图:', row);
  // 实现逻辑：加载地图并高亮显示相关道路
  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>
.cover-shielding {
  padding: 20px;
}
.shielding-settings {
  margin-bottom: 20px;
}
.shielding-query-form {
  margin-bottom: 10px;
}
.shielded-road-info {
  margin-top: 20px;
}
#mapContainer {
  border: 1px solid #ccc;
}
</style>
