<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>