<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/attackSituationScreen.vue
 * @Date: 2022-09-05 08:54:53
 * @Description: 网络攻击态势
 * @LastEditTime: 2023-09-04 09:55:19
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import Header from "./AttackComponents/Header.vue";
import { useTitle } from "@vueuse/core";
import { screenDateOptions } from "./constants";
import LeftBlock from "./AttackComponents/LeftBlock.vue";
import CenterMap from "./AttackComponents/CenterMap.vue";
import BlockCom from "./AttackComponents/BlockCom.vue";
import useBackgroundScreen from "./logic/useBackGround";
import AttackSourceIpTop5 from "./AttackComponents/attackSourceIpTop5.vue";
import { useGlobalAttackMap } from "./logic/useGlobalAttackMap";
import { mapMapping } from "../../assets/map/provinceData";
const { getProvinceAttack } = useGlobalAttackMap();
const mapData = mapMapping();
const yaOnlyShowContent = ref(mapData?.showScreenHeader);
const pageHeader = ref("实时攻击态势");
const currentDate = ref(1);

useTitle("网络安全态势-互联网骨干直联点监测系统");
setTimeout(() => {
  useBackgroundScreen();
}, 2000);

const scaleWidth = ref(1);
const scaleHeight = ref(1);
const resize = () => {
  const headerHeight = yaOnlyShowContent.value ? 80 : 0;
  scaleWidth.value = window.innerWidth / 1920;
  scaleHeight.value = (window.innerHeight + headerHeight) / 1080;
};
resize();
onMounted(() => {
  window.addEventListener("resize", resize);
  getProvinceAttack();
});
onUnmounted(() => {
  window.removeEventListener("resize", resize);
});
</script>

<template>
  <div class="custom-screen-container" :style="'transform: scale(' + scaleWidth + ', ' + scaleHeight + ')'">
    <canvas id="snow-bg"></canvas>
    <Header v-if="!yaOnlyShowContent" :active="pageHeader"></Header>
    <div class="custom-screen-content">
      <div class="left" :class="yaOnlyShowContent ? 'yaOnlyShowContent-top' : ''">
        <LeftBlock />
      </div>
      <div class="center">
        <CenterMap />
        <BlockCom style="height: 280px" name="今日攻击态势" />
      </div>
      <div class="right">
        <BlockCom name="攻击事件TOP10" unit="个" />
        <AttackSourceIpTop5 class="mt-16" />
        <BlockCom name="今日攻击趋势"></BlockCom>
      </div>
    </div>
  </div>
</template>
<style>
#app {
  overflow: auto;
}
</style>
<style lang="scss" scoped>
.custom-screen-container {

  // display: flex;
  // width: 1920px;
  // height: 1080px;
  // // background: url("../../assets/image/bigScreenBg.png") no-repeat;
  // background-size: 100% 100%;
  // flex-direction: column;
  // // background-color: #00072e;
  // box-sizing: border-box;
  // position: fixed;
  // top: 0;
  // left: 0;
  // overflow: hidden;
  // transform-origin: left top;
  // z-index: 999;
  #snow-bg {
    position: absolute;
    width: 100%;
    height: 99%;
    opacity: 0.1;
  }

  .custom-screen-content {
    .left {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: relative;
      // justify-content: space-between;
      z-index: 10;
      box-sizing: border-box;
      width: 285px;
    }

    .center {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      max-width: 1125px;
    }

    .right {
      width: 409px;
      display: flex;
      // justify-content: space-between;
      flex-direction: column;
      z-index: 10;
      box-sizing: border-box;
    }
  }
}

.custom-switch-box {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  justify-content: center;

  .bg-img {
    width: 245px;
    height: 32px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .custom-switch-con {
    display: flex;
    z-index: 1;
    margin-left: 7px;

    .custom-round-tab-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 73px;
      box-sizing: border-box;
      flex-shrink: 0;
      height: 26px;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      margin-right: -20px;
    }

    .active {
      width: 72px;
      color: #fff;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAAA0CAMAAABW4JFPAAAANlBMVEUWvO0AAABAv/QXvO4Zve4YvO8Yve8ZvO4YvO4YvO4Xvu4evfAcvPEnwPMhvO8YvO0Yvu0YvPORZ18EAAAAEnRSTlNmAARPRzRgW1Y+IRkSDAcpKyq/8jgPAAAA+klEQVRYw83UtxVCAQzF0GdyDvsvS4cqOLjwR5rgVkq1Wq0z3L3SE20y3LaapGOGO1aTtM1wm2qSHhluvWqSThnucKse6Zzh9tfqkS67zLa7VI903We4c/VIt0OGO9WbpJl2k7TAtCmaaUPSTBuSZtqQNNOGpJk2JM20IWmmDUkzbUiaaUPSTBuSZtqQNNP+gfQM0di0KZppQ9JMG5Jm2pA004akmTakv0z7WV+KZtqQNNOGpJn2Z9I9RPPTpmimDUkzbUiaaUPSTBuSZtqQlpz2o34pmmlD0kwbkmbakDTThqSZNiTNtCFppg1JM21ImmlD0kwbkmba7174UA5pbxkkYAAAAABJRU5ErkJggg==) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
