<template>
  <!-- 规划引领 阶段三系统治理-->
  <div class="sheHuiNetThree">
    <div class="content">
      <div class="futureGc"></div>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import bus from '@/utils/util';
import Popup from './Popup.vue';

export default {
  name: 'sheHuiNetThree',
  components: {
    Popup,
  },
  setup() {
    const allData = reactive({
      checkedLegend: [
        { isCheck: false, layername: 'rainAndwu' },
        { isCheck: false, layername: 'qingyu' },
        { isCheck: false, layername: 'tuokuan' },
        { isCheck: false, layername: 'layer2' },
        { isCheck: false, layername: 'layer7' },
        { isCheck: false, layername: 'layer13' },
      ],
    });
    // 初始化图例数据
    async function initLayer() {
      for (let i = 0; i < 14; i++) {
        mapbox._map.on('click', 'layer' + i + '_layer', function (e) {
          e.preventDefault();
          const features = mapbox._map.queryRenderedFeatures(e.point);
          // 判断是否点击当前点位
          features.map((item) => {
            if (item.layer.id == 'layer' + i + '_layer') {
              // 拼接显示详情内容
              bus.emit('pointToDetail', item);
            }
          });
        });
        mapbox.changeTypeOfmouse('layer' + i + '_layer'); //切换鼠标样式
      }
      bus.on('pointToDetail', (param) => {
        mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
      });
    }

    onMounted(() => {
      // initLayer();
      //设置初始化视角
      newfiberMap.flyTo({
        lon: 114.264596,
        lat: 30.500028,
        heading: 2.281299097855777,
        zoom: 5358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });
      // mapbox._map.setPitch(60).setBearing(0)
      // setTimeout(() => {
      //   mapbox.flyto([114.265596, 30.640028], 12.5, 0.8)
      // }, 300)
      let closePopup = false;
      bus.emit('closePopup', closePopup);
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit('showDefaultLegend', allData.checkedLegend);
      });
    });
    onBeforeUnmount(() => {
      //清空图例默认开启,true 代表关闭图层
      bus.emit('showDefaultLegend', [
        { isCheck: true, layername: 'rainAndwu' },
        { isCheck: true, layername: 'qingyu' },
        { isCheck: true, layername: 'tuokuan' },
        { isCheck: true, layername: 'layer2' },
        { isCheck: true, layername: 'layer7' },
        { isCheck: true, layername: 'layer13' },
      ]);
      //清除选中图层
      //!!window.timeranhan && clearInterval(window.timeranhan);
      //!!window.timerwater && clearInterval(window.timerwater);
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      //!!window.timerflow && clearInterval(window.timerflow);
      !!window.timerbushui && clearInterval(window.timerbushui);
      //清除弹窗
      bus.off('pointToDetail');
      // if (!!mapbox._popup) {
      //   mapbox._popup.remove();
      // }
      //恢复初始视角
      // mapbox._map.setPitch(60).setBearing(0);
      // setTimeout(() => {
      //   mapbox.flyto([114.275596, 30.610028], 13.5, 0.8);
      // }, 300);
    });
    return {
      ...toRefs(allData),
      initLayer,
    };
  },
};
</script>
<style lang="less">
.sheHuiNetThree {
  .content {
    height: 735px;
    overflow: auto;
    margin: 20px 0px 50px 0px;
    padding-left: 10px;
    .futureGc {
      width: 406px;
      height: 995px;
      background: url('@/assets/newImgs/future.png') no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 60px;
    }
  }
}
</style>