<template>

<div :style="frameStyle" class="video-frame">

  <div :id="idStr" class="frame"></div>

  <div v-if="onChange" class="exchange">视频切换至 {{ pileNumber }}</div>
  <template v-else>

    <div v-if="errorText" class="error">
      {{ errorText }}
    </div>
    
    <div v-if="loading" class="loading">
      <Icon class="loading-spinner" icon="ep:loading" />
      <div class="text">视频加载中...</div>
    </div>
  </template>
  

</div>

</template>

<script lang='ts' setup>

import { ref, computed } from 'vue'
import { getVideoUrl } from '@/api/home'
import { diceCode } from '@/utils'

const props = withDefaults(defineProps<{
  frameW?: number,
  frameH?: number,
  vcode: string,
  pileNumber: string
}>(), {
  frameW: 250,
  frameH: 150
})

const connecCount = ref(0) // 断线重连次数
const errorText = ref('') // 错误提示
const loading = ref(true) // 加载状态
const player = ref<any>(null) // 播放器实例
const idStr = diceCode() // 播放器动态 ID
const onChange = ref(false) // 视频切换提示

const frameStyle = computed(() => {
  return {
    width: props.frameW + 'px',
    height: props.frameH + 'px'
  }
})

const playerInit = async () => {

  player.value = new JSPlugin({
    szId: idStr,
    iWidth: props.frameW,
    iHeight: props.frameH,
    iMaxSplit: 1,
    iCurrentSplit: 1,
    szBasePath: '/js/h5ss',
    oStyle: {
      background: '#000',
    },
    openDebug: false,
  })

  player.value.JS_SetWindowControlCallback(({

    windowEventSelect: () => {},

    firstFrameDisplay: () => {
      loading.value = false
      errorText.value = ''
    },

    pluginErrorHandler: (_, iErrorCode) => {
      if (iErrorCode == '0x12f910011' || iErrorCode == '0x12f910029' || iErrorCode.indexOf('buffer_full') > -1) {
        errorText.value = '视频连接中...'
        // 发起重连
        reConnect()
        return
      }

      errorText.value = '播放资源错误'
      loading.value = false

    }

  }))

  // 初始化设置
  await player.value.JS_SetOptions({})

  await linkVideo()

  connecCount.value = 0
  loading.value = false

}

const reConnect = () => {
  connecCount.value++
  if (connecCount.value > 10) {
    player.value.JS_Stop()
    return
  }
  linkVideo()
}

const linkVideo = async () => {

  const wslink = await getLink()
  await player.value.JS_Play(
    wslink,
    {
      playURL: wslink,
      mode: 0,
    },
    0
  )
}

const getLink = async () => {

  const res = await getVideoUrl({ cameraIndexCode: props.vcode })
  return res.url

}

watch(
  () => props.vcode,
  () => {
    if (player.value) {
      onChange.value = true
      player.value.JS_Stop()
      linkVideo()
      setTimeout(() => {
        onChange.value = false
      }, 900)
    } else {
      nextTick(() => {
        playerInit()
      })
    }
  },
  {
    immediate: true
  }
)

onUnmounted(() => {
  if (player.value) {
    player.value.JS_Stop()
  }
})

</script>

<style lang='scss' scoped>

.video-frame {
  position: relative;
  background: #000000;
  .frame {
    height: 100%;
  }
  .exchange {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba($color: #FFFFFF, $alpha: 0.6);
    // z-index: 3;
    background: #000000;
  }
  .error,
  .loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba($color: #FFFFFF, $alpha: 0.6);
    z-index: 3;
    .text {
      margin-top: 5px;
    }
  }
}

</style>