<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 mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
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,
    });

    // 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');
});
</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;
    z-index: 999;
  }
  .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;
    z-index: 999;
  }
  .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>