<template>
  <div id="ZTGL">
    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"></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 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';

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;
    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(() => {
  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, 93, 114, 0.8) 0%, rgba(0, 93, 114, 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>