<script type="text/javascript" src="<%= BASE_URL %>hik_video/h5player.min.js"></script>

<template>
  <div id="player" style="width: 800px;height: 600px;"></div>
</template>

<script>
import '@/assets/hik_video/h5player.min.js'
import {getPreviewUrl, getPlaybackUrl} from '@/api/data/camera'

export default {
  name: 'hik-h5player',
  data(){
    return {
      //播放器对象
      player: null,
      splitNum: 1,
      mode: 1,
    }
  },
  mounted() {
    this.createPlayer()
    this.init()
  },
  methods: {
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
        this.player.JS_Resize()
      })
    },
    /**
     * 初始化播放器
     */
    createPlayer() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: 'player',
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: './hik_video',

        // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
        iWidth: 600,
        iHeight: 400,

        // 分屏播放，默认最大分屏4*4
        iMaxSplit: 16,
        iCurrentSplit: this.splitNum,

        // 样式
        oStyle: {
          border: '#343434',
          borderSelect: '#FFCC00',
          background: '#000'
        }
      })

      // 事件回调绑定
      this.player.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: ');
        }
      });
    },
    /**
     * 窗口分屏
     */
    arrangeWindow(splitNum) {
      this.splitNum = splitNum
      this.player.JS_ArrangeWindow(splitNum).then(
        () => {
          console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)
        },
        e => {
          console.error(e)
        }
      )
    },
    /**
     * 全屏
     */
    wholeFullScreen() {
      this.player.JS_FullScreenDisplay(true).then(
        () => {
          console.log(`wholeFullScreen success`)
        },
        e => {
          console.error(e)
        }
      )
    },
    /**
     * 获取取流链接
     * @returns {*}
     */
    realplay(code,transmode,index) {
      let {player, mode} = this
      if(index === null || index === undefined){
        index = player.currentWindowIndex
      }

      if(transmode === null || transmode === undefined){
        transmode = 1
      }

      const param = {
        'cameraIndexCode': code,
        'transmode': transmode
      }
      getPreviewUrl(param).then(response => {
        let playURL =response.data.url
        this.player.JS_Play(playURL, {playURL, mode}, index).then(
          () => {
            console.log('realplay success')
          },
          e => {
            console.error(e)
          }
        )
      });
    },
    stopPlay() {
      this.player.JS_Stop(this.player.currentWindowIndex).then(
        () => {
          console.log('stop realplay success')
        },
        e => {
          console.error(e)
        }
      )
    },
    stopAllPlay() {
      this.player.JS_StopRealPlayAll().then(
        () => {  console.log('stopAllPlay success') },
        e => { console.error(e) }
      )
    },
    /**
     * 获取回放链接 2021-06-29T00:00:00Z
     * @returns {AxiosPromise}
     */
    playback(code,transmode,startTime,endTime) {
      startTime += '+08:00'
      endTime += '+08:00'
      let { player, mode } = this,
        index = player.currentWindowIndex
      //todo
      const param = {
        "cameraIndexCode": code,
        "startTime": startTime,
        "endTime": endTime,
        'protocol': 'ws',
        "transmode": transmode
      }
      getPlaybackUrl(param).then(response => {
        let playURL =response.data.url
        this.player.JS_Play(playURL, { playURL, mode }, index, startTime, endTime).then(
          () => {
            console.log('playbackStart success')
          },
          e => {
            console.error(e)
          }
        )
      });
    },
    playbackPause() {
      this.player.JS_Pause(this.player.currentWindowIndex).then(
        () => { console.log('playbackPause success') },
        e => { console.error(e) }
      )
    },
    playbackResume() {
      this.player.JS_Resume(this.player.currentWindowIndex).then(
        () => { console.log('playbackResume success') },
        e => { console.error(e) }
      )
    },
    playbackSlow(){
      this.player.JS_Slow(this.player.currentWindowIndex).then(
        rate => { console.log('playbackSlow success. rate=' + rate) },
        e => { console.error(e) }
      )
    },
    playbackFast(){
      this.player.JS_Fast(this.player.currentWindowIndex).then(
        rate => { console.log('playbackFast success. rate=' + rate) },
        e => { console.error(e) }
      )
    }
  }
}

</script>

//获取摄像机预览地址
export function getPreviewUrl(data){
  return request({
    url: '/data/camera/getPreviewUrl',
    method: 'post',
    data: data
  })
}
//获取摄像机录像地址
export function getPlaybackUrl(data){
  return request({
    url: '/data/camera/getPlaybackUrl',
    method: 'post',
    data: data
  })
}