<template>
  <div class="vm-switch" @mousemove="onMousemove" @mouseleave="onMouseleave">
    <div class="vm-switch-btn"></div>
    <div class="vm-switch-list" v-show="showMenu">
      <div
        class="vm-switch-item uav"
        :class="{ active: activeIndex === 0 }"
        @click="onClickItem(0)"
      ></div>
    </div>
    <div id="uavPlayerParent" v-show="activeIndex === 0" class="uav-video"></div>
  </div>
</template>

<script>
export default {
  name: "VideoMapSwitch",
  data() {
    return {
      showMenu: false,
      activeIndex: -1,
    };
  },
  beforeDestroy(){
    console.log('uav videoMapSwitch beforeDestroy');
    this.reset();
  },
  methods: {
    onMousemove() {
      this.showMenu = true;
      clearTimeout(this.handler);
    },
    onMouseleave() {
      this.handler = setTimeout(() => {
        this.showMenu = false;
      }, 300);
    },
    onClickItem(i) {
      this.reset();
      if (this.activeIndex === i) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = i;

        let cesiumParentEl = document.querySelector("#layer-container");
        let cesiumEl = document.querySelector(".cesium-viewer");
        cesiumParentEl.removeChild(cesiumEl);

        let parentEl;
        let el;
        switch (i) {
          case 0:
            parentEl = document.querySelector("#uavPlayerParent");
            el = document.querySelector("#uavPlayer");
            uavPlayerWrap.style.display = 'none';
            break;
        }
        parentEl.appendChild(cesiumEl);
        cesiumParentEl.appendChild(el);
      }
    },
    reset() {
      let cesiumEl = document.querySelector(".cesium-viewer");

      // 判断cesium的父元素是否是layer-container来确定当前是否已经切换, 未切换就退出
      if(cesiumEl.parentElement.id === 'layer-container'){
        return;
      }
      let cesiumParentEl = document.querySelector("#layer-container");
      let uavParentEl = document.querySelector("#uavPlayerParent");
      let uavEl = document.querySelector("#uavPlayer");
      let uavPlayerWrap = document.querySelector('#uavPlayerWrap');
      let uavPlayerParent = uavPlayerWrap?.querySelector('.cpt_video');

      cesiumParentEl.innerHTML = "";
      uavParentEl.innerHTML = "";

      cesiumParentEl.append(cesiumEl);
      uavPlayerParent.append(uavEl);

      uavPlayerWrap.style.display = '';
    }, 
  },
};
</script>

<style lang="scss" scoped>
.vm-switch {
  position: fixed;
  left: 73px;
  bottom: 30px;
  display: flex;
  align-items: center;

  .vm-switch-btn {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    background-color: #000;
    border-radius: 50%;
    border: 2px solid #fff;
    background-image: url("./assets/images/btn.png");
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;

    &:hover {
      background-image: url("./assets/images/btn-active.png");
    }
  }

  .vm-switch-list {
    background: #ffffff;
    border-radius: 4px;
    gap: 10px;
    padding: 7px 9px;
    position: relative;
    margin-left: 6px;
    height: fit-content;
    display: flex;

    &::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 50%;
      transform: translate(0, -50%) rotate(-90deg);
      background-color: transparent;
      width: 0;
      height: 0;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-bottom: 6px solid #fff;
    }

    .vm-switch-item {
      width: 34px;
      height: 34px;
      background-color: #000;
      font-size: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 2px;
      cursor: pointer;

      &.active {
        color: #3388ff;
      }

      &.uav {
        background-image: url("./assets/images/uav.png");
        background-size: 24px 24px;

        &.active {
          background-image: url("./assets/images/uav-active.png");
        }
      }
    }
  }

  .uav-video {
    position: absolute;
    bottom: 100px;
    left: 0px;
    width: 388px;
    height: 220px;
  }
}
</style>