<script setup>
import { ref, onMounted } from 'vue';

const containerRef = ref()
let width


const theVideoList = ref([])

onMounted(() => {
  const size = containerRef.value.getBoundingClientRect();
  width = size.width
  theVideoList.value = Array.from({ length: ~~((width - 24) / 351) }).map(() => ({}))
})

import _phUrl from '~/assets/video/_ph.png'
import phUrl from '~/assets/video/ph.png'

</script>

<template>
  <div ref="containerRef" class="w-full h-full flex flex-col ">
    <div class="w-full flex-auto flex justify-center items-center bg-black">
      <span class="text-white tracking-wider">暂未选择摄像头</span>
    </div>
    <div class="flex-none card mt-10px">
      <div class="flex">
        <div class="flex-auto flex mb-10px">
          <div class="w-1 h-full bg-blue-600 mr-2"></div>
          <div class="text-xl">实时巡课视频</div>
        </div>
        <!--<div class="flex-none flex">
          <svg class="icon_reserve" aria-hidden="true">
            <use xlink:href="#icon-switch"></use>
          </svg>
          <!~~ <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xitongguanli_zuzhijiagou"></use>
          </svg> ~~>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-Grid"></use>
          </svg>
          <svg class="icon_reserve" aria-hidden="true">
            <use xlink:href="#icon-tubiaozhuzhuangtu"></use>
          </svg>
        </div>-->
      </div>
      <div class="flex flex-wrap  space-x-6 items-center jusifify-space overflow-y-hidden h-180px">
        <div v-for="item in theVideoList" class="border-4 w-1/4 h-full  overflow-y-hidden  cursor-pointer bg-black relative mr-1px">
          <div class="w-full h-full flex justify-center items-center"><img :src="phUrl" /></div>
          <div class="absolute bottom-0 right-0 p-20px text-right text-light-900 text-xs">{{ item.cameraName }}</div>
        </div>
      </div>
    </div>

  </div>
</template>