<template>
  <div ref="video" id="player">
    <i id="overlayButton" style="display: none;"></i>
    <i id="qualityStatus" style="display: none;"></i>
    <div id="stats" style="display: none;"></div>
  </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { initLoad, addResponseEventListener } from '../webRtcVideo.js'

export default {
  name: 'UeVideo',

  setup(props, context) {

    const { proxy } = getCurrentInstance();

    let video = ref(null)
    let videoInstance = ref(null)

    onMounted(() => {

      // console.log('video.value', video.value);

      videoInstance = initLoad({
        context,
        autoConnection: true,
        showPlayOverlay: false,
        // serverUrl: 'http://192.168.10.52:60001/',
        serverUrl: 'http://127.0.0.1:60001/',
        qualityControl: true,
        inputOptions: {
          controlScheme: 1, // 鼠标：0是锁定，1是滑过
          suppressBrowserKeys: false,
        },
        matchViewportResolution: true,
      })

      // videoInstance = load()

      //添加UE的消息监听
      addResponseEventListener('play-video', async (data) => {
        console.log('接收信息-->', data)
        let dataObj
        try {
          dataObj = JSON.parse(data)
        } catch (e) {
          console.log(e)
        }
        if (dataObj) {
          switch (dataObj.action) {
            case 'boat_guiji':
              proxy.$bus.emit('ueRec_boatGuiji', dataObj.data)
              break
          }

        } else {

        }

      })

    })

    return {
      video,
      //向UE发送一个字符串.打印在游戏屏幕上
    }
  }
}
</script>

<style lang="scss" scoped>
#player {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background-color: #041637;

  .inter-btn {
    margin-top: 15vh;
  }

}
</style>
