<template>
  <!-- 海绵综合一张图 项目建设 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 建设状态 -->
      <ConstructionStatus></ConstructionStatus>
      <!-- 降雨日历 -->
      <CaldarRain class="mt-5"></CaldarRain>
      <!--  项目展示-->
      <ProjectDisplay @qipaoDateMeth="qipaoDateMeth" class="mt-5"></ProjectDisplay>
    </div>
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!--项目评估  -->
      <ProjectEvaluation></ProjectEvaluation>
    </div>
  </div>

  <!-- 项目详情 -->
  <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao>

  <!-- 管网监测点详情 -->
  <el-dialog v-model="showPipe" title="管网监测详情" width="1000px" append-to-body>
    <PipeDetail v-if="showPipe" :pipeParams="pipeParams" :ifReal="false"></PipeDetail>
  </el-dialog>
</template>
<script setup>
import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
import bus from '@/bus/index';
import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情
import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const visibleqipao = ref(false);
const allDate = ref({});
const showPipe = ref(false);
const pipeParams = ref({});

// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
function qipaoDateMeth(v, isShow) {
  visibleqipao.value = false;
  allDate.value = v;
  setTimeout(() => {
    if (isShow) {
      visibleqipao.value = true;
    }
  }, 10);
}
function closed(v) {
  visibleqipao.value = v;
  newfiberMapbox.map.easeTo({
    center: [114.345, 34.801],
    zoom: 13.8,
    pitch: 30,
  });
}

// 历史某一天报警
function historyDataWarn() {
  rtuWarnConfigList({ startTime: localStorage.getItem('setRainDateKF'), endTime: localStorage.getItem('setRainDateKF') }).then(res => {
    console.log('历史告警数据---', res);
    let datas = res.data || [];
    if (datas.length > 0) {
      // 渲染报警图层
      console.log('datas---', datas);
      let warningFeatures = [];
      datas.forEach(element => {
        let warningFeature = turf.point(element.lonLat.split(',').map(Number), element);
        warningFeature.properties.size = 1000;
        warningFeature.properties.stName = '';
        warningFeatures.push(warningFeature);
      });
      let warningGeojson = turf.featureCollection(warningFeatures);
      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 });
        },
      });
    }
  });
}

onMounted(() => {
  // 管网监测点
  bus.on('pipeMonitorBus', params => {
    pipeParams.value = params;
    showPipe.value = true;
  });

  // 实时报警
  nextTick(() => {
    historyDataWarn();
  });
});
onBeforeUnmount(() => {
  bus.off('pipeMonitorBus');
});
</script>

<style lang="scss" scoped>
.publicContainer {
  position: relative;
}
</style>