<script setup>
import { watch, ref, onMounted, onUnmounted } from 'vue';
import request from '@/utils/request';
// import videojs from 'video.js';
// import 'video.js/dist/video-js.css'

const limit = ref(6)
const currentPage = ref(1)
async function handleCurrentChange() {
  await queryApi()
  timestamp.value = Date.now()
}
const total = ref(0)

const containerRef = ref()
// let width
// let height

const props = defineProps({
  area: String
})

// let VideoListRef = []
// const setVideoListRef = (el) => {
//   if (el) {
//     VideoListRef.push(el)
//   }
// }

const theVideoList = ref(Array.from({ length: limit.value }).map(() => ({})))

// let players = null

onMounted(() => {
  // const size = containerRef.value.getBoundingClientRect();
  // width = size.width
  // height = size.height

  queryApi()
})

// onUnmounted(() => {
//   players.forEach(player => player.dispose())
//   players = null
// })

function queryApi() {
  return request({
    url: '/openapi/hk/camera.php',
    data: {
      do: 'getCameraByAreaCode',
      areaCode: props.area,
      pageNo: currentPage.value,
      pageSize: limit.value,
      preview: 0
    }
  }).then(res => {
    total.value = res.data.total
    theVideoList.value = res.data.list.slice(0, limit.value)
    // players = theVideoList.value.map(({ previewURL }, idx) => {
    //   return videojs(
    //     VideoListRef[idx],
    //     Object.assign({
    //       sources: [{
    //         src: previewURL.url,
    //         type: 'application/x-mpegURL'
    //       }],
    //       width: (width / 3) - 40,
    //       height: (height - 60) * 0.45

    //     }, options)
    //   )
    // }
    // )
  })
}

import VideoPlayer from '~/components/VideoPlayer/index.vue'

const urlsMap = ref({})

const handleItemClick = (cameraIndexCode) => {
  request({
    url: '/openapi/hk/camera.php',
    data: {
      do: 'getCameraPreview',
      cameraIndexCode,
    }
  }).then(res => {
    urlsMap.value[cameraIndexCode] = res?.data?.stream.map(({ url }) => url)
  })
}

const timestamp = ref(Date.now())
</script>

<template>
  <div ref="containerRef" class="w-full h-full flex flex-col justify-between items-start bg-hex-f0f3f8">
    <div class="flex-auto flex flex-wrap justify-start items-center" :key="timestamp">
      <div v-for="(item) in theVideoList"
        class=" w-1/3 px-20px h-45/100 relative flex flex-col justify-center items-center box-border bg-clip-content">


        <VideoPlayer class=" bg-black cursor-pointer " @click.once="handleItemClick(item?.cameraIndexCode)"
          :urls="urlsMap[item?.cameraIndexCode]"></VideoPlayer>

        <div class="text-center text-dark-900 text-base flex-none">{{ item?.cameraName }}</div>
      </div>
    </div>
    <div class="w-full flex items-center justify-end flex-none h-60px">
      <el-pagination :page-size="limit" v-model:current-page="currentPage" @current-change="handleCurrentChange"
        background layout="total, prev, pager, next" :total="total" />
    </div>

  </div>
</template>