<template>
  <!-- 规划引领 阶段一靶向治理-->
  <div class="sheHuiNetOne">
    <div class="content">
      <div class="finished"></div>
    </div>
  </div>
</template>
<script>


import { toRefs, onMounted, reactive, onBeforeUnmount, nextTick, ref, } from "vue";
import Popup from "./Popup.vue";
import bus from "@/utils/util";

export default {
  name: "sheHuiNetOne",
  components: { Popup },
  setup() {
    // 设置默认选中的图例图层,false 代表打开图层
    const allData = reactive({
      checkedLegend: [
        { isCheck: false, layername: "bushui" },
        { isCheck: false, layername: "rainAndwu" },
        { isCheck: false, layername: "layer0" },
        { isCheck: false, layername: "layer3" },
        { isCheck: false, layername: "layer5" },
        { isCheck: false, layername: "layer8" },
        { isCheck: false, layername: "layer10" },
      ],
    });
    // 初始化图层
    //const pinia = useDataStore();
    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()
      //设置初始化视角
      mapbox._map.setPitch(60).setBearing(0)
      setTimeout(() => {
        mapbox.flyto([114.265596, 30.640028], 12.5, 0.8)
      }, 300)
      // 设置默认选中的图例图层
      setTimeout(() => {
        bus.emit("showDefaultLegend", allData.checkedLegend);
      })

    });
    onBeforeUnmount(() => {
      //清空图例默认开启,true 代表关闭图层
      bus.emit("showDefaultLegend", [
        { isCheck: true, layername: "rainAndwu" },
        { isCheck: true, layername: "bushui" },
        { isCheck: true, layername: "layer0" },
        { isCheck: true, layername: "layer3" },
        { isCheck: true, layername: "layer5" },
        { isCheck: true, layername: "layer8" },
        { isCheck: true, layername: "layer10" },
      ]);
      //清除选中图层
      //!!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()
      }
    });
    return {
      ...toRefs(allData),
      initLayer,
    };
  },
};
</script>
<style lang="less">
.sheHuiNetOne {
  .content {
    height: 735px;
    overflow: auto;
    margin: 20px 0px 50px 0px;
    padding-left: 10px;
    .finished {
      width: 410px;
      height: 1814px;
      background: url("@/assets/newImgs/finished.png") no-repeat center;
      background-size: 100% 100%;
      margin-bottom: 60px;
    }
  }
}
</style>