<template>
  <!-- 看板全屏组件,由于是使用-->
  <div :class="{'full-box':true,'active-full':isFull,'quit-full':!isFull}"  @dblclick="isFullClick">
    <slot name="header">
      <el-row class="header-box">
        <div class="header-left">
          <!-- 标题左边插槽 -->
          <slot name="header-left"></slot>
        </div>
        <div v-if="title !== false">{{title}}</div>
        <div class="header-time">{{nowTime}}</div>
      </el-row>
    </slot>
    <div class="view-main">
      <!-- 默认内容插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
import moment from "moment";
export default {
  name: "ViewingScreen",
  data() {
    return {
      isFull: false, //是否全屏
      record: true, //是否需要记录全屏前的屏幕状态
      cacheFull: false, //保存看板全屏前的浏览器状态
      intervalId: null, //保存计时器地址,用于停止计时器
      keyupEsc: null, //保存全局监听esc地址
      nowTime: null
    };
  },
  props: {
    title: {
      type: String || Boolean,
      default: "看板标题"
    }
  },
  mounted() {
    this.addInterval();
    // this.addKeyupEsc(this);
    // window.addEventListener("keydown", this.keyupEsc);
  },
  destroyed() {
    this.stopInterval();
    // window.removeEventListener("keydown", this.keyupEsc);
  },
  methods: {
    //点击全屏
    isFullClick() {
      if (this.record) {
        this.cacheFull = this.isFullScreen();
        this.record = false;
      }
      this.isFull = !this.isFull;
      if (!this.isFull) this.record = true;
      if (this.isFull && !this.isFullScreen()) screenfull.toggle();
      else if (!this.isFull && this.cacheFull != this.isFullScreen())
        screenfull.toggle();
    },
    //获取当前屏幕状态
    isFullScreen: () =>
      document.isFullScreen ||
      document.mozIsFullScreen ||
      document.webkitIsFullScreen,
    //启动时钟
    addInterval() {
      if (this.intervalId != null) return;
      this.intervalId = setInterval(() => {
        this.nowTime = moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
    // 停止定时器
    stopInterval() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
    //按键触发
    // addKeyupEsc(that) {
    //   this.keyupEsc = function(e) {
    //     console.log("触发了吗", that.isFullScreen());
    //     if (e.keyCode == 27 && that.isFullScreen()) that.isFullClick();
    //   };
    // }
  }
};
</script>

<style lang="scss" scoped>

.full-box {
  background: #030814;
  // overflow-y: auto;
}
.active-full {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.quit-full {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.header-box {
  width: auto;
  margin-bottom: 10px;
  height: 76px;
  display: flex;
  justify-content: space-between;
  background: url("../../assets/image/header_img.png") no-repeat center top;

  & > div {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    width: 100px;
    padding: 10px;
    // background: #f4f4f5;

    &:first-child {
      justify-content: start;
    }
    &:nth-child(2) {
      flex-grow: 1.5;
      justify-content: center;
      font-size: 36px;
      font-weight: bold;
      color: rgba(0, 106, 255, 1);
    }

    &:last-child {
      justify-content: flex-end;
      color: #fff;
      font-size: 22px;
      font-family: DS-Digital-Bold, DS-Digital;
    }
  }
  .header-time {
    font-family: "timefont" !important;
  }
}

.view-main {
  height: calc(100% - 86px);
  width: auto;
  overflow-y: auto;
}
</style>
