<template>

<div @click="goPlay" class="camera-player">

  <div v-show="mode === 'icon'" class="icon"></div>
  <div v-show="mode === 'view'" :class="['player', `direct-${infos.direct}`]">

    <div class="context">

      <div ref="cameraRef" class="frame"></div>

      <div @click.stop="goPlay" v-if="!state" class="no-play"></div>

      <div v-if="state === 'loading'" class="loading">
        <Icon class="loading-spinner" icon="ep:loading" />
        <div class="text">视频加载中...</div>
      </div>

      <div v-if="state === 'error'" class="error">
        {{ errorText }}
      </div>

      <div v-show="state === 'live'" @click.stop="goFullScreenPlay" class="full-screen"></div>

    </div>
    <div class="bar">{{ infos.pileNumber }}</div>
  </div>

</div>

</template>

<script lang='ts' setup>

import { getVideoUrl } from '@/api/home'

const app = getCurrentInstance()

const mode = ref('icon')
const state = ref(null) // 加载状态
const errorText = ref('') // 错误提示

const cameraRef = ref(null)
const connecCount = ref(0) // 断线重连次数
const player = ref<any>(null) // 播放器实例

const infos = ref({
  id: '', // id 字符串
  cameraIndexCode: '', // 摄像机播放码
  pileNumber: '' // 桩米号
})

const cameraInit = (e) => {
  infos.value = {
    direct: e.direct,
    ...e.infos
  }
}

// 全屏播放
const goFullScreenPlay = (e) => {
  app?.proxy?.$openVideo(infos.value)
}

// 开始播放
const goPlay = () => {
  if (state.value === 'live') return
  playerInit()
}

// 开始播放
const linkVideo = async () => {

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

}

// 模式切花
const modeChange = (e) => {

  if (e !== mode.value) {
    mode.value = e
  }
  
}


// 获取视频流链接
const getLink = async () => {

  const res = await getVideoUrl({ cameraIndexCode: infos.value.cameraIndexCode })
  return res.url

}

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

// 初始化
const playerInit = async () => {

  player.value = new JSPlugin({
    szId: infos.value.id,
    iWidth: '174px',
    iHeight: '140px',
    iMaxSplit: 1,
    iCurrentSplit: 1,
    szBasePath: '/js/h5ss',
    oStyle: {
      background: '#000',
    },
    openDebug: false,
  })

  player.value.JS_SetWindowControlCallback(({

    windowEventSelect: () => {},

    firstFrameDisplay: () => {
      state.value = 'live'
      errorText.value = ''
    },

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

      errorText.value = '播放资源错误'
      state.value = 'error'

    }

  }))

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

  await linkVideo()

  connecCount.value = 0

}

defineExpose({
  cameraInit,
  modeChange,
  goPlay
})

</script>

<style lang='scss' scoped>

$Common_Url: "@/assets/images/3d/";

.camera-player {
  position: relative;
  .icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    background-image: url($Common_Url + 'camera.png');
    background-size: cover;
    cursor: pointer;
  }
  .player {
    width: 174px;
    height: 144px;
    background: #324A7B;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.25);   
    left: 50%;
   
    // transform: translateX(-50%);
    border-radius: 6px;
    overflow: hidden;

    &.direct-0 {
      transform: translateY(-100px);
    }

    &.direct-1 {
      transform: translateY(100px);
    }
   
    .context {
      width: 174px;
      height: 120px;
      position: absolute;
      left: 0;
      top: 0;
      .full-screen {
        width: 18px;
        height: 18px;
        background-image: url($Common_Url + 'full_screen.png');
        background-size: cover;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        right: 5px;
        bottom: 10px;
        cursor: pointer;
      }
      .frame {
        width: 100%;
        height: 100%;
      }
      .no-play {
        width: 45px;
        height: 45px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url($Common_Url + 'icon_play.png');
        background-size: cover;
        cursor: pointer;
      }
      .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;
        }
      }
    }
    .bar {
      position: absolute;
      height: 24px;
      width: 174px;
      background: #35669C;
      left: 0px;
      bottom: 0px;
      color: white;
      font-size: 12px;
      padding: 0 6px;
      line-height: 24px;
      box-sizing: border-box;
    }
    &.dt-bottom {
      position: absolute;
      bottom: -100px;
    }
    &.dt-top {
      position: absolute;
      top: -100px;
    }
  }
}

</style>