<template>
  <!-- 海绵综合一张图 排水防涝 -->
  <div class="oneMapPSFL">
    <!-- 左侧 -->
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 降雨趋势 -->
      <RainFutureHour></RainFutureHour>

      <!-- 人员排班 -->
      <FloodUser class="mt-5"></FloodUser>

      <!-- 防汛物资 -->
      <FloodWZ class="mt-5"></FloodWZ>
    </div>

    <!-- 中间 -->
    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <FutureRisk></FutureRisk>
    </div>

    <!-- 右侧 -->
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 排水设施统计 -->
      <PsssCount></PsssCount>

      <!-- 降雨报告 -->
      <ReportRain class="mt-5"></ReportRain>
    </div>
  </div>
</template>

<script setup>
import PsssCount from '@/views/sponeScreen/waterFlood/PsssCount.vue'; //排水设施统计
import ReportRain from '@/views/sponeScreen/waterFlood/rainReport.vue'; //降雨报告
import FloodUser from '@/views/sponeScreen/waterFlood/floodUser.vue'; //人员排班
import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资
import FutureRisk from '@/views/sponeScreen/waterFlood/futureRisk.vue'; //积水风险预报
import RainFutureHour from '@/views/sponeScreen/waterFlood/rainFutureHour.vue'; //未来24小时预报
import bus from '@/bus/index';
import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import { rtuWarnRecordRealtimeDetail } from '@/api/floodSys/oneMap';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起

const warnTimer = ref(null);
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);

// 实时报警
function realDataWarn() {
  rtuWarnRecordRealtimeDetail().then(res => {
    console.log('实时告警数据---', res.data);
    let datas = res.data || [];
    if (datas.length > 0) {
      // 渲染报警图层
      let warningFeatures = [];
      datas.forEach(element => {
        let warningFeature = turf.point(element.lonLat.split(',').map(Number), element);
        warningFeature.properties.size = 500;
        warningFeature.properties.stName = '';
        warningFeatures.push(warningFeature);
      });
      let warningGeojson = turf.featureCollection(warningFeatures);
      bus.emit('removeMapDatas', ['warning_monitor']);
      let key = 'warning_monitor';
      bus.emit('getGeojsonByType', {
        type: key,
        callback: geojson => {
          if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: warningGeojson, key: 'warning_monitor' });
          bus.emit('setLayerVisible', { layername: key, isCheck: true });
        },
      });
    } else {
      bus.emit('setLayerVisible', { layername: key, isCheck: false });
    }
  });
}

onMounted(() => {
  setTimeout(() => {
    //河流流向
    let layer = new mapboxL7.LineLayer({
      name: 'waterFlow',
    })
      .source(riverFlow)
      .size(6)
      .shape('line')
      .texture('arrow')
      .color('rgb(62, 255, 253)')
      .animate({
        interval: 1, // 间隔
        duration: 1.5, // 持续时间，延时
        trailLength: 2, // 流线长度
      })
      .style({
        opacity: 0.6,
        lineTexture: true, // 开启线的贴图功能
        iconStep: 200, // 设置贴图纹理的间距
        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
        borderColor: '#fff', // 默认为 #ccc
      });
    newfiberMapbox.addLayer(layer);
    // 默认缩放比、中心点
    newfiberMapbox.map.easeTo({
      center: [114.344, 34.802],
      zoom: 13.6,
      pitch: 30,
    });
    bus.emit('setIniteLayer', [
      { layername: 'YSBZ', show: false }, //雨水泵站
      { layername: 'combineBengZhan', show: false }, //合流泵站
      { layername: 'ysLine1', show: false }, //雨水管网
      { layername: 'hsLine1', show: false }, //合流管网
      { layername: 'pipeline_info_flow', show: false }, //管网流向
      { layername: 'waterCourse', show: false }, //河道水位计
      { layername: 'pipeMonitor', show: false }, //管网监测点
      { layername: 'spongeFacility', show: false }, //海绵设施图层
      { layername: 'origine', show: false }, //典型项目图层
    ]);
  }, 1500);
  // 实时报警
  realDataWarn();
  warnTimer.value = setInterval(() => {
    realDataWarn();
  }, 300000);
});
onBeforeUnmount(() => {
  if (warnTimer.value) clearInterval(warnTimer.value);
  bus.emit('setIniteLayer', [
    { layername: 'YSBZ', show: true }, //雨水泵站
    { layername: 'combineBengZhan', show: true }, //合流泵站
    { layername: 'ysLine1', show: true }, //雨水管网
    { layername: 'hsLine1', show: true }, //合流管网
    { layername: 'pipeline_info_flow', show: true }, //管网流向
    { layername: 'waterCourse', show: true }, //河道水位计
    { layername: 'pipeMonitor', show: true }, //管网监测点
    { layername: 'spongeFacility', show: true }, //海绵设施图层
    { layername: 'origine', show: true }, //典型项目图层
  ]);
  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
  bus.emit('removeMapDatas', ['warning_monitor']);
  if (!newfiberMapbox) return;
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow'));
  if (newfiberMapbox.map.hasImage('materialFeatures')) {
    newfiberMapbox.map.removeImage('materialFeatures');
    newfiberMapBoxVectorLayer.removeByIds(['materialPolygonFeatures']);
    newfiberMapBoxVectorLayer.removeByIds(['materialFeatures']);
  }
});
</script>

<style lang="scss" scoped>
.oneMapPSFL {
  .headHMA {
    background: none;
    background: rgba(0, 59, 109, 0.8);
    border-radius: 8px;
    top: 10px;
    height: auto;
  }
}
</style>