<template>
  <!-- 排水防涝一张图 监测告警 -->
  <div class="tabRightGJ" v-if="tabShowWL == 3">
    <div class="allContent">
      <div class="selectTitle" style="margin-top: 15px">
        <div class="name">实时告警</div>
        <el-select
          v-model="gaojingType"
          class="selectTool"
          size="small"
          style="margin: 10px"
          placeholder="请选择报警类型"
          @change="getRealData"
        >
          <el-option v-for="item in optionsGJ" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- 设备故障表 -->
      <el-table :data="tableDataS" v-loading="tableLoadingS" height="320" highlight-current-row @row-click="clickRealData" ref="myTable">
        <!-- <el-table-column prop="stCode" label="站点编码" width="130" /> -->
        <el-table-column prop="stName" label="站点名称" width="150" />
        <el-table-column prop="monitorTargetType" label="站点类型" v-if="gaojingType == '2'" width="80">
          <template #default="scope">
            <span>
              {{
                scope.row.monitorTargetType == 'river'
                  ? '河道'
                  : scope.row.monitorTargetType == 'lake'
                  ? '湖泊'
                  : scope.row.monitorTargetType == 'pipeline'
                  ? '管网'
                  : scope.row.monitorTargetType == 'channel'
                  ? '港渠'
                  : scope.row.monitorTargetType == 'waterlogging'
                  ? '内涝'
                  : scope.row.monitorTargetType == 'typical_land'
                  ? '典型地块'
                  : scope.row.monitorTargetType == 'drain_outlet'
                  ? '排口'
                  : scope.row.monitorTargetType == 'rainfall'
                  ? '雨量'
                  : '--'
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="faultType" label="故障类型" v-if="gaojingType == '1'">
          <!-- <template #default="scope">
            <span>
              {{
                scope.row.faultType == 'low_battery'
                  ? '低电压'
                  : scope.row.faultType == 'low_signal'
                  ? '低信号'
                  : scope.row.faultType == 'exception'
                  ? '异常值'
                  : scope.row.faultType == 'offline'
                  ? '离线'
                  : '--'
              }}
            </span>
          </template> -->
        </el-table-column>
        <el-table-column prop="fromDatetime" label="开始时间" v-if="gaojingType == '1'" width="160" />
        <el-table-column prop="toDatetime" label="结束时间" v-if="gaojingType == '1'" width="160" />
        <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
        <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
        <!-- <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="100" /> -->
        <el-table-column prop="warnFactorNames" label="告警阈值" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
        <el-table-column prop="warnFactorValueNameStr" label="告警监测值" v-if="gaojingType == '2'" width="150" />
        <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="110" />
      </el-table>
      <div class="selectTitle">
        <div class="name">历史告警信息</div>
        <el-date-picker v-model="dateMonth" size="small" style="width: 120px" type="data" placeholder="选择时间" @change="changeDate" />
      </div>
      <div class="staticPicture">
        <!-- 历史设备故障表 -->
        <el-table :data="tableDataH" v-loading="tableLoadingH" height="280">
          <!-- <el-table-column prop="stCode" label="站点编码" width="100" /> -->
          <el-table-column prop="stName" label="站点名称" width="120" />
          <el-table-column prop="qdCode" label="故障类型" v-if="gaojingType == '1'">
            <template #default="scope">
              <span>
                {{
                  scope.row.faultType == 'low_battery'
                    ? '低电压'
                    : scope.row.faultType == 'low_signal'
                    ? '低信号'
                    : scope.row.faultType == 'exception'
                    ? '异常值'
                    : scope.row.faultType == 'offline'
                    ? '离线'
                    : '--'
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="warnDatetime" label="告警时间" v-if="gaojingType == '2'" width="160" />

          <!-- <el-table-column prop="durationTime" label="停留时长(h)" v-if="gaojingType == '1'" width="100" />
          <el-table-column prop="warnType" label="告警类型" v-if="gaojingType == '2'" width="100" show-overflow-tooltip />
          <el-table-column prop="warnFactorName" label="报警因子" v-if="gaojingType == '2'" width="110" /> -->
          <el-table-column prop="warnFactorValueName" label="告警监测值" v-if="gaojingType == '2'" />
          <el-table-column prop="warnFormulaName" label="超警戒值(m)" v-if="gaojingType == '2'" show-overflow-tooltip />
          <!-- <el-table-column prop="continueMinute" label="持续时长(min)" v-if="gaojingType == '2'" width="120" /> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup name="tabRightGJ">
import { nextTick } from 'vue';
import bus from '@/bus';
import {
  rtuFaultTimeSectionRealtimeList,
  rtuWarnRecordRealtimeList,
  rtuFaultTimeSectionHistoryPage,
  rtuWarnRecordHistoryPage,
} from '@/api/floodSys/oneMap';

const { proxy } = getCurrentInstance();
const tabShowWL = ref(null);
const gaojingType = ref('2');
const optionsGJ = ref([
  { value: '2', label: '指标超标预警' },
  { value: '1', label: '设备故障报警' },
]);
const dateMonth = ref(proxy.moment(new Date()).format('YYYY-MM-DD'));
const tableDataS = ref([]);
const tableLoadingS = ref(true);
const tableDataH = ref([]);
const tableLoadingH = ref(true);
const checkRow = ref({});
const myTable = ref(null);

// 获取实时告警数据
async function getRealData() {
  tableLoadingS.value = true;
  checkRow.value = [];
  if (gaojingType.value == '1') {
    let res = await rtuFaultTimeSectionRealtimeList();
    if (res && res.code == 200) {
      tableDataS.value = res.data;
      let features = [];
      tableDataS.value.forEach(element => {
        element.gaojingType = '1';
        element.size = 250;
        if (!element.lonLat) return;
        let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
        let warningPoint = turf.point(coordinates, element);
        features.push(warningPoint);
      });
      let waringPointJson = turf.featureCollection(features);
      let key = 'warning_monitor';
      bus.emit('removeMapDatas', [key]);
      bus.emit('getGeojsonByType', {
        type: key,
        callback: geojson => {
          if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
          bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
        },
      });
    }
  } else {
    let res = await rtuWarnRecordRealtimeList();
    if (res && res.code == 200) {
      tableDataS.value = res.data;
      let features = [];
      tableDataS.value.forEach(element => {
        element.gaojingType = '2';
        element.size = 250;
        if (!element.lonLat) return;
        let coordinates = [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])];
        let warningPoint = turf.point(coordinates, element);
        features.push(warningPoint);
      });
      let waringPointJson = turf.featureCollection(features);
      let key = 'warning_monitor';
      bus.emit('removeMapDatas', [key]);
      bus.emit('getGeojsonByType', {
        type: key,
        callback: geojson => {
          if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: waringPointJson, key });
          bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
        },
      });
    }
  }
  clickRealData(checkRow.value); //默认加载第一条的历史数据
  tableLoadingS.value = false;
}

