<template>
  <div class="headercommon">
    <h3>赤峰停车运营监控中心</h3>
    <div class="header-fullscreen" @click="handleFullScreen"></div>
    <div class="time-wrap">
      <p>{{timedate}}</p>
      <p>{{time}}</p>
    </div>
  </div>
</template>

<script>
import { getNowFormatDate, getNowFormatTime } from '../utils/formatetime'
export default {
  name: 'HelloWorld',
  created() {
  },
  data() {
    return {
      timedate: getNowFormatDate(),
      time: getNowFormatTime(),
      fullscreen: false
    }
  },
  methods:{
    handleFullScreen(){
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  }
}
</script>


<style scoped>
  .headercommon {
    width: 100%;
    height: 77px;
    position: relative;

  }
  .headercommon h3{
    width: 1200px;
    margin: 0 auto;
    line-height: 77px;
    background: url("../assets/img/headerbg.svg") no-repeat center center;
    /*background: #f00;*/
    font-size: 27px;
    text-align: center;
    font-weight:800;
    color:rgba(255,255,255,1);
  }
  .header-fullscreen{
    width: 18px;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 150px;
    top:30px;
    cursor:pointer;
    background: url('../assets/img/righttopbarico_Bg.png');
  }
  .time-wrap{
    position: absolute;
    right: 12px;
    top:20px;
    padding-left: 44px;
    background: url("../assets/img/time-wrap.png") no-repeat 0 center;
    text-align: left;
    font-size:16px;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:18px;
  }
</style>
