<template>
  <div class="headerComponent">
    <div class="top-max-box">
      <img class="logo-img" :src="circularLogo"/>
      <p class="title-p">中国矿业大学学校级管控显示系统</p>
      <img class="right-img" src="@/assets/ZDimages/icon_yjdp_jt@1x.png"/>
      <p class="time-p">
        <span>{{timeData1}}</span>
        <span>{{timeData2}}</span>
        <span>{{timeData3}}</span>
      </p>
      <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
    </div>
  </div>
</template>

<script>
  import {} from '../api/http'

  export default {
    name: 'heaDer',
    data () {
      return {
        circularLogo: localStorage.getItem('circularLogo'),
        timer: null,
        timeData1:'',
        timeData2:'',
        timeData3:'',
      }
    },
    mounted() {
      this.updateTime();
      this.timer = setInterval(this.updateTime, 1000)
    },
    methods: {
      updateTime() {
        const now = new Date()
        // 格式化时间 HH:MM:SS
        const hours = now.getHours().toString().padStart(2, '0')
        const minutes = now.getMinutes().toString().padStart(2, '0')
        const seconds = now.getSeconds().toString().padStart(2, '0')
        const timeString = `${hours}:${minutes}:${seconds}`
        // 格式化日期 YYYY年M月D日
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        const dateString = `${year}年${month}月${day}日`
        // 获取星期几
        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        const weekDay = weekDays[now.getDay()]
        // 组合完整字符串
        this.timeData1 = `${timeString}`;
        this.timeData2 = `${dateString}`;
        this.timeData3 = `${weekDay}`;
      },
      //跳转视频/应急页面
      topButtonGoPage(type) {
        if (type == 'video') {
          this.$router.push('/videoSurveillance')
        } else if (type == 'alarm') {
          this.$router.push('/emergencyManagement')
        }
      },
      back() {
        this.$router.push('/home')
        // this.$router.go(-1)
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    }
    ,
    destroyed() {
      //清除定时器
      clearInterval(this.timer);
    }
  }
</script>

<style lang="scss" scoped>
  *{
    margin:0;
    padding:0;
  }
  .headerComponent{
    position: absolute;
    width:1920px;
    top:0;
    left:0;
    z-index: 51;
    .top-max-box{
      display: flex;
      .logo-img{
        width:60px;
        height:60px;
        margin:13px 18px 0 16px;
      }
      .title-p{
        height: 58px;
        font-weight: 700;
        font-size: 40px;
        color: #FFFFFF;
        line-height: 58px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top:14px;
      }
      .right-img{
        width:45px;
        height:33px;
        margin:28px 0 0 8px;
      }
      .time-p{
        margin-left:600px;
        height: 50px;
        font-size: 26px;
        color: #FFFFFF;
        line-height: 50px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        span:nth-child(2){
          margin:0 20px 0 25px;
        }
      }
      .header_r {
        cursor: pointer;
        margin-left: 50px;
        width: 82px;
        height: 32px;
        margin-top: 10px;
      }
    }
  }
</style>
