<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" :color="['#1352b6','#1352b6']" :dur="1.5"/>
    <!--<dv-decoration-5 class="header-center-decoration" :color="['#1352b6','#1352b6']" :dur="1.5"/>-->
    <dv-decoration-5 class="header-center-decoration" :color="['#1352b6','#1352b6']" :dur="0.01"/>
    <dv-decoration-8 class="header-right-decoration"  :color="['#1352b6','#1352b6']" :dur="1.5" :reverse="true" />

    <div class="center-title">
      <div class="big_title">中海油惠州石化有限公司岗位责任制检查看板</div>
      <div class="samll_title">
        <span>
          {{ formatTime(new Date()) }}
        </span>
        <span>
          {{ formatWeek() }}
        </span>
        <span> {{ time }}s后刷新 </span>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'TopHeader',
  data() {
    return {
      time: 180,
      timeFlag:null
    }
  },
  mounted() {
    //首页动画只运行一次
    const svgElement = document.querySelector('.dv-decoration-5 svg');
    const animateElements = svgElement.querySelectorAll('animate');
    animateElements.forEach(animate => {
      animate.setAttribute('repeatCount', '1');
    });


    this.timeFlag = setInterval(() => {
      this.time-- // 每隔1秒将计数器减少1
      if (this.time === 0) {
        location.reload() // 当计数器达到0时重载页面
      }
    }, 1000)
  },
  destroyed(){
    if(this.timeFlag) {
      clearInterval(this.timeFlag)
    }
  },
  methods: {
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    // 星期
    formatWeek() {
      return moment().locale('zh-cn').format('dddd')
    }
  }
}
</script>

<style lang="scss" scoped>
#top-header {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 45px;
  // cursor: pointer;

  .header-center-decoration {
    width: 50%;
    height: 80px;
    margin-top: 30px;
  }

  .header-left-decoration,
  .header-right-decoration {
    width: 15%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
    color: #000;

    .big_title {
      font-size: 20px;
      text-align: center;
    }

    .samll_title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      font-size: 15px;
      color: #1352b6;
    }
  }
}
</style>
