<template>
    <header class="header-wrap">
        <span>车场实时概况</span>
        <div class="header-fullscreen" @click="toggleFullScreen($event)">全屏</div>
        <div class="header-time">
            <p>{{headerDay}}</p>
            <p>{{headerTime}}</p>
        </div>
    </header>
</template>

<script>
import { formateTime, formateday } from "../utils/formate";

export default {
  name: 'VHeader',
  data() {

    return {
      headerDay: formateday(),
      headerTime: formateTime(),
      isFullscreen:true
    }
  },
    methods:{

        FullScreen(el){
            if(this.isFullscreen){//退出全屏
                if(document.exitFullscreen){
                    document.exitFullscreen()
                }else if( document.mozCancelFullScreen){
                    document.mozCancelFullScreen()
                }else if(document.webkitExitFullscreen){
                    //改变平面图在google浏览器上面的样式问题
                    $("#canvasPaintArea").css("position","static").css("width","100%");
                    $(".buildingsFloor").css("width","70%");
                    $(".floor-plan").css("width","78%");
                    document.webkitExitFullscreen()
                }else if(!document.msRequestFullscreen){
                    document.msExitFullscreen()
                }
            }else{    //进入全屏
                if(el.requestFullscreen){
                    el.requestFullscreen()
                }else if(el.mozRequestFullScreen){
                    el.mozRequestFullScreen()
                }else if(el.webkitRequestFullscreen){
                    //改变平面图在google浏览器上面的样式问题
                    $("#canvasPaintArea").css("position","absolute").css("width","94%");
                    $(".buildingsFloor").css("width","98%");
                    $(".floor-plan").css("width","90%");
                    el.webkitRequestFullscreen();
                }else if(el.msRequestFullscreen){
                    el.msRequestFullscreen()
                }
            }
        },
        toggleFullScreen(e){
            this.isFullscreen=!this.isFullscreen;
            var el=e.srcElement||e.target;//target兼容Firefox
            this.FullScreen(el);
        },

    }
}
</script>

<style scoped lang="scss">
    header {
        height: 65px;
        text-align: center;
        position: relative;
        background-image: url("../images/header/headerbg.png");
        background-repeat: no-repeat;
        background-position: center center;
        >span{
            font-size: 32px;
            line-height: 75px;
        }
        .header-fullscreen{
            width: 60px;
            height: 35px;
            line-height: 35px;
            position: absolute;
            right: 148px;
            top:16px;
            cursor:pointer;
        }
        .header-time{
            width: 128px;
            height: 35px;
            line-height: 18px;
            position: absolute;
            right: 10px;
            top:16px;
            padding-left: 45px;
            text-align: left;
            background:url("../images/header/headertime.png") no-repeat 0 center;
            background-size: 35px 35px;
        }
    }
</style>
