<template>
  <Tooltip :content="title">
    <Icon class="icon" size="32" color="#e8e8e8" :type="icon" @click="toggle" />
  </Tooltip>
</template>

<script>
import screenfull from './fullscreen'
export default {
  name: 'FullScreenTool',

  data () {
    return {
      fullscreen: false,
    }
  },

  computed: {
    icon () {
      return this.fullscreen ? 'md-contract' : 'md-expand'
    },

    title () {
      return this.fullscreen ? '退出全屏' : '全屏'
    },
  },

  methods: {
    toggle () {
      if (!screenfull.isEnabled) {
        return
      }
      this.fullscreen = !this.fullscreen
      if (!this.fullscreen) {
        screenfull.exit()
      } else {
        screenfull.request()
      }
    },
  },
}
</script>

<style scoped>

</style>
