<template>
  <div class="jessibuca">
    <div id="container" ref="containerPlayer" @dblclick="toggleFullScreen"></div>
  </div>
</template>

<script>
import { getVideoList } from '@/api/screen/screen'
import { getQxToken } from '@/api/video/camera'
import { selectVideoLoginInfo } from '@/api/screen/screen'
export default {
  data() {
    return {
      jessibuca: null,
      playUrl: '',
      qxToken: '',
      qxInfo: {},
      fixedData: [],
    }
  },

  // 接收父组件传递的设备信息
  props: {
    playerInfo: {
      type: Object,
      default: () => null,
    },
  },
  // 监听设备信息
  watch: {
    playerInfo: {
      handler(newValue) {
        if (newValue) {
          // 1. 监听到数据后 调token 和 ip 的接口
          Promise.all([this.getQxToken(), this.selectVideoLoginInfo()]).then(() => {
            //  2. Promise.all 等待两个异步请求结束后 再组装url
            const { puid, ballIndex } = newValue
            this.playUrl =
              this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
            console.log('this.playUrl', this.playUrl)
            this.playvideo()
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    createJessibuca() {
      this.jessibuca = new window.Jessibuca({
        container: this.$refs.containerPlayer,
        videoBuffer: 0.2, // 缓存时长
        isResize: false,
        text: '',
        debug: false,
        showBandwidth: true, // 显示网速
        operateBtns: {
          fullscreen: true,
          screenshot: true,
          play: true,
          audio: true,
        },
        forceNoOffscreen: true,
        isNotMute: true,
      })
      this.jessibuca.on('load', function () {
        console.log('on load')
      })
      this.jessibuca.on('play', function () {
        console.log('on play')
      })
      this.jessibuca.on('audioInfo', function (msg) {
        //  console.log('audioInfo', msg)
      })

      this.jessibuca.on('videoInfo', function (info) {
        // console.log('videoInfo', info)
      })

      this.jessibuca.on('error', function (error) {
        console.log('error', error)
      })

      this.jessibuca.on('start', function () {
        console.log('start')
      })

      this.jessibuca.on('stats', function (stats) {
        //  console.log('stats', stats)
      })
    },
    playvideo() {
      if (this.playUrl) {
        console.log('播放--')
        this.jessibuca.play(this.playUrl)
      }
    },
    async stopvideo() {
      if (this.jessibuca) {
        await this.jessibuca.destroy()
        jessibuca = null
      }
    },

    async getQxToken() {
      const res = await getQxToken()
      this.qxToken = res.msg
    },
    async selectVideoLoginInfo() {
      const res = await selectVideoLoginInfo()
      this.qxInfo = res.data
    },

    async getDeviceList() {
      const res = await getVideoList({
        deviceType: '固定摄像头',
      })
      this.fixedData = res.data
    },
    //双击全屏
    toggleFullScreen() {
      const containerPlayer = this.$refs.containerPlayer
      if (document.fullscreenElement) {
        // 如果已经是全屏，则退出全屏
        document.exitFullscreen()
      } else {
        // 进入全屏
        containerPlayer.requestFullscreen()
      }
    },
  },

  mounted() {
    this.createJessibuca()
  },
  beforeDestroy() {
    if (this.jessibuca) {
      this.jessibuca.destroy()
      this.jessibuca = null
    }
  },
}
</script>

<style lang="scss" scoped>
.jessibuca {
  height: 100%;
  & > #container {
    width: 100%;
    height: 100%;
    object-fit: fill;
    background-color: black;
  }
}
</style>
