<template>
  <span :title="isFullscreen ? '退出全屏' : '进入全屏'" class="full-screen">
    <i
      class="header-btn-icon"
      :class="
        isFullscreen ? 'icon-nav-fullscreen-cancel' : 'icon-nav-fullscreen'
      "
      @click="click"
    ></i>
  </span>
</template>

<script>
  import screenfull from 'screenfull'

  export default {
    name: 'HtFullScreenBar',
    data() {
      return {
        isFullscreen: false,
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.destroy()
    },
    methods: {
      click() {
        if (!screenfull.isEnabled) {
          this.$baseMessage('开启全屏失败', 'error')
          return false
        }
        screenfull.toggle()
      },
      change() {
        this.isFullscreen = screenfull.isFullscreen
        setTimeout(() => this.$emit('refresh'), 50)
      },
      init() {
        if (screenfull.isEnabled) {
          screenfull.on('change', this.change)
        }
      },
      destroy() {
        if (screenfull.isEnabled) {
          screenfull.off('change', this.change)
        }
      },
    },
  }
</script>
