<template>
  <div id="ZTGL">
    <div
      :class="[
        'LeftBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
      ]"
    >
      <LeftBox />
    </div>
    <div
      :class="[
        'RightBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
      ]"
    >
      <RightBox />
    </div>
  </div>
</template>

<script setup name="ZTGL">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
const AllData = reactive({});
import LeftBox from "@/views/oneMap/OverallOverview/LeftBox.vue";
import RightBox from "@/views/oneMap/OverallOverview/RightBox.vue";
import testProjection from "@/assets/testProjection.json";
import testProjectionLabel from "@/assets/testProjectionLabel.json";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
import xtb_img from "@/assets/newImgs/xtb_img.png";
import bus from "@/bus";
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {
  let initeGLTimer = setInterval(() => {
    if (!newfiberMapbox) return;
    if (!newfiberMapbox.map.getLayer("buildingLayer")) return;
    newfiberMapbox.map.easeTo({
      center: [109.478, 36.606],
      zoom: 14,
    });
    const layer = new mapboxL7.LineLayer({
      name: "testProjection",
    })
      .source(testProjection)
      .size(30)
      .shape("wall")
      .style({
        opacity: 0.8,
        sourceColor: "#fe7285",
        targetColor: "rbga(255,255,255, 0)",
      });
    newfiberMapbox.addLayer(layer);
    mapBoxVectorLayer.addGeojsonSymbol("testProjection", testProjectionLabel, xtb_img);
    // setTimeout(() => {
    //   newfiberMapbox.map.moveLayer("buildingLayer", "testProjection");
    // }, 1000);
    // setTimeout(() => {
    //   newfiberMapbox.map.easeTo({
    //     center: [109.488, 36.596],
    //     zoom: 15,
    //   });
    // }, 2000);
    clearInterval(initeGLTimer);
  }, 100);
});
onBeforeUnmount(() => {
  bus.emit("SetLayerShow", ["蓝色地图"]);
  if (newfiberMapbox.getLayerByName("testProjection")) {
    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("testProjection"));
    mapBoxVectorLayer.removeByIds(["testProjection"]);
  }
});
</script>

<style lang="scss" scoped>
#ZTGL {
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    // background: url('@/assets/images/LeftContent.png') no-repeat;
    background: linear-gradient(
      0deg,
      rgba(0, 43, 67, 0.8) 0%,
      rgba(0, 76, 118, 0.8) 100%
    );
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-shadow: inset 0 0 5px 5px #47eef38a;
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    // background: url('@/assets/images/rightContent.png') no-repeat;
    background: linear-gradient(
      0deg,
      rgba(0, 43, 67, 0.8) 0%,
      rgba(0, 76, 118, 0.8) 100%
    );
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-shadow: inset 0 0 5px 5px #47eef38a;
  }
}
</style>