<template>
  <div class="z-dialog">
    <el-dialog :title="props.type=='deal'?'已解除异常':'异常点位告警'" v-model="modelValue" align-center :modal="false" :show-close="false">
      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
	  <div class="no-data" v-if="cond&&!list.length">
		  {{props.type=='deal'?'暂无数据':'暂无异常情况'}}
	  </div>
	  <div v-else>
		  <ul class="list" >
		    <li
		      class="item"
		      :style="{ backgroundImage: `url(${primary})` }"
		      v-for="(item, index) in list"
		      :key="index"
		      @click="handleImage(item)"
		    >
		      <div
			  class="item-title-box"
			 ><div class="item-title">{{ item.analyzeTypeName}}</div><div class="item-num">{{ item.number}}人</div></div>
			  <img style="width: 100%;height: 100%;" :src="item.imgurl || imageEmpty">
		      <p style="display: flex;justify-content: space-between;">
		        <span> {{ item.cameraName || item.cameraIndexCode }}</span>
            <span class="cursorPointer" @click.stop="handleItem(item.cameraIndexCode)">查看监控></span>
		      </p>
		    </li>
		  </ul>
	  </div>
    </el-dialog>
  </div>
  <video-dialog v-model="videoShow" :src="src" :isDiy="isDiy" :isCollect="isCollect" :cameraIndexCode="cameraIndexCode" />
  <image-dialog v-model="imageShow" :src="imgSrc"/>
</template>

<script setup>
  import { getVideoEventApi,getVideoEventObjImgApi,getPreviewUrlSubApi } from '@/api/monitor'

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

  import imageEmpty from '@/assets/images/imgloading.png'
  import pubSub from 'pubsub-js'

  let props = defineProps({
    type: {
      type: String,
      default: 'curr'
    },
    scenicSpotId: {
      type: String,
      default: ''
    },
    events: {
      type: String,
      default: ''
    },
  })
  let modelValue = defineModel()
  let isCollect = ref(0)
  let list = ref([])
  let hlsRefs = []
  let total = ref(0)
  let src = ref('')
  let imgSrc = ref('')
  let imageShow = ref(false)
  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) {
		  params.pageNum = 1
		  cond.value = false
		  params.businessScenicArea = props.events
		  list.value = []
        setTimeout(() => {
          getVideoList()
        }, 1000)
      }
    }
  )
  const onVideoCollect = () => {
    pubSub.subscribe('videoCollect', () => {
      clearHlsRefs()
  	  getVideoList()
    })
  }
  const handleImage = (item) => {
    getVideoEventObjImgApi(item.objId).then(res=>{
      imgSrc.value = res.data.url
      imageShow.value = true
    });
  }
  const handleItem =  async (id) => {
    let {code,data} = await getPreviewUrlSubApi({
      type: 'hls',
      cameraIndexCode:id
    })
    if(code===200){
      src.value = data.url
      isCollect.value = data.isCollect
      isDiy.value = data.isDiy
      cameraIndexCode.value = id
      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 getVideoEventApi(props.scenicSpotId,props.type);
    list.value = res.data
	setTimeout(()=>{cond.value = true},1500)
    nextTick(() => {
      list.value.forEach(async (item, index) => {
        getVideoEventObjImgApi(item.objId).then(res=>{
          list.value[index].imgurl = res.data.url
        });
      })
    })
  }

  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%;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
      margin-top: vw(10);
      text-align: center;
    }
    :deep(.el-dialog__title) {
      color: #fff;
      font-weight: bold;
    }
  }
  .item-title-box{
    font-weight: 400;
    z-index: 99;
    height: vw(50);

    font-size: vw(24);
    color: #ffffff;
    position: absolute;
    left: 3%;

    .item-title{
      padding: vw(10);
      display: inline-block;
      background-image: url('@/assets/images/unfollow.png');
      background-size: 100% 100%;
    }
    .item-num{
      margin-left: vw(6);
      padding: vw(5);
      display: inline-block;
      color: #ffffff;
      background-color:red;
      border-radius: 15%;
      font-weight: bolder;
    }
  }
  .no-data{
	  height:vh(860);
	  line-height: vh(860);
	  text-align: center;
	  font-size:vw(30);
	  color:#02f9fa;
  }
  .cursorPointer{
    cursor: pointer
  }
  .list {
    //margin-top: vw(5);
    gap: vw(8);
    height: vh(860);
    overflow: auto;
    /* 滚动条整体样式 */
    &::-webkit-scrollbar {
      width: vw(4); /* 滚动条的宽度 */
    }
    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: 'transparent'; /* 轨道的背景色 */
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
      border-radius: 5px; /* 滑块的圆角 */
    }
    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%;
      }
    }
  }
  .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>
