<template>
  <div style="width:100%;height: 100%;" v-if="!isError">
    <a-row>
      <a-col :span="24">
        <div>
          <a-card :title="mainVideoCardBoxTitle" class="videoCardMain" style="width:100%">
            <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
          </a-card>
        </div>
        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
          <div v-for="(item,index) of tableData" class="videoMax">
            <a-card :title="item?.xm" class="videoCardMain">
              <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/>
              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+index" :src="'http://127.0.0.1/live_hls/soures.m3u8'" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
            </a-card>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
  <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
    <a-empty>
      <template #description>
        <span>
          没有找到直播间
        </span>
      </template>
      <!-- <a-button type="primary" @="">关闭</a-button> -->
    </a-empty>
  </div>
</template>
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
import { defHttp } from '/@/utils/http/axios';
import { ref, onMounted } from 'vue';
import bVideo from '/@/views/site/common/video/videojs/video.vue';
import { nextTick } from 'vue';
import { useRoute } from 'vue-router'

const bVideoRefs = <any>ref([]);
const mainVideo = <any>ref();

const currentItem = <any>ref({});
const isfirst = <any>ref(false);
const mainVideoCardBoxTitle = <any>ref('');
const tableData = ref<Recordable>([])
const isError = ref(false);

const route = useRoute();

onMounted(() => {
  if(route.query.id){
    //按ID加载数据
    list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
      let list = (res?.records) ?? [];
      tableData.value = list;
      nextTick(() => {

      })
    });
  }else{
    isError.value = true;
  }

//   list({ pageSize: -1, sfyx: '0' }).then(res => {
//     let list = (res?.records) ?? [];
//     //聚合
//     let map = {};
//     list.forEach(x => {
//       let item = map[x.jsmc];
//       if(item){
//         item.child[x.xm] = x;
//       }else{
//         let child = {};
//         child[x.xm] = x;
//         map[x.jsmc] = {
//           ...x,
//           child
//         };
//       }
//     });

//     leftList.value = Object.values(map);
//     //计算左侧菜单高度
//     let mainDiv = <any>_document?.querySelector('.ant-layout .jeecg-default-layout-main > div');
//     topWidth.value =mainDiv?.style?.height?? '0';
//   });
});



enum Api {
  list = '/jiaoshi/kcZhihuijiaoshi/list',
}
/**
 * 列表接口
 * @param params
 */
const list = (params) => defHttp.get({ url: Api.list, params });

/**
 * 子页加载完成后回调
 * @param player
 */
function loadEnd(player){
  nextTick(() => {
    if(!isfirst.value){
      isfirst.value = true;
      //播放第一个
      bVideoClick({ target: { playerId: player.id() } })
    }


  });
}

/**
 * 点击时切换至大屏
 * @param e
 */
function bVideoClick(e){
  console.log(`bVideoClick: 点击切换至主界面`);

  let mainVideo = <any> document.querySelector('#mainVideo');
  let currentVideo = <any> document.querySelector('#'+e.target.playerId);
  let src = currentVideo.player?.src();

  mainVideo?.player?.src([{type:'application/x-mpegURL',src }])
}

</script>
<style lang="less" scoped>
.videoMax{
  width: 25%;
}
.videoCardMain {
  :deep(.ant-card-body) {
    padding: 0;
  }
}
/* 隐藏video 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
</style>