<template>
  <!-- 海绵综合一张图 长效运维 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 巡查任务 -->
      <InspectionTasks></InspectionTasks>
      <!-- 污水厂进口BOD -->
      <SewageBOD></SewageBOD>
      <!-- 监测站点统计 -->
      <MonitoringStation></MonitoringStation>
    </div>

    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 公众建议 -->
      <PublicAdvice></PublicAdvice>
      <!-- 宣传培训 -->
      <PromotionTraining></PromotionTraining>
      <!-- 人工采样 -->
      <ManualSampling></ManualSampling>
    </div>
  </div>
</template>

<script setup>
const showPanel = ref(true); //面板展开收起
import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
import PublicAdvice from '@/views/sponeScreen/longYW/PublicAdvice.vue'; //公众建议
import PromotionTraining from '@/views/sponeScreen/longYW/PromotionTraining.vue'; //宣传培训
import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import track from '@/assets/geojson/kaifeng/track.json';
import car from '@/assets/newImgs/car.png';
import { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {
  newfiberMapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
  let warningPointGeojson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [114.366855, 34.796715],
        },
        properties: { pumpName: '汴京公园管网监测点(离线)' },
      },
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [114.325848, 34.80415],
        },
        properties: { pumpName: '梁苑小学管网监测点(故障)' },
      },
    ],
  };
  let pointLayer2 = new mapboxL7.PointLayer({
    name: 'waringPoint',
  })
    .source(warningPointGeojson, {
      parser: {
        type: 'geojson',
      },
    })
    .shape('circle')
    .active(true)
    .animate(true)
    .size(50)
    .color('#f00');
  let pointLayer3 = new mapboxL7.PointLayer({
    name: 'waringPointLabel',
  })
    .source(warningPointGeojson, {
      parser: {
        type: 'geojson',
      },
    })
    .shape('pumpName', 'text')
    .active(true)
    .animate(true)
    .size(17)
    .color('#f00')
    .style({
      textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
      textOffset: [0, 30], // 文本相对锚点的偏移量 [水平, 垂直]
      spacing: 2, // 字符间距
      stroke: '#ffffff', // 描边颜色
      strokeWidth: 0.3, // 描边宽度
      strokeOpacity: 1.0,
      fontFamily: 'Times New Roman',
      textAllowOverlap: true,
    });
  newfiberMapbox.addLayer(pointLayer2);
  newfiberMapbox.addLayer(pointLayer3);
  newfiberMapbox.map.easeTo({
    center: [114.342, 34.795],
    zoom: 13,
  });
});
onBeforeUnmount(() => {
  newfiberMapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol', 'dynamicRoute_Symbol_1']);
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPoint'));
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waringPointLabel'));
  clearInterval(window.routeTimer);
  clearInterval(window.routeTimer_1);
  window.routeTimer = null;
  window.routeTimer_1 = null;
});
</script>

<style lang="scss" scoped></style>