<script setup>
import { watch, ref, onBeforeUnmount, onMounted, onUnmounted, nextTick } from 'vue';
import request from '@/utils/request';
// import videojs from 'video.js';
// import 'video.js/dist/video-js.css'
import { useRoute, useRouter } from 'vue-router';
import VideoPlayer from '~/components/VideoPlayer/index.vue'

const router = useRouter()
const route = useRoute()

const limit = ref(6)
const currentPage = ref(1)
let pageNum = 0

const containerRef = ref()
let width
let height

// const options = {
//   autoplay: true,
//   controls: false,
// }

const props = defineProps({
  area: String
})

// let player = null
// const currentVideoRef = ref()

const currentVideoIndex = ref()
// const currentVideoSrc = ref()
const currentVideoSrcs = ref()

const timestamp = ref(Date.now())

const theVideoList = ref([])

function queryApi() {
  return request({
    url: '/xkxt/hm/index',
    data: {
      xf_id: route.params.area,
      page: currentPage.value,
      limit: limit.value,
      // preview: 0
    }
  }).then(res => {
    theVideoList.value = res.data.page_data
    pageNum =res.data.total_page
    // currentVideoIndex.value = theVideoList.value[0]?.xh_id
    // console.log('currentVideoIndex :>> ', currentVideoIndex.value);
    handleItemClick(theVideoList.value?.[0])
  })
}

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

watch(
  () => route.params.area,
  () => {
    queryApi()
  },
  {
    immediate: true
  }
)


// watch(
//   () => theVideoList.value[0]?.cameraIndexCode,
//   (cameraIndexCode) => {
//     if (cameraIndexCode) {
//       currentVideoIndex.value = cameraIndexCode
//       // currentVideoSrc.value = theVideoList.value[0]?.previewURL?.url
//     }
//   },
//   {
//     immediate: true
//   }
// )

// watch(
//   () => currentVideoIndex.value,
//   (cameraIndexCode) => {
//     if (cameraIndexCode) {
//       request({
//         url: '/openapi/hk/camera.php',
//         data: {
//           do: 'getCameraPreview',
//           cameraIndexCode,
//         }
//       }).then(res => {
//         currentVideoSrcs.value = res?.data?.stream.map(({ url }) => url)
//       })
//     } else {
//       currentVideoSrcs.value = undefined
//       timestamp.value = Date.now()
//     }
//   },
//   {
//     immediate: true
//   }
// )

function handleItemClick(item) {
  if(!item) return;
  currentVideoIndex.value = item.xh_id
  currentVideoSrcs.value = [item.xh_m3u8]
}

function handleSwitchClick() {
  currentPage.value = (currentPage.value + 1) % pageNum + 1
  queryApi()
}

function handleGirdClick() {
  router.push({ path: `/grid/${encodeURIComponent(props.area)}` })
}

function handleChartClick() {
  router.push({ path: `/chart/${encodeURIComponent(props.area)}` })
}

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">
      <!-- <video ref="currentVideoRef" class="video-js vjs-theme-city"></video> -->
      <VideoPlayer :key="timestamp" :urls="currentVideoSrcs" :options="{ autoplay: true }"></VideoPlayer>
    </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" @click="handleSwitchClick">
            <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" @click="handleGirdClick">
            <use xlink:href="#icon-Grid"></use>
          </svg>
          <svg class="icon_reserve" aria-hidden="true" @click="handleChartClick">
            <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">
        <template v-if="theVideoList.length">
          <div v-for="item in theVideoList" class="border-4 w-1/4 h-full  overflow-y-hidden cursor-pointer bg-black relative mr-1px"
            @click="handleItemClick(item)" :class="{ 'border-blue-400': item.xh_id === currentVideoIndex }">
            <!-- <VideoPlayer :url="item?.previewURL?.url" /> -->
            <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-dark-900 text-xs">{{ item.xh_name }}</div>
          </div>
        </template>
        <template v-else>
          <el-empty class="w-full" description="没有数据" />
        </template>
      </div>
    </div>

  </div>
</template>