<template>
  <div class="H5PlayerVideo">
    <div :id="videoData.id" :ref="videoData.id"></div>
  </div>
</template>

<script>
  export default {
    name: 'H5PlayerVideo',
    props: {
      videoProps: {}
    },
    data() {
      return {
        fullScreenType:false,
        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
        videoData: {},
      }
    },
    created() {
      this.$set(this, 'videoData', {
        id: 'video_' + this.generateRandomString(),
        width: this.videoProps.width ? this.videoProps.width : 600,
        height: this.videoProps.height ? this.videoProps.height : 338,
        url: this.videoProps.url
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.initH5Player(1)
        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
        this.initPlayer(this.videoData.url, 0,type)
      })
    },
    methods: {
      //全屏
      fullScreen() {
        if(this.$parent.$parent.stopTime){
          this.$parent.$parent.stopTime(this.videoProps.cameraIndexCode);
        }else if(this.$parent.stopTime){
          this.$parent.stopTime(this.videoProps.cameraIndexCode);
        }else{
          this.myPlugin.JS_FullScreenDisplay(true).then(
            (res) => {
              // console.info('JS_FullScreenDisplay success');
              // do you want...
            },
            (err) => {
              // console.info('JS_FullScreenDisplay failed');
              // do you want...
            }
          );
        }
      },
      //退出全屏
      outFullScreen() {
        let self = this;
        this.myPlugin.JS_FullScreenDisplay(false).then(
          (res) => {
            console.info('JS_FullScreenDisplay success');
            // do you want...
          },
          (err) => {
            console.info('JS_FullScreenDisplay failed');
            // do you want...
          }
        );
        self.$set(self,'fullScreenType',false);
      },
      initH5Player(split) {
        this.myPlugin = new window.JSPlugin({
          szId: this.videoData.id, //需要英文字母开头，唯一性，必填
          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
          bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
          openDebug: true,
          oStyle: {
            borderSelect: '#000'
          },
          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
          iWidth: this.videoData.width,
          iHeight: this.videoData.height,
          // 分屏播放，默认最大分屏4*4
          iMaxSplit: split,
          iCurrentSplit: split
        })
        let iWndNum = 1;
        let InterruptTime = 5;
        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
          () => {
            // console.info('JS_SetInterruptTime success');
            // do you want...
          },
          (err) => {
            // console.info('JS_SetInterruptTime failed');
            // do you want...
          }
        );
        // 事件回调绑定
        this.myPlugin.JS_SetWindowControlCallback({
          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
            // console.log('windowSelect callback: ', iWndIndex)
          },
          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
          },
          windowEventOver: function (iWndIndex) {  //鼠标移过回调
            //console.log(iWndIndex);
          },
          windowEventOut: function (iWndIndex) {  //鼠标移出回调
            //console.log(iWndIndex);
          },
          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
            //console.log(iWndIndex);
          },
          windowFullCcreenChange: function (bFull) {  //全屏切换回调
            // console.log('fullScreen callback: ', bFull)
          },
          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
          },
          performanceLack: function () {  //性能不足回调
            // console.log('performanceLack callback: ')
          }
        })
      },
      initPlayer(url, index,type) {
        this.myPlugin.JS_Play(url,
          {
            playURL: url, // 流媒体播放时必传
            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
            // ...
          },
          index //当前窗口下标
        ).then(
          () => {
            console.info('JS_Play success')
            // do you want...
          },
          (err) => {
            console.info('JS_Play failed:', err)
            // do you want...
          }
        )
      },
      //生成随机ID
      generateRandomString() {
        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
        let randomString = ''
        for (let i = 0; i < 24; i++) {
          let randomIndex = Math.floor(Math.random() * chars.length)
          randomString += chars.charAt(randomIndex)
        }
        return randomString
      },
      videoOff() {
        this.myPlugin.JS_StopRealPlayAll().then(
          () => {
            console.info('JS_StopRealPlayAll success')
            // do you want...
          },
          (err) => {
            console.info('JS_StopRealPlayAll failed')
            // do you want...
          }
        )
      }
    },
    beforeDestroy() {
      let self = this
      self.videoOff()
    }
  }
</script>

<style scoped lang="scss">
  .H5PlayerVideo {
    margin: 0;
    padding: 0;
    display: inline-block;
    * {
      margin: 0;
      padding: 0;
    }
    position: relative;
  }
</style>
