<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"/>
      <div class="top-button-box-1">
        <img src="@/assets/ZDimages/icon_yjdp_spjk@1x.png"/>
        <p @click="topButtonGoPage('video')">视频监控</p>
      </div>
      <div class="top-button-box-2">
        <img src="@/assets/ZDimages/icon_yjdp_znyj@1x.png"/>
        <p @click="topButtonGoPage('alarm')">智能预警</p>
      </div>
      <p class="time-p">
        <span>{{timeData1}}</span>
        <span>{{timeData2}}</span>
        <span>{{timeData3}}</span>
      </p>
      <img class="out-img" @click="openBackManageUrl" src="@/assets/ZDimages/icon_gb@1x.png">
    </div>
    <div class="bottom-max-box">
      <div :class="index == setCheckIndex?'checkP':'noCheckP'"
           @click="checkIndexButton(index)"
           v-for="(item,index) in deptList" :key="index">
        <p >{{item.level == 1 ?'崇慧楼':item.name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import store from '@/store'
  import { removeToken } from '@/utils/auth'
  import { setToken } from '@/utils/auth'
  export default {
    name: 'headerComponent',
    data () {
      return {
        circularLogo: localStorage.getItem('circularLogo'),
        timer: null,
        timeData1:'',
        timeData2:'',
        timeData3:'',
        deptList:[],
        setCheckIndex:0,
        deptTimer:null,

      }
    },
    created(){

    },
    mounted(){
      this.$set(this,'deptList',JSON.parse(localStorage.getItem('deptList')));
      this.$set(this,'setCheckIndex',parseInt(localStorage.getItem('setCheckIndex')));
      this.updateTime();
      this.timer = setInterval(this.updateTime, 1000);
      this.deptTimerFunction();
    },
    methods:{
      deptTimerFunction(){
        let self = this
        clearInterval(this.deptTimer)
        this.deptTimer = setInterval(function() {
          if(self.setCheckIndex == 3){
            self.checkIndexButton(0);
          }else{
            self.checkIndexButton((self.setCheckIndex+1));
          }
        }, 1000 * 180)
      },
      checkIndexButton(index){
        this.$set(this,'setCheckIndex',index);
        localStorage.setItem('setCheckIndex', index);
        if(this.deptList[index].level == 1){
          localStorage.removeItem('deptId');
        }else{
          localStorage.setItem('deptId',this.deptList[index].deptId);
        }
        setToken(this.deptList[index].token);
        this.$parent.checkDept();
      },
      //跳转后台管理
      openBackManageUrl() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeToken()
          if (localStorage.getItem('entranceJumpType') == 'PC') {
            window.location.href = process.env.VUE_APP_OUT_URL
          } else {
            window.location.href = '#/'
          }
        }).catch(() => {
        })
      },
      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')
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
      clearInterval(this.deptTimer);
    }
    ,
    destroyed() {
      //清除定时器
      clearInterval(this.timer);
      clearInterval(this.deptTimer);
    }
  }
</script>
<style scoped lang="scss">
  *{
    margin:0;
    padding:0;
  }
  .headerComponent{
    position: absolute;
    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;
      }
      .top-button-box-1{
        height: 50px;
        display: flex;
        cursor: pointer;
        margin:0 97px 0 159px;
        img{
          width:26px;
          height:20px;
          margin:16px 11px 0 0;
        }
        p{
          height: 50px;
          font-size: 26px;
          color: #00F7FF;
          line-height: 50px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .top-button-box-2{
        height: 50px;
        display: flex;
        cursor: pointer;
        img{
          width:26px;
          height:22px;
          margin:14px 10px 0 0;
        }
        p{
          height: 50px;
          font-size: 26px;
          color: #00F7FF;
          line-height: 50px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .time-p{
        margin-left:63px;
        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;
        }
      }
      .out-img{
        width:30px;
        height:30px;
        margin:11px 0 0 80px;
        cursor: pointer;
      }
    }
    .bottom-max-box{
      margin-left: 800px;
      margin-top: 6px;
      div{
        display: inline-block;
        width:283px;
        height: 52px;
        margin-left:-18px;
        cursor: pointer;
        p{
          margin: 0 auto;
          width: 208px;
          height: 52px;
          font-size: 26px;
          color: #FFFFFF;
          line-height: 52px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
      }
      .checkP{
        background-image: url("../assets/ZDimages/bg_bt_xzhzsj@1x.png");
        background-size: 100% 100%;
        p{
          font-style: normal;
          text-transform: none;
          background: -webkit-linear-gradient(0deg, #FFFFFF, #00F7FF); /* Chrome, Safari */
          background: linear-gradient(0deg, #FFFFFF, #00F7FF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
      }
      .noCheckP{
        background-image: url("../assets/ZDimages/bg_bt_hzsj@1x.png");
        background-size: 100% 100%;
      }
    }
  }
</style>
