<template>
  <el-row>
    <el-col :span="4" style="position: relative;height:calc(100vh - 170px);border: 4px solid #fff;background: #fff;">
      <!--@check="treecheck"-->
      <!--show-checkbox-->
      <div style="position: absolute;width: 100%;top:0;left: 0;height:calc(100vh - 170px);overflow-y: scroll;">
        <el-tree
        v-if="menuTree.length>0"
        ref="menutree"
        style="width: 100%;"
        :data="menuTree"
        default-expand-all
        @node-click="treeNode"
        
        node-key="pkId"
        highlight-current
        :props="{
          children: 'childList',
          label: 'name'
        }"
      />
      <div v-else style="display: flex;align-items: center;justify-content: center;width: 100%;height:calc(100vh - 140px);color: #ccc;">数据加载中...</div>
      </div>
      
    </el-col>
    <el-col :span="20">
      <div v-if="init" style="display: flex;align-items: center;justify-content: center;width: 100%;height:calc(100vh - 140px);font-size: 28px;color: #ccc;">请点击设备查看监控</div>
      <video-player
        v-else
        :key="datestr" 
        ref="videoPlayer"
        :playsinline="false"
        :options="playerOptions"
      />
      
      <!-- <div v-else>视频加载中...</div> -->
      
    </el-col>
  </el-row>

</template>

<script lang="ts" setup>

  import { 
    getdevice,
    getlive
  } from '@/api/swapstation/video'
  import { 
    getRouters
  } from '@/api/menu'
  import { ref,reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  
  //查询  
let menuTree = ref<any>([])
let livesrc = ref('')
  // getRouters().then(rps => {
  //       menuTree.value = rps.data
  // })

  getdevice().then((rps:any) => {
    menuTree.value = rps.data.data
  })

  let showVideo = ref(false)
  let init = ref(true)
  let datestr = ref<any>('')
  function treeNode(v:any) {
    
    if(!v.childList || v.childList.length == 0){
      init.value = false
      showVideo.value = false
      getlive(v.deviceId,v.channelId).then((rps:any) => {
        datestr.value = new Date().getTime() 
        playerOptions.sources.splice(0)
        playerOptions.sources.push({
            type:'application/x-mpegURL',
            src:rps.data.data
        })
        showVideo.value = true
        console.log(rps.data.data)
      })
    }
  }
  function treecheck() {}

  let playerOptions =reactive({
        autoplay: true,
        controls: true,
        liveui: true,
        language: 'zh-CN', // 语言
        aspectRatio: '16:9', // 宽高比
        fluid: true, // 自适应父容器
        sources: [{
          type: 'application/x-mpegURL',
          src: ''
        }],
        techOrder: ['html5'],
        html5: {
          hls: {
            withCredentials: false,
            lowLatencyMode: true,
            liveSyncDuration: 3
          }
        }
        //poster: '/path/to/poster.jpg'
      })
</script>
