<template>
  <div class="dialog">
    <el-dialog
      v-model="modelValue"
      align-center
      :modal="false"
      :show-close="false"
      :z-index="9999"
      destroy-on-close
    >
      <div class="dialog-box">
        <div class="video">
          <HlsPlayer :url="src" />
        </div>
        <!-- <video class="video" ref="videoRef" muted autoplay controls>
          <source type="application/x-mpegURL" />
        </video> -->
        <div class="action-box">
          <div class="action-item">
            <img src="@/assets/images/plus.png" title="焦距变大" @click="handleAction(Z00M_IN)" />
            <span>聚焦</span>
            <img src="@/assets/images/minus.png" title="焦距变小" @click="handleAction(Z00M_OUT)" />
          </div>
          <div class="action-item">
            <img src="@/assets/images/up.png" title="上转" @click="handleAction(UP)" />
            <img src="@/assets/images/down.png" title="下转" @click="handleAction(DOWN)" />
            <img
              class="pause"
              src="@/assets/images/pause.png"
              title="停止操作"
              @click="handleAction(STOP)"
            />
            <img src="@/assets/images/left.png" title="左转" @click="handleAction(LEFT)" />
            <img src="@/assets/images/right.png" title="右转" @click="handleAction(RIGHT)" />
			
          </div>
		  <div class="action-item">
			  <div
			    v-if="isCollect == 1"
			    class="video-follow"
			    @click.stop="handleCollect()"
			    >取消关注
			  </div>
			  <div
			    v-if="isCollect == 0"
			    class="video-unfollow"
			    @click.stop="handleCollect()"
			    >关注
			  </div>
		  </div>
        </div>
      </div>
      <img class="close" src="@/assets/images/close.png" @click="handleClose" />
    </el-dialog>
  </div>
</template>

<script setup>
  import Hls from 'hls.js'
  import { ElMessage } from 'element-plus'
  import {
    postVideoCollectApi
  } from '@/api/monitor'
  import { postVideoControlApi } from '@/api/monitor'
  import pubSub from 'pubsub-js'
  const Z00M_IN = 'ZOOM_IN' // 焦距变大
  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
  const UP = 'UP' // 上转
  const DOWN = 'DOWN' // 下转
  const LEFT = 'LEFT' // 左转
  const RIGHT = 'RIGHT' // 右转
  const STOP = 'STOP' // 停止操作
  let ACTION = '0'
  let command = ref('')

  const props = defineProps({
    src: {
      type: String,
      default: ''
    },
    cameraIndexCode: {
      type: String,
      default: ''
    },
	isCollect:{
		type: Number,
		default: 0
	}
  })
  let colletCond = ref(0)
  let modelValue = defineModel()
  let videoRef = ref()
  let webRtcServer = null
  let hlsRef = null

  watch(
    () => props.isCollect,
    (val) => {
      if (val) {
		  console.log(val,'val 2222222222222222222222')
		  colletCond.value = val
        // setTimeout(() => {
        //   init()
        // }, 1000)
      }else{
		  colletCond.value = 0
	  }
    },
    {
      immediate: true
    }
  )
  // 关注
  const handleCollect = async (id, status, index) => {
	  // console.log(props.isCollect,777788888)
    await postVideoCollectApi({
      cameraIndexCode:props.cameraIndexCode,
      isCollect: props.isCollect == 0 ? 1 : 0
    })
    if (props.isCollect == 0) {
      props.isCollect = 1
    } else {
      props.isCollect = 0
    }
    pubSub.publish('videoCollect', props.cameraIndexCode)
	modelValue.value = false
  }
  const handleAction = async (e) => {
    if (e == STOP) {
      ACTION = '1'
    } else {
      ACTION = '0'
      command.value = e
    }
    await postVideoControlApi({
      command: command.value,
      action: ACTION,
      cameraIndexCode: props.cameraIndexCode
    })
    if (e == STOP) {
      command.value = ''
    }
    ElMessage({
      message: '操作成功',
      type: 'success'
    })
  }
  const handleClose = () => {
    if (hlsRef) {
      hlsRef.destroy()
      hlsRef = null
    }
    modelValue.value = false
  }
  const init = () => {
    hlsRef = new Hls({
      enableWorker: false, // 禁用 Worker 来避免额外的线程
      enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
      cache: true, // 启用缓存
      maxBufferLength: 10, // 最大缓冲长度（秒）
      maxMaxBufferLength: 15, // 缓冲区长度的上限
      maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
    })
    hlsRef.loadSource(props.src)
    hlsRef.attachMedia(videoRef.value)
    hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
      videoRef.value.play()
    })
    hlsRef.on(Hls.Events.ERROR, (event, data) => {
      if (data.fatal) {
        switch (data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            hlsRef.startLoad()
            break
          case Hls.ErrorTypes.MEDIA_ERROR:
            hlsRef.recoverMediaError()
            break
          default:
            hlsRef.destroy()
            break
        }
      }
    })
  }
  
  onMounted(()=>{
	  
  })
</script>

<style scoped lang="scss">
	.video-follow,.video-unfollow {
	  // cursor: pointer;
	  // display: none;
	  // position: absolute;
	  // right: vw(8);
	  // top: vw(8);
	  // z-index: 9999;
	  // margin-left:vw(20);
	  padding: 0 vw(20);
	  height: vh(24);
	  text-align: center;
	  line-height: vh(24);
	  font-weight: 400;
	  font-size: vw(16);
	  color: #ffffff;
	  // background-image: url('@/assets/images/unfollow.png');
	  background-size: 100% 100%;
	}
	.video-item__follow {
	  
	  // background-image: url('@/assets/images/unfollow.png');
	}
  .dialog {
    z-index: 9999;
    .action {
      &-box {
        margin-top: vh(16);
        gap: vw(20);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &-item {
        padding: vw(16);
        display: flex;
        align-items: center;
        background: #0a4190;
        border-radius: vw(8);
        > img {
          cursor: pointer;
          width: vw(34);
          height: auto;
        }
        > span {
          margin: 0 vw(16);
          font-weight: 400;
          font-size: vw(16);
          color: #ffffff;
        }
        .pause {
          margin: 0 vw(10);
        }
      }
    }
    .none {
      position: absolute;
      left: 50%;
      top: 50%;
      width: vw(1814);
      height: vw(980);
      color: #fff;
      font-weight: bold;
      font-size: vw(30);
      transform: translate(-50%, -50%);
      z-index: 999;
    }
    :deep(.el-dialog) {
      position: relative;
      width: vw(1940);
      background: transparent !important;
    }
    .dialog-box {
      padding: vw(40) vw(30) vw(30) vw(30);
      background-image: url('@/assets/images/video-bg.png');
      background-size: 100% 100%;
    }
    :deep(.el-dialog__header) {
      padding-bottom: 0 !important;
    }
    .video {
      width: vw(1814);
      height: vw(980);
      object-fit: contain;
      background-color: #062b57;
    }
    .close {
      cursor: pointer;
      position: absolute;
      right: vw(70);
      top: vw(80);
      width: vw(60);
      z-index: 9999;
    }
  }
</style>
