<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatEventScreen.vue
 * @Date: 2022-09-07 09:13:54
 * @Description: 
 * @LastEditTime: 2023-09-01 18:14:08
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { Ref, computed, unref, ref, watch, onMounted, onUnmounted } from "vue";
import Header from "./AttackComponents/Header.vue";
import BlockCom from "./threatComponents/ThreatBlockCom.vue";
import CenterMap from "./threatComponents/ThreatMap.vue";
import CustomTabs from "../../views/screen/components/CustomTabs.vue";
import { useTitle } from "@vueuse/core";
import { screenDateOptions } from "./constants";
import { useGlobalThreatEvent } from "./logic/useGlobalThreatEvent";
import useBackgroundScreen from "./logic/useBackGround";
import { mapMapping } from "../../assets/map/provinceData";
const mapData = mapMapping();
const yaOnlyShowContent = ref(mapData?.showScreenHeader);
const pageHeader = ref("威胁风险态势");
const dateOptions = ref(screenDateOptions);

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

const scaleWidth = ref(1);
const scaleHeight = ref(1);
const resize = () => {
  console.log("resize");
  const headerHeight = yaOnlyShowContent.value ? 80 : 0;
  scaleWidth.value = window.innerWidth / 1920;
  scaleHeight.value = (window.innerHeight + headerHeight) / 1080;
};
resize();
onMounted(() => {
  window.addEventListener("resize", resize);
});
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">
      <!-- <template #dateSwitch>
        <div class="custom-switch-box ya-regular-text ya-border-color ">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeoAAABACAMAAADiQ8Q0AAAAP1BMVEUAAAAtzf8uzv850f8tzv8/2P8vzv801P8uzv8uzv8xz/8zz/8x0f8uzv8vzv8vzf8vzv8vz/8uzv8uzv8uzv9eQsObAAAAFXRSTlMAZmMEXwgkDFtOHREWVjkzLEBTSUVzRr8WAAABsUlEQVR42u3dy5GEMAxFUQlD03wbDPnHOuUJwVq90j0psLDqWoB1Ox1Cbuv2cwh5rNvH/WOQUKrXYr3WwS+DhsePyXrtg/8MGm4fZ+u1jX4bNJw+7NZr+vpj0HD5sFqvqfpSDBJC43NZ2ikPCbHx+fXvbJCwjX5GTvlxM0iYv/5GItmwGiRMhy+FSJZAWbxO1mt1IpmMx78zkSyD28eNSJbBLxLJZiKZjst9tV6FSKZjJZIl0YYqIlkGRLIswpFsN0gIRzJyqIg2VBHJUniJZEmcRLIkopHsNWgI3TxOB5FMRhuqiGQZEMmyiA1VN5FMRrt5JJJlEFvPv4hkMv6HKnYGMyCSZRGNZKdBQ1vPJ5JlQCTLYh1ikazypEXsQ+SofYhkMmYiWRLTQSTLoVSvRLIUHiJZEqEvVa1EMh2nDzuRLIOLSJYEkSyLcCRjk0zENgYjGU9aRDtqiWQZxI7ak0gmI3bUXnx9Tke7jyKSZdCOWn7RkEHoPmonkum43CORjBdrZQQjGV+fkxFa2i6VTTIZwUjGi7UygpGMnUEZ0Ug2EslExF7CuxxCQpEMQgKR7A8TABVvdnJ/kwAAAABJRU5ErkJggg=="
            alt=""
            class="bg-img"
          />
          <div class="custom-switch-con">
            <div
              class="custom-round-tab-item"
              @click="handleClickDate(tab.value)"
              :class="currentDate === tab.value ? 'active' : ''"
              v-for="tab in dateOptions"
              :key="tab.value"
            >
              {{ tab.name }}
            </div>
          </div>
        </div>
      </template> -->
    </Header>
    <div class="custom-screen-content ya-content-bg" :class="yaOnlyShowContent ? 'yaOnlyShowContent-top' : ''">
      <div class="left">
        <div v-if="mapData?.en === 'anhui'">
          <CustomTabs :current="currentDate" :options="dateOptions" @change="handleClickDate"
            style="padding-bottom: 10px"></CustomTabs>
        </div>
        <div class="ya-time" v-else>
          <div class="ya-item" @click="handleClickDate(tab.value)" :class="currentDate === tab.value ? 'active' : ''"
            v-for="tab in dateOptions" :key="tab.value">
            {{ tab.name }}
          </div>
        </div>
        <BlockCom name="威胁风险总览" unit="个" style="display: flex; flex-direction: column; overflow: hidden"
          :style="{ height: mapData?.en === 'anhui' ? '210px' : '190px' }" />
        <BlockCom name="威胁风险事件" style="height: 463px; display: flex; flex-direction: column" unit="个" />
      </div>
      <div class="center">
        <CenterMap />
      </div>
      <div class="right">
        <BlockCom name="最新威胁风险" />
      </div>
    </div>

    <div class="custom-screen-content custom-screen-content-bottom"
      :class="yaOnlyShowContent ? 'yaOnlyShowContent-top' : ''">
      <div class="left">
        <BlockCom name="僵尸/木马事件趋势" :tooltipBg="'rgba(18,46,72,0.8)'" :headerBg="true" />
      </div>
      <div class="right">
        <BlockCom name="蠕虫事件趋势" :headerBg="true" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ya-content-bg {
  background-image: url("./threatComponents/icon_treat_bg.png");
  background-size: 75% 100%;
  background-repeat: no-repeat;
  background-position: 254px;
}

.custom-screen-container {

  // 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 {
    // display: flex;
    // flex-direction: row;
    // height: 100%;
    // width: 100%;
    // // padding: 10px 16px 24px 16px;
    // padding: 0 16px;
    // overflow: hidden;
    // box-sizing: border-box;
    // color: #fff;
    flex: initial;

    .left {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
      box-sizing: border-box;
      width: 410px;
      padding-top: 50px;

      .ya-time {
        // margin-bottom: 10px;
      }
    }

    .center {
      display: flex;
      height: 100%;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      max-width: 1010px;
    }

    .right {
      width: 410px;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      z-index: 10;
      box-sizing: border-box;
    }
  }

  .custom-screen-content-bottom {
    display: flex;
    height: 250px;

    .left,
    .right {
      width: 50%;
      padding-top: 0;
    }

    .left {
      // margin-right: 20px;
    }

    .custom-screen-block {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}

.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%;
    }
  }
}

.mt-20 {
  margin-top: 20px;
}
</style>

<style>
/* body {
  background-image: url("./threatComponents/icon_treat_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
} */
</style>
