<template>
  <div class="z-dialog">
    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
      <!-- <title2 title="核心景区监控" /> -->
	  <div class="no-data" v-if="cond&&!list.length">
		  暂无排队情况
	  </div>
	  <div v-else>
		  <ul class="list" >
		    <li
		      class="item"
		      :style="{ backgroundImage: `url(${primary})` }"
		      v-for="(item, index) in list"
		      :key="index"
		      @click="handleItem(item)"
		    >
		      <div
			  v-if="item.isCollect == 1"
			  class="item-unfollow"
			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">取消关注</div>
		      <div
			  v-if="item.isCollect == 0"
			  class="item-unfollow"
			  @click.stop="handleCollect(item.cameraIndexCode, item.isCollect)">关注</div>

			  <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
		        <source type="application/x-mpegURL" />
		      </video>
		      <p>
		        <span> {{ item.cameraName || item.cameraIndexCode }}</span>
		      </p>
		    </li>
		  </ul>
		  <div class="pagination">
		    <el-pagination
		      v-model:current-page="params.pageNum"
		      :page-size="params.pageSize"
		      :total="total"
		      background
		      layout="prev, pager, next"
		      @current-change="pageNumChange"
		    />
		  </div>
	  </div>


    </el-dialog>
  </div>
  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
</template>

<script setup>
  import { getSpotVideoEvents,getColletListApi } from '@/api/home'
  import { postVideoCollectApi } from '@/api/monitor'

  import primary from '@/assets/images/item-primary.png'

  import Hls from 'hls.js'
  import pubSub from 'pubsub-js'

  let props = defineProps({
    events: {
      type: Object,
      default: {}
    },
  })
  let modelValue = defineModel()
  let isCollect = ref(0)
  let list = ref([])
  let hlsRefs = []
  let total = ref(0)
  let src = ref('')
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
  let isDiy = ref(0)
  let params = reactive({
    pageNum: 1,
    pageSize: 6,
	businessScenicArea:'',
  })

  watch(
    () => modelValue.value,
    (val) => {
      if (val) {
		  cond.value = false
		  params.businessScenicArea = props.events.id
		  list.value = []
        setTimeout(() => {
          getVideoList()
        }, 1000)
      }
    }
  )
  const onVideoCollect = () => {
    pubSub.subscribe('videoCollect', () => {
      clearHlsRefs()
  	  getVideoList()
    })
  }
  const handleItem = (item) => {
	  console.log(item,'iscollect')
    src.value = item.hlsUrl
	isCollect.value = item.isCollect
	isDiy.value = item.isDiy
    cameraIndexCode.value = item.cameraIndexCode
    videoShow.value = true
  }
  const handleCollect = async (id, status) => {
    await postVideoCollectApi({
      cameraIndexCode:id,
      isCollect: status == 0 ? 1 : 0
    })
    clearHlsRefs()
    params.pageNum = 1
    getVideoList()
    pubSub.publish('videoCollect')
  }
  const handleClose = () => {
    clearHlsRefs()
    modelValue.value = false
  }
  const clearHlsRefs = () => {
    if (hlsRefs.length > 0) {
      hlsRefs.map((item) => {
        item.destroy()
      })
      hlsRefs = []
    }
  }
  const pageNumChange = () => {
	  cond.value = false
    clearHlsRefs()
    list.value = []
    getVideoList()
  }
  let cond = ref(false)
  const getVideoList = async () => {
    let res = await getSpotVideoEvents(params)
    list.value = res.data
    total.value = res.total
	setTimeout(()=>{cond.value = true},1500)

    nextTick(() => {
      list.value.forEach(async (item, index) => {
        var video = document.getElementById(`video${index}`)
        const hls = new Hls({
          enableWorker: false, // 禁用 Worker 来避免额外的线程
          enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
          cache: true, // 启用缓存
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
        })
        hls.loadSource(item.hlsUrl)
        hls.attachMedia(video)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play()
        })
        hlsRefs.push(hls)
      })
    })
  }

  onMounted(() => {
	  onVideoCollect()
  })
  onUnmounted(() => {})
</script>

<style scoped lang="scss">
  .z-dialog {
    :deep(.el-dialog) {
      width: vw(2100);
      padding: vw(8);
      background-image: url('@/assets/images/dialog-bg.png') !important;
      background-size: 100% 100%;
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
    }
  }
  .no-data{
	  height:vh(860);
	  line-height: vh(860);
	  text-align: center;
	  font-size:vw(30);
	  color:#02f9fa;
  }
  .list {
    margin-top: vw(30);
    gap: vw(8);
    height: vh(860);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
	padding:vw(10);
    .item {
      position: relative;
      width: 33%;
      height: vh(400);
      padding: vw(12);
	  margin-top:vh(20);
      box-sizing: border-box;
      background-image: url('@/assets/images/item-primary.png');
      background-size: 100% 100%;
      &-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      > p {
        position: absolute;
        bottom: vw(12);
        width: calc(100% - vw(24));
        padding: vw(10) 0;
        background: rgba(4, 30, 69, 0.72);
        > span {
          padding-left: vw(10);
          font-weight: 400;
          font-size: vw(14);
          line-height: vw(14);
          color: #ffffff;
        }
      }
      &-unfollow {
        cursor: pointer;
        display: none;
        position: absolute;
        right: vw(4);
        top: vw(4);
        z-index: 99;
        width: vw(64);
        height: vw(30);
        text-align: center;
        line-height: vw(30);
        font-weight: 400;
        font-size: vw(12);
        color: #ffffff;
        background-image: url('@/assets/images/unfollow.png');
        background-size: 100% 100%;
      }
      &:hover {
        .item-unfollow {
          display: block;
        }
      }
    }
  }
  .pagination {
    padding-top: vw(20);
    margin-right: vw(20);
    padding-bottom: vw(20);
    display: flex;
    justify-content: flex-end;
  }
  .close {
    cursor: pointer;
    position: absolute;
    right: vw(20);
    top: vw(20);
    width: vw(60);
    z-index: 9999;
  }
</style>
