<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/Header.vue
 * @Date: 2022-09-05 09:12:39
 * @Description: 
 * @LastEditTime: 2023-09-01 18:03:56
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, defineProps, computed, watch, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs/esm'
import AttackHeaderImg from "../../../assets/image/attackScreen/attackHeader.png";
import attackHeaderAnhui from "../../../assets/image/attackScreen/attackHeaderAnhui.png";
import { useRouter } from "vue-router";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const yaOnlyShowContent = ref(mapData?.showScreenHeader);
interface ComProps {
  active: string;
}

const { active = "安全总体态势" } = defineProps<ComProps>();

const tabs = [
  {
    name: "安全总体态势",
    routerPath: "/data-screen/safe-composite-situation",
    routerName: "SafeCompositeSituationScreen",
  },
  {
    name: "实时攻击态势",
    routerPath: "/data-screen/attack-situation",
    routerName: "AttackSituationScreen",
  },
  {
    name: "威胁风险态势",
    routerPath: "/data-screen/threat-event",
    routerName: "ThreatEventScreen",
  },
];

const router = useRouter();

const clickTab = (tab: any) => {
  const { routerPath, routerName } = tab;
  router.push({
    name: routerName,
  });
};

const nowTimer = ref(null) as any;
const nowDate = ref("");

const getTime = () => {
  nowDate.value = dayjs().format("YYYY-MM-DD HH:mm");
};

const getWeek = computed(() => {
  const week = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const weekIndex = dayjs().day();
  return week[weekIndex];
});
onMounted(() => {
  nowTimer.value = setInterval(() => {
    getTime();
  }, 1000);
});

onUnmounted(() => {
  clearInterval(nowTimer.value);
});
</script>

<template>
  <div class="custom-screen-header">
    <img :src="mapData?.en === 'anhui' ? attackHeaderAnhui : AttackHeaderImg" alt="" class="top-img" />
    <div class="left-title">
      <span class="title">网络安全态势</span>
    </div>
    <div class="tabs">
      <div class="tab-item" @click="clickTab(tab)" v-for="(tab, i) in tabs" :key="i"
        :class="tab.name === active && 'is-active'">
        {{ tab.name }}
      </div>
    </div>
    <div class="date-switch-slot">
      <slot name="dateSwitch"></slot>
    </div>
    <div class="time">{{ nowDate }} {{ getWeek }}</div>
  </div>
</template>

<style scoped lang="scss">
.custom-screen-header {
  display: flex;
  position: relative;
  width: 100%;
  padding: 0 24px;
  height: 82px;
  box-sizing: border-box;
  font-family: "Normal";
  margin-bottom: 10px;

  .top-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 82px;
    box-sizing: border-box;
    z-index: 0;
  }

  .left-title {
    height: 28px;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    height: 80px;
    display: flex;
    align-items: center;

    .icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      margin-right: 12px;
    }
  }

  .tabs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 82px;
    display: flex;

    .tab-item {
      cursor: pointer;
      width: 162px;
      padding: 20px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.4);
    }

    .is-active {
      color: #ffffff;
      position: relative;
    }

    .is-active::after {
      content: "";
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      height: 30px;
      background: url(data:image/png;base64,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) no-repeat;
      background-size: 100%;
    }
  }

  .date-switch-slot {
    position: absolute;
    right: 323px;
    top: 30px;
  }

  .time {
    position: absolute;
    right: 100px;
    top: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #53ccfb;
  }
}
</style>
