<!--
  Description: 综合大屏
  Author: 李亚光
  Date: 2024-09-05
 -->
<script lang="ts" setup name="FullScreen">
import controlMap from './components/controlMap.vue'
import eventMap from './components/eventMap.vue'
// 当前展示地图
const active = ref('control')
// 切换地图
const switchMap = (type: 'control' | 'event') => {
  setTimeout(() => {
    active.value = type
    const ele = document.getElementById(type) as HTMLElement
    ele.setAttribute('style', 'font-size: 17px')
    setTimeout(() => {
      ele.setAttribute('style', 'font-size: 16px')
    }, 50)
  }, 100);
}
// 关闭页面
const $router = useRouter()
const closePage = () => {
  $router.back()
}

const width = ref(0)
const height = ref(0)
const set = () => {
  height.value = window.innerHeight - 10
  width.value = window.innerWidth
}
set()
window.addEventListener('resize', () => {
  set()
})
</script>

<template>
  <div class="container-full">
    <!-- banner区域 -->
    <div class="banner">
      <div class="title">
        <div class="logo" />
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close1">
      <div class="icon1" @click="closePage">
        <!-- × -->
      </div>
    </div>
    <!-- 地图切换 -->
    <div class="switch">
      <div id="control" class="control" :class="`${active === 'control' ? 'active' : ''}`"
        @click="switchMap('control')">
        布控地图
      </div>
      <div id="event" class="event" :class="`${active === 'event' ? 'active' : ''}`" @click="switchMap('event')">
        事件地图
      </div>
    </div>
    <!-- 布控地图 -->
    <control-map style="position: relative;z-index: 8;" v-if="active === 'control'" />
    <!-- 事件地图 -->
    <event-map style="position: relative;z-index: 8;" v-if="active === 'event'" />
    <video class="video" :style="{ width: `${width}px`, height: `${height}px` }" autoplay loop muted playsinline>
      <source src="../../../assets/fullscren/border.webm" type="video/webm">
    </video>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

.video {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  object-fit: fill;
  pointer-events: none;
  // width: 100%;
  // height: 100vh;
}

.container-full {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // background-color: #010102;
  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;
  // background: url("@/assets/fullscren/border.webm") no-repeat center center / cover;
  // background-video: url('@/assets/fullscren/bg.png');
  // background-size: cover;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-attachment: fixed;

  .banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    height: 65px;
    width: 100%;
    background: url("@/assets/fullscren/banner-logo.png") no-repeat;
    background-size: cover;

    .title {
      height: 100px;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;

      // .logo {
      //   width: 200px;
      //   height: 100px;
      //   background: url("@/assets/fullscren/br-logo.png") no-repeat;
      // }

      // .name {
      //   // width: 400px;
      //   height: 80px;
      //   width: 100%;
      //   background: url("@/assets/fullscren/br-title.png") no-repeat center;
      //   // background-size: cover;
      // }
    }
  }

  .close1 {
    width: 40px;
    height: 40px;
    z-index: 99;
    position: fixed;
    top: 0px;
    right: 10px;
    // background: rgb(145 144 144 / 60%);

    // border-radius: 50%;
    /* background-color: antiquewhite; */
    // &:hover {
    //   .icon {
    //     display: block;
    //   }
    // }

    .icon1 {
      background: url("@/assets/icons/icon-home1.svg") no-repeat center center / cover;
      display: block;
      width: 36px;
      height: 36px;
      // line-height: 50px;
      text-align: center;
      // font-size: 18px;
      // font-weight: 700;
      color: #ccc;
      // margin: 10px auto;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .switch {
    color: #fff;
    font-weight: 700;
    position: absolute;
    bottom: 2px;
    left: 50%;
    z-index: 98;
    transform: translateX(-50%);
    display: flex;

    .control,
    .event {
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding-left: 5px;
      padding-right: 5px;
      background: url("@/assets/fullscren/data-bg.png") no-repeat center center / cover;
      border: 1px solid #249eff;

      &:hover {
        cursor: pointer;
      }
    }

    .active {
      color: #249eff;
    }
  }
}
</style>