<script setup>
import { onMounted } from 'vue'
const props = defineProps({
  id: {
    type: String,
  },
})

// 定义变量
const showOperateBtns = false // 是否显示按钮
const forceNoOffscreen = true
let jessibuca = null

// 创建播放器的函数
function create(id) {
  console.log('是硬解码吗？', window.localStorage.getItem('useMSE') !== 'false')
  const $container = document.getElementById(props.id)
  jessibuca = new JessibucaPro({
    container: $container, // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
    videoBuffer: 0.2, // 设置最大缓冲时长，单位秒，播放器会自动消除延迟
    decoder: './js/decoder-pro.js',
    isResize: false,
    text: '',
    loadingText: '加载中',
    debug: false,
    debugLevel: 'debug',
    isMulti: true,
    useMSE: window.localStorage.getItem('useMSE') !== 'false',
    decoderErrorAutoWasm: false,
    useSIMD: true,
    useWCS: true,
    useMThreading: true,
    hasAudio: false,
    useVideoRender: true,
    controlAutoHide: true,
    showBandwidth: showOperateBtns, // 显示网速
    showPerformance: showOperateBtns,
    isFlv: true,
    operateBtns: {
      // 配置操作按钮
      fullscreen: showOperateBtns, // 是否显示全屏按钮
      screenshot: showOperateBtns, // 是否显示截图按钮
      play: showOperateBtns, // 是否显示播放暂停按钮
      audio: false, // 是否显示声音按钮
      recorder: false, // 是否显示录制按
    },
    watermarkConfig: {
      text: {
        content: 'jessibuca-pro',
      },
      right: 10,
      top: 10,
    },
    forceNoOffscreen, // 是否不使用离屏模式（提升渲染能力）
    isNotMute: false, // 是否开启声音，默认是关闭声音播放的
    demuxUseWorker: true,
    mseDecoderUseWorker: true,
    // websocketOpenTimeout: 3 + index * 0.5,
    loadingTimeout: 60,
    detectIFrame: true, // 检测首帧是否是I帧
  })
  jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
    jessibuca.showErrorMessageTips(`播放异常：${error}`)
  })

  jessibuca.on('videoInfo', (data) => {
    console.log('videoInfo:', 'width:', data.width, 'height:', data.width)
  })

  jessibuca.on(JessibucaPro.EVENTS.crashLog, (log) => {
    console.error('crashLog', log)
  })

  jessibuca.on('timeout', (error) => {
    console.log('timeout当设定的超时时间内无数据返回,则回调:', error)
  })

  jessibuca.on('loadingTimeout', () => {
    console.log('loadingTimeout当play()的时候，如果没有数据返回，则回调: timeout')
  })
}

// 获取视频流地址并播放视频
function play(playUrl = '') {
  console.log('播放视频路径: ', playUrl)
  // 播放视频
  playUrl && jessibuca.play(playUrl)
}

// 销毁视频
function destroy() {
  jessibuca && jessibuca.destroy()
  setTimeout(() => {
    create(props.id)
  }, 100)
}

onBeforeUnmount(() => {
  destroy()
})

// 组件挂载后执行的操作
onMounted(() => {
  create(props.id)
})

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ play })
</script>

<template>
  <div :id="props.id" class="container" />
</template>

<style scoped>
.container {
  background: rgba(13, 14, 27, 0.7);
  height: 100%;
  width: 100%;
}
</style>