<template>
  <div class="privew-header-container">
    <div class="header-left">
      <img class="logo-img" :src="getImgUrl('preview/prview-log.png')" alt="">
      <div class="logo-txt">
        安全第一{{ ' ・ ' }}平安是福
      </div>
    </div>
    <div class="header-right">
      <img class="logo-time" :src="getImgUrl('preview/time.png')" alt="">
      <div class="time-container">
        <!-- <div class="led-container">
          <div class="led-time">
            <ledTime />

          </div>
        </div> -->
        <div class="time-content">{{ time }}</div>
        <div class="week-and-date">星期{{ weekVal }}&nbsp;&nbsp;{{ dateVal }}</div>
      </div>
      <img class="logo-msg" :src="getImgUrl('preview/msg.png')" alt="">
      <img class="logo-setting" :src="getImgUrl('preview/setting.png')" alt="">
      <img @click="userClick" class="logo-user" :src="getImgUrl('preview/Vector.png')" alt="">
    </div>

    <!-- 背景图 -->
    <img class="preview-header-background" :src="getImgUrl('preview/top-back.png')" alt="">
  </div>
</template>

<script setup>
import { ref,onMounted,onBeforeUnmount } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import ledTime from './ledTime.vue';
import { getImgUrl } from "@/utils/tools.js"

const route = useRoute();
const router = useRouter();

const timer = ref(null);
const weekVal = ref('');
const dateVal = ref('');
const time = ref('');
const weekList = ['日', '一', '二', '三', '四', '五', '六'];

const getWeek = () => {
  const date = new Date();
  const week = date.getDay();
  weekVal.value = weekList[week];
}
const getDate = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const monthStr = month < 10 ? `0${month}` : month;
  const dayStr = day < 10 ? `0${day}` : day;
  dateVal.value = `${year}-${monthStr}-${dayStr}`;
}
const getTime = () => {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  const hourStr = hour < 10? `0${hour}` : hour;
  const minuteStr = minute < 10? `0${minute}` : minute;
  const secondStr = second < 10? `0${second}` : second;
  time.value = `${hourStr}:${minuteStr}:${secondStr}`;
}
getWeek();
getDate();
timer.value = setInterval(() => {
  getTime();
})
const userClick = () => {
  router.push('/dutyBook/home/workbench')
}
onBeforeUnmount(() => {
  clearInterval(timer.value);
})
</script>

<style lang="scss" scoped>
.privew-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 100%;
  padding-left: 1.1vw;

  .header-left {
    display: flex;
    width: 30%;
    height: 100%;

    .logo-img {
      width: 14.48vw;
      object-fit: contain;
      margin-top: -1vh;
    }

    .logo-txt {
      margin-left: 3.5vw;
      line-height: 5vh;
      color: rgb(5, 161, 5);
      font-weight: bolder;
    }
  }

  .header-right {
    display: flex;
    width: 30%;
    height: 100%;

    .logo-time {
      height: 4.8vh;
    }

    .time-container {
      margin-left: 1vw;
      margin-top: 0.8vh;
      .led-container {
        height: 1.9vh;
        width: 10vw;
        margin-left: -5vw;
        margin-top: 0.5vh;
      }

      .led-time {
        transform: scale(0.05);
      }
    }

    .logo-msg,
    .logo-setting,
    .logo-user {
      height: 2.8vh;
      margin-left: 2.5vw;
      margin-top: 1.4vh;
    }
  }

  .preview-header-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}
</style>
