<template>
  <div
    v-loading="options.loading"
    class="has-padding"
  >
    <div class="l-grid large">
      <camera-player
        v-for="camera in options.list"
        :key="camera.identifier"
        :camera="camera"
      />
    </div>
    <status-wrapper
      v-if="isAbnormal"
      :error="options.error"
      @click="getCameras"
    />
  </div>
</template>

<script>
import { getCameras } from '@/api/camera'

export default {
  name: 'CameraWall',
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      options: {
        loading: false,
        error: false,
        list: []
      },
      fullscreen: false
    }
  },
  computed: {
    isAbnormal () {
      const options = this.options
      return options.error || !options.loading && options.list.length === 0
    }
  },
  created () {
    this.initScreen()
    if (this.info.list) {
      this.options.list = this.info.list
    } else {
      this.getCameras(this.info.params)
    }
  },
  methods: {
    getCameras (params) {
      const options = this.options
      options.loading = true
      options.error = false
      getCameras(params).then(
        ({ data }) => {
          options.list = data
        },
        () => {
          options.error = true
          options.list = []
        }
      ).finally(() => {
        options.loading = false
      })
    },
    initScreen () {
      this.handleFullScreen()
      window.addEventListener('fullscreenchange', () => {
        if (this.fullscreen === true) {
          this.fullscreen = false
        } else {
          this.fullscreen = true
          this.$emit('close')
        }
      })
    },
    handleFullScreen () {
      const 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()
        }
        console.log('退出全屏')
      } 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()
        }
        console.log('全屏')
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>