// 选择年月
function changeDate(val) {
  dateMonth.value = proxy.moment(val).format('YYYY-MM-DD');
  getHistoryData(checkRow.value); //获取历史数据
}
//地图定位
const mapFlyTo = lonlat => {
  newfiberMapbox.map.easeTo({
    center: [Number(lonlat[0]), Number(lonlat[1])],
    zoom: 15.5,
  });
};
// 实时告警列点击
function clickRealData(row) {
  checkRow.value = row;
  getHistoryData(row); //获取历史数据
  let closeCommonPopup = false;
  bus.emit('closeCommonPopup', closeCommonPopup);
  if (!!!row.lonLat) return;
  let lonlat = row.lonLat.split(',');
  mapFlyTo(lonlat);
}

// 获取历史数据
async function getHistoryData(row) {
  tableLoadingH.value = true;
  if (gaojingType.value == '1') {
    let res = await rtuFaultTimeSectionHistoryPage({ stCode: row.stCode, faultType: row.faultType, day: dateMonth.value });
    if (res && res.code == 200) {
      tableDataH.value = res.data;
    }
  } else {
    let res = await rtuWarnRecordHistoryPage({ stCode: row.stCode, configId: row.configId, day: dateMonth.value });
    if (res && res.code == 200) {
      tableDataH.value = res.data;
    }
  }
  tableLoadingH.value = false;
}
//告警点击事件
const warningPointClick = () => {
  let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
  warningPoint.on('click', e => {
    let popupData = e.feature.properties;
    newfiberMapbox.map.easeTo({
      center: [Number(popupData.lonLat.split(',')[0]) + 0.0045, Number(popupData.lonLat.split(',')[1]) + 0.004],
      zoom: 15,
    });
    bus.emit('popupJCGJData', popupData);
  });
};
onMounted(() => {
  bus.on('changeTableContent', val => {
    if (val == 3) {
      tabShowWL.value = val;
      nextTick(() => {
        newfiberMapbox.map.easeTo({
          center: [113.953, 30.906],
          zoom: 13.6,
          pitch: 55,
        });
        getRealData(); //获取实时列表数据
        warningPointClick();
      });
      bus.emit('initeLayer', []);
    } else {
      tabShowWL.value = null;
      bus.emit('setLayerVisible', { type: 'point', layername: 'warning_monitor', isCheck: false });
    }
  });
  // 刷新列表数据
  bus.on('refreshGJ', val => {
    getRealData();
  });
});
onBeforeUnmount(() => {
  bus.off('changeTableContent');
  bus.off('refreshGJ');
});
</script>
<style lang="scss">
.tabRightGJ {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .allContent {
    height: 750px;
    overflow: auto;

    .staticPicture {
      padding-top: 10px;
    }
  }
}
</style>