<!--
  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()
}
</script>

<template>
  <div class="container-full">
    <!-- banner区域 -->
    <div class="banner">
      <div class="title">
        <div class="logo" />
        <!-- <div class="name" /> -->
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close">
      <div class="icon" @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 v-if="active === 'control'" />
    <!-- 事件地图 -->
    <event-map v-if="active === 'event'" />
  </div>
</template>

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

.container-full {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // background-color: #010102;
  background: url("@/assets/fullscren/bg.png") no-repeat center center / cover;

  .banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 98;
    height: 100px;
    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;
      // }
    }
  }

  .close {
    width: 150px;
    height: 70px;
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;

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

    .icon {
      display: none;
      width: 50px;
      height: 50px;
      background: rgb(145 144 144 / 60%);
      border-radius: 50%;
      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: 15px;
    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>