<!--
  Description: 报警管理-当前报警
  Author: 李亚光
  Date: 2023-06-28
 -->
<script lang="ts" setup name="CurrentAlarm">
import { ElMessage } from 'element-plus'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import MapCom from './components/map.vue'

// 表格数据
const list1 = ref<any[]>([])
const total = ref(0)
// 初始展示列
const columns = ref<any>([
  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
  { text: '报警等级', value: 'alarmRank', align: 'center' },
  { text: '报警原因', value: 'alarmReason', align: 'center' },
  { text: '位置', value: 'position', align: 'center' },
  { text: '设备类型', value: 'deviceType', align: 'center' },
  { text: '设备编号', value: 'deviceNo', align: 'center' },
  { text: '管理单位', value: 'dept', align: 'center' },
  { text: '状态', value: 'status', align: 'center' },
  { text: '报警时间', value: 'alarmTime', align: 'center' },
])
// 最终展示列
const columnsConfig = ref([])
// 修改列
const editColumns = (data: any) => {
  columnsConfig.value = data
}
const loadingTable = ref(true)
//  查询条件
const listQuery = ref({
  limit: 20,
  offset: 1,
})
// 开始结束时间
const datetimerange = ref()
watch(() => datetimerange.value, (newVal) => {
  // listQuery.createTimeStart = ''
  // listQuery.createTimeEnd = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
    }
  }
})
// 查询数据
const fetchData = () => {
  setTimeout(() => {
    loadingTable.value = false
    list1.value = [
      {
        alarmTypeName: '闸井浓度超限',
        alarmRank: '一级',
        alarmReason: '燃气浓度23%vol',
        position: 'N121422南小街中压',
        deviceType: '燃气智能监测终端',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '未读',
        alarmTime: '2024-07-01 12:45:50',
        lat: '39.91081620470105',
        lng: '116.2590451793805',
      },
      {
        alarmTypeName: '闸井浓度超限',
        alarmRank: '二级',
        alarmReason: '燃气浓度23%vol',
        position: 'N121422南小街中压',
        deviceType: '燃气智能监测终端',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '未读',
        alarmTime: '',
        lat: '39.911268',
        lng: '116.343489',
      },
      {
        alarmTypeName: '疑似第三方破坏',
        alarmRank: '一级',
        alarmReason: '桩倾斜报警',
        position: 'N121422南小街中压',
        deviceType: '智能监测桩',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '已确认',
        alarmTime: '',
        lat: '39.943322',
        lng: '116.403976',
      },
      {
        alarmTypeName: '设备故障',
        alarmRank: '三级',
        alarmReason: '传感器异常',
        position: '422南小街中压',
        deviceType: '管线哨兵',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '挂起',
        alarmTime: '',
        lat: '39.901552',
        lng: '116.398043',
      },
      {
        alarmTypeName: '设备故障',
        alarmRank: '三级',
        alarmReason: '传感器异常',
        position: '422南小街中压',
        deviceType: '管线哨兵',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '挂起',
        alarmTime: '',
      },
      {
        alarmTypeName: '设备故障',
        alarmRank: '三级',
        alarmReason: '传感器异常',
        position: '422南小街中压',
        deviceType: '管线哨兵',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '挂起',
        alarmTime: '',
      },
      {
        alarmTypeName: '设备故障',
        alarmRank: '三级',
        alarmReason: '传感器异常',
        position: '422南小街中压',
        deviceType: '管线哨兵',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '挂起',
        alarmTime: '',
      },
      {
        alarmTypeName: '设备故障',
        alarmRank: '三级',
        alarmReason: '传感器异常',
        position: '422南小街中压',
        deviceType: '管线哨兵',
        deviceNo: '342022010027',
        dept: '第一分公司/运维1所/1班',
        status: '挂起',
        alarmTime: '',
      },
    ] as any[]
  }, 1000)
}
// 重置查询条件f
const reset = () => {

}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
  if (val && val.size) {
    listQuery.value.limit = val.size
  }
  if (val && val.page) {
    listQuery.value.offset = val.page
  }
  fetchData()
}

