<template>
  <div class="all">
    <div :id="vId" class="playVideo"></div>
  </div>
</template>

<script setup>
  import {dateFormat} from "@/utils/auth";
  import { http } from "@/api/service";
  import { getVideoUrl , getReplayUrl} from "@/api/dpApi/otherApi";
  import emitter from "@/utils/eventBus.js";
  const { LocaleProvider, locales } = window.antd
  moment.locale('./static/js/zh-cn.js')
  const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
  moment.locale('./static/js/zh-cn.js')
  import { ref, onMounted, onBeforeUnmount,onUnmounted,reactive,computed,getCurrentInstance, watch} from "vue";
  const props = defineProps({
    sbbh:String,
    vId:{
      type:String,
      default:'player'
    }
  })
  const isShowVideo = ref(false)
  const player = ref(null);
  const splitNum = ref(1)
  const splitBtnActive = ref(-1)
  const { proxy } = getCurrentInstance();
  const sbbh = ref(null)
  const data = ref(null)
  const zh_CN = ref('zh-cn')
  const dataTime = ref([
    dateFormat(new Date(), "YY-MM-DD")+' 00:00:00',
    dateFormat(new Date(), "YY-MM-DD")+' 23:59:59',
    ])
  const urls =ref ({
    realplay: '',
    talk: '',
    playback: ''
  })
  const playback =ref ({
    startTime: new Date(dataTime.value[0]),
    endTime: new Date(dataTime.value[1]),
    valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
    seekStart: new Date('2022-08-29 12:00:00'),
    rate: ''
  })

  const muted = ref(true)
  const time = ref(null)
  const sxtzList = ref([]) //摄像头组列表
  const sxtzLength = ref(0) //摄像头组个数
  const timer = ref(null)
  const num = ref(0)
  watch(()=>props.sbbh,(val)=>{
    if(!val) return false
    getUrl({sbbh:val})
  },{immediate:true})


  onMounted(()=>{
    init()
    createPlayer()
  })

  onUnmounted(() => {
    clearInterval(timer.value)
  });

  function getUrl(item){
    if(item.sbbh){
      http.previewURLs({ sbbh: item.sbbh,protocol:'ws'}).then((res) => {
        let data = JSON.parse(res);
        if(data.data.url){
          urls.value.realplay = data.data.url
          realplay()
          changeSplit(splitNum.value,-1)
        }else{
          proxy.$message({
            message: "获取不到视频流，播放失败!!!",
            grouping:true,
            type: "info"
          });
          isShowVideo.value = false
        }
      })
    }else{
      proxy.$message({
        message: "获取不到视频流，播放失败!!!",
        grouping:true,
        type: "info"
      });
      isShowVideo.value = false
    }
  }

  /* 预览&对讲 */
  function realplay() {
    let index = player.value.currentWindowIndex
    let playURL = urls.value.realplay
    let mode = 1
    player.value.JS_Play(playURL, { playURL,mode }, index).then(
      () => {},
      e => {
        proxy.$message({
          message: "该视频无法播放!!!",
          grouping:true,
          type: "info"
        });
        isShowVideo.value = false
      }
    )
  }

  function init() {
    // 设置播放容器的宽高并监听窗口大小变化
    window.addEventListener('resize', () => {
      player.value.JS_Resize()
    })
  }

  function createPlayer(){
    player.value = new window.JSPlugin({
      szId: props.vId,
      iWidth: 1400,
      iHeight: 160,
      szBasePath: "./h5player/h5player.min.js",
      iMaxSplit: 4,
      iCurrentSplit: splitNum.value,
      openDebug: true,
      oStyle: {
        borderSelect:'#FFCC00',
      }
    })
  }

  // 切换分屏
  function changeSplit(val,index){
    splitBtnActive.value = index
    if(val == 'alone'){
      // 单个全屏
      player.value.JS_FullScreenSingle(0).then(() => {},e => { })

    }else if(val == 'all'){
      // 所有全屏
      player.value.JS_FullScreenDisplay(true).then(() => {},e => { })
    }else{
      // 3*3的屏幕
      let splitNum = val
      player.value.JS_ArrangeWindow(splitNum).then(() => {},e => { })
    }
  }

  //停止回放
  function stopPlay() {
    player.value.JS_Stop().then(
      () => {
        playback.value.rate = 0;
        realplay()
        changeSplit(splitNum.value,-1)
      },
      e => { }
    )
  }

  onBeforeUnmount(() => {
    stopPlay()
  });
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
 #player{
  width: 100%;
  height: 100%;
}

</style>
<style>
.all{
  width: 100%!important;;
  height: 100%!important;
}
.all .playVideo{
  width: 100%!important;;
  height: 100%!important;
}

.sub-wnd{
  width: 100%!important;;
  height: 100%!important;
}
</style>
