<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 class="PerspectiveControl" :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"> -->

    <!-- <div
        class="zzsj flex flex-justcontent-spacebetween"
        v-for="(item, index) in angleviewList"
        :class="activedname == item.name ? 'activedright' : ''"
        @click="categoryclick(item, index)"
      >
        <div class="ImgB">
          <img :src="item.Limg" alt="" v-if="activedname == item.name" />
          <img :src="item.img" alt="" v-else />
        </div>
        <div class="angleview">{{ item.name }}</div>
      </div> -->
    <!-- </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 zhsja from "@/assets/images/zhps/zhsja.png"; //综合
import zhsjl from "@/assets/images/zhps/zhsjl.png"; //综合
import qll from "@/assets/images/zhps/qll.png"; //桥梁
import qln from "@/assets/images/zhps/qln.png"; //桥梁
import sdl from "@/assets/images/zhps/sdl.png"; //隧道
import sda from "@/assets/images/zhps/sda.png"; //隧道

import bus from "@/bus";
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
// const angleviewList = ref([
//   {
//     name: '综合视角',
//     img: zhsja,
//     Limg: zhsjl,
//     lonlat: [109.478, 36.606],
//     zoom: 14,
//     bearing: 0,
//     pitch: 55,
//   },
//   {
//     name: '桥梁视角',
//     img: qln,
//     Limg: qll,
//     lonlat: [109.4716, 36.6064],
//     zoom: 18,
//     bearing: 300,
//     pitch: 45,
//   },
//   {
//     name: '隧道视角',
//     img: sda,
//     Limg: sdl,
//     lonlat: [109.4636, 36.6134],
//     zoom: 18,
//     bearing: 30,
//     pitch: 45,
//   },
// ]);
// const activedname = ref('综合视角');
// // 点击事件
// function categoryclick(val) {
//   console.log(val.name, '1');
//   activedname.value = val.name;
//   if (activedname.value == '综合视角') {
//     console.log('综合视角');
//     newfiberMapbox.map.easeTo({
//       center: val.lonlat,
//       zoom: val.zoom,
//       bearing: val.bearing,
//       pitch: val.pitch,
//     });
//   } else if (activedname.value == '桥梁视角') {
//     console.log('桥梁视角');
//     newfiberMapbox.map.easeTo({
//       center: val.lonlat,
//       zoom: val.zoom,
//       bearing: val.bearing,
//       pitch: val.pitch,
//     });
//   } else {
//     console.log('隧道视角');
//     newfiberMapbox.map.easeTo({
//       center: val.lonlat,
//       zoom: val.zoom,
//       bearing: val.bearing,
//       pitch: val.pitch,
//     });
//   }
// }
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {
  // activedname.value = '综合视角';
  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: '#16f7ff',
        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", ["蓝色地图"]);
  mapBoxVectorLayer.removeByIds(["clickPoint"]);
  bus.emit("closeCesiumPopup");
  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;
  }
  .PerspectiveControl {
    height: 120px;
    width: 105px;
    // background: red;
    position: absolute;
    bottom: 100px;
    left: 480px;
    .zzsj {
      width: 105px;
      height: 36px;
      background: linear-gradient(
        0deg,
        rgba(126, 158, 166, 0.2) 0%,
        rgba(126, 158, 166, 0.8) 100%
      );
      border-radius: 2px;
      text-align: center;
      align-items: center;
      margin-top: 5px;
      cursor: pointer;

      .ImgB {
        width: 20px;
        height: 20px;
        // background: url('@/assets/images/zhps/zhsja.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        margin-left: 8px;
      }

      .angleview {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 15px;
        color: #c7d7db;
        margin-right: 10px;
      }
    }
    .activedright {
      background: linear-gradient(0deg, rgba(16, 173, 211, 0.4) 0%, #10add3 100%);
      border-radius: 2px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #16f7ff;
    }
  }
  .TuChengImgTrue {
    transform: translateX(-460px);
    transition: all 1s ease;
  }
  .TuChengImgFalse {
    transform: translateX(0px);
    transition: all 1s ease;
  }
}
</style>