<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      :height="heightNum"
      @register="register"
      title="视频预览"
      @cancel="handleCancel"
      :showOkBtn="false"
    >
      <div class="video-sty">
        <div>
          <videoPlay
            v-if="showVideo"
            ref="video"
            style="display: inline-block; width: 100%"
            v-bind="options"
          />
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
  import { videoPlay } from 'vue3-video-play'; // 引入组件
  import 'vue3-video-play/dist/style.css'; // 引入css
  import { AccessMode } from './config.data';
  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';

  enum MediaType {
    MP4 = 'mp4',
    M3U8 = 'm3u8',
  }

  const heightNum = ref(800);
  const showVideo = ref(false);
  const options = reactive({
    width: '800px',
    height: '450px',
    color: '#409eff',
    muted: false, //静音
    webFullScreen: false,
    autoPlay: true, //自动播放
    currentTime: 0,
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
    title: '', //视频名称
    type: 'm3u8',
    src: '', //视频源
    controlBtns: [
      'audioTrack',
      'quality',
      'speedRate',
      'volume',
      'setting',
      'pip',
      'pageFullScreen',
      'fullScreen',
    ],
  });
  const video: any = ref(null);

  nextTick(() => {
    console.log(video.value);
  });

  const getMediaType = (suffix: string) => {
    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
  };

  const [register] = useModalInner(
    async (data: { record: CameraModel | StreamingManageRecord }) => {
      let reg = /(?:.*)(?<=\.)/;
      const { record } = data;
      if (record.accessMode === AccessMode.ManuallyEnter) {
        if ((record as CameraModel).videoUrl) {
          const type = (record as CameraModel).videoUrl.replace(reg, '');
          showVideo.value = true;
          options.type = getMediaType(type);
          options.src = (record as CameraModel).videoUrl;
          options.autoPlay = true;
        }
      } else {
        try {
          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
          showVideo.value = true;
          options.src = url;
          const type = (url as CameraModel).videoUrl.replace(reg, '');
          options.type = getMediaType(type);
        } catch (error) {}
      }
    }
  );

  const handleCancel = () => {
    //关闭暂停播放视频
    options.src = '';
    video.value.pause();
  };
</script>
<style>
  .video-sty {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>