<template>
  <div style="width:100%;height: 100%;">
    <a-row>
      <a-col :span="4">
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          style="overflow: hidden;overflow-y:scroll"
          :style="{ height: `calc(100vh - ${topWidth})`, borderRight: 0 }"
          mode="inline"
        >
          <a-menu-item v-for="(item, index) of leftList" :key="index" @click="(e) => titleClick(e,item)" :title="`${item.jsmc}-${item.xm}`">
            {{ item.jsmc }}-{{ item.xm }}
          </a-menu-item>
        </a-menu>
        <!-- document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height -->
      </a-col>
      <a-col :span="20">
        <bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
      </a-col>
    </a-row>
  </div>
  <!-- <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        :style="{ height: '100%', borderRight: 0 }"
        mode="inline"
      >
        <a-menu-item v-for="(item, index) of leftList" :key="index" @click="(e) => titleClick(e,item)" :title="`${item.xq}-${item.jsmc}-${item.xm}`">
          {{ item.xq }}-{{ item.jsmc }}-{{ item.xm }}
        </a-menu-item>
      </a-menu>

    </a-layout-sider>
    <a-layout>
      <a-layout-content> -->
        <!-- {{ currentItem }} -->
        <!-- <bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/> -->
        <!-- <a-row>
          <a-col :span="12">
            <bVideo ref="bVideoMainRef" :videoOption="{ autoPlay: true }" :videoKey="'main'+currentItem.id"/>
          </a-col>
          <a-col :span="12">
            <bVideo ref="bVideoLeftRef" :videoOption="{ autoPlay: true }" :videoKey="'main2'+currentItem.id"/>
          </a-col>
        </a-row> -->
      <!-- </a-layout-content>
    </a-layout> -->
  <!-- </a-layout> -->
</template>
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
import type { MenuProps } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from "/@/hooks/web/useMessage";
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import bVideo from '/@/views/site/common/webRTC/video.vue';

const bVideoMainRef = ref();
const _document = window.document;
// const bVideoLeftRef = ref();

const leftList = <any>ref([]);
const currentItem = <any>ref({});
const topWidth = <any>ref('0');

onMounted(() => {
  list({ pageSize: -1 }).then(res => {
    leftList.value = (res?.records) ?? [];
    topWidth.value = _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0';
    // console.log(_document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0')
  });
});

// const topWidthCalc = computed(() => {
//   return  _document?.querySelector('.ant-layout .jeecg-default-layout-main > div')?.style?.height?? '0';
// });
// xxx = document.querySelector('.ant-layout .jeecg-default-layout-main > div').style.height
//
enum Api {
  list = '/jiaoshi/kcZhihuijiaoshi/list',
}
/**
 * 列表接口
 * @param params
 */
const list = (params) => defHttp.get({ url: Api.list, params });


const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
const titleClick = (e: Event, item: any) => {
  console.log('titleClick ->', e, item);
  currentItem.value = item;
  playerVideo(item);
};

function playerVideo(item){
  bVideoMainRef.value.connectFn(item.ip);
  // bVideoMainRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
  // bVideoLeftRef.value.connectFn('rtsp://176.139.87.16/axis-media/media.amp','external');
}



//页面销毁时销毁webRtc
onBeforeUnmount(() => {
  bVideoMainRef.value.closeWebRtcStreamerFn();
})


</script>
<style lang="less" scoped>
</style>