<template>
  <div class="monitor-dialog" v-if="dataState.currentMonitor">
    <div class="header">
      <div class="title">{{ dataState.deviceName }}</div>
      <div class="close" @click="closeHandle">
        <CloseOutlined />
      </div>
    </div>
    <div class="content">
      <video
        class="monitor-video"
        controls="controls"
        autoplay="autoplay"
        x-webkit-airplay="true"
        x5-video-player-fullscreen="true"
        preload="auto"
        playsinline="true"
        webkit-playsinline
        x5-video-player-typ="h5"
        ref="monitorVideo"
      >
      </video>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, shallowReactive, defineEmits,ref,onBeforeUnmount } from 'vue';
  import eventBus from '/@/utils/map/eventBus'; // 事件总线
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { getChannels } from '../api/map.ts';
  import hlsjs from 'hls.js'

  const dataState = shallowReactive({
    currentMonitor: null,
    deviceName: '', // 设备名称
    channelUrl: '', // 隧道地址
  });

  const emit = defineEmits(['close']);

  const monitorVideo=ref(null); // dom 引用
  let hlsjsVideo =null ; // 视频播放组件

  /**
   * 显示视频对话框
   */
  const showMonitor = (item) => {
    dataState.currentMonitor = item;
    dataState.deviceName = item.deviceName;

    // 获取播放通道
    getMonitorChannels();
  };

  /**
   *
   */
  const closeHandle = () => {
    dataState.currentMonitor = null;
    dataState.channelUrl = '';
    dataState.deviceName = '';

    // 取消视频播放
    if(monitorVideo.value){
        monitorVideo.value.pause();
        hlsjsVideo.destroy();
        hlsjsVideo = null;
    }
    emit('close');
  };

  function getMonitorChannels() {
    let device = dataState.currentMonitor;
    let deviceId = device.deviceId;
    getChannels({
      deviceId: deviceId,
    }).then((res) => {
      let channels = res[0];
      dataState.channelUrl = channels.hls;

      // 显示视频
      showChannel();
    });
  }

  /**
   * 显示视频隧道
   */
  function showChannel(){
    if (hlsjs.isSupported()) {
    hlsjsVideo = new hlsjs();
    hlsjsVideo.loadSource(dataState.channelUrl);//设置播放路径
    hlsjsVideo.attachMedia(monitorVideo.value);//解析到video标签上

    hlsjsVideo.on(hlsjs.Events.MANIFEST_PARSED, () => {
        monitorVideo.value.play();
    });
    hlsjsVideo.on(hlsjs.Events.ERROR, (event, data) => {
        console.log(event, data);
        // 监听出错事件
        console.log("加载失败");
    });
    } 
  }

  onMounted(() => {
    eventBus.on('showMonitor', showMonitor);
  });

  onBeforeUnmount(()=>{
    closeHandle();
  })
</script>
<style lang="less" scoped>
  .monitor-dialog {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 120px;
    width: 500px;
    height: 400px;
    border: 1px solid #aaa;
    border-radius: 8px;
    background: rgba(9, 62, 122, 0.9);
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-direction: column;

    .header {
      font-size: 18px;
      color: #fff;
      padding: 0 0 10px 0;

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }
    }
    .content {
      flex: 1;

      video {
        width: 100%;
        height: 100%;
        object-fit: fill
      }
    }
  }
</style>