onMounted(() => {
  fetchData()
})
// 表格标识  地图或普通
const tableFlag = ref('normal')
const tableHeight = ref(0)
const switchMode = (type: string) => {
  if (!list1.value.length) {
    ElMessage.warning('暂无数据')
    return
  }
  tableFlag.value = type
  tableHeight.value = document.getElementById('container-table')?.clientHeight as number
}
watch(() => list1.value, () => {
  if (list1.value.length) {
    tableHeight.value = document.getElementById('container-table')?.clientHeight as number
  }
})
window.addEventListener('resize', () => {
  tableHeight.value = document.getElementById('container-table')?.clientHeight as number
})
// 查看报警
const mapRef = ref()
const detail = (row: any) => {
  switchMode('map')
  // 绘制点
  const draw = () => {
    mapRef.value.mapRef.map.setCenter([row.lng, row.lat])
    mapRef.value.mapRef.removeMarker()
    mapRef.value.mapRef.addMarker({
      position: [row.lng, row.lat],
      content: '',
      label: '',
    })
  }
  setTimeout(() => {
    if (!row.lng || !row.lat) {
      ElMessage.warning('该数据缺少坐标信息')
      return
    }
    if (mapRef.value.completeFlag) {
      draw()
    }
    else {
      setTimeout(() => {
        draw()
      }, 1000)
    }
    // console.log(mapRef.value)
    // lat: '39.901552',
    // lng: '116.398043',
  })
}
</script>

<template>
  <!-- 布局 -->
  <app-container>
    <!-- 筛选条件 -->
    <search-area :need-clear="true" @search="fetchData" @clear="reset">
      <search-item>
        <el-select v-model="listQuery.keywords" placeholder="报警类别" clearable class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.keywords" placeholder="报警类型" clearable class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.keywords" placeholder="报警等级" clearable class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.keywords" placeholder="报警状态" clearable class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-input v-model.trim="listQuery.keywords" placeholder="位置" clearable />
      </search-item>
      <search-item>
        <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
      </search-item>
      <search-item>
        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" class="select" style="width: 192px;" />
      </search-item>
      <search-item>
        <el-date-picker
          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="报警开始时间" end-placeholder="报警结束时间"
          clearable
        />
      </search-item>
    </search-area>
    <div style="width: 100%;display: flex;">
      <!-- 表头标题 -->
      <div
        id="container-table" :class="tableFlag === 'normal' ? 'table' : 'table-map'" class="container-table"
        style="width: 100%;"
      >
        <table-container
          :is-config="true" config-title="current-alarm" :columns="columns"
          :config-columns="columnsConfig" :edit="editColumns"
        >
          <template #btns-right>
            <!-- 操作 -->
            <div>
              <el-button type="primary">
                导出
              </el-button>
            </div>
          </template>
          <!-- 查询结果Table显示 -->
          <normal-table
            :data="list1" :total="total" :columns="columnsConfig" :query="listQuery"
            :list-loading="loadingTable" @change="changePage"
          >
            <template #preColumns>
              <el-table-column label="序号" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column label="操作" align="center" width="80">
                <template #default="scope">
                  <el-button type="primary" link size="small" @click="detail(scope.row)">
                    查看
                  </el-button>
                </template>
              </el-table-column>
            </template>
          </normal-table>
          <!-- 打开关闭地图模式 -->
          <div v-if="tableFlag !== 'normal'" class="mapMode" :style="`height: ${tableHeight}px`">
            <!-- 打开 -->
            <div v-if="tableFlag === 'normal'" class="open" @click="switchMode('map')">
              <el-icon :size="30">
                <arrow-left-bold :size="30" />
              </el-icon>
            </div>
            <div v-if="tableFlag === 'map'" class="open" @click="switchMode('normal')">
              <el-icon :size="30">
                <arrow-right-bold :size="30" />
              </el-icon>
            </div>
          </div>
        </table-container>
      </div>
      <!-- 地图 -->
      <div v-if="tableFlag === 'map'" :style="`height: ${tableHeight}px`" class="map">
        <map-com ref="mapRef" :height="tableHeight" />
      </div>
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.table {
  width: 100% !important;
}

.table-map {
  width: 75% !important;
}

.map {
  width: 25% !important;
  // background-color: antiquewhite;
}

.container-table {
  position: relative;

  .mapMode {
    // background-color: aqua;
    width: 1.5%;
    //  height: 100vh;
    position: absolute;
    right: -6px;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);

    &:hover {
      .open,
      .close {
        display: block;
      }
    }

    .open {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: none;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.select {
  width: 100%;
}
</style>

<style>
.select {
  width: 192px !important;
}
</style>