<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="60rem"
      destroyOnClose
      :height="heightNum"
      @register="register"
      title="视频预览"
      :showOkBtn="false"
      @cancel="handleCancel"
    >
      <div class="flex items-center justify-center w-full h-full min-h-96 video-container">
        <Video
          v-if="showVideo"
          :options="(options as any)"
          :withToken="withToken"
          @on-unmounted="handleCloseFlvPlayUrl"
        />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
  import { getVideoTypeByUrl } from '/@/components/Video';
  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
  import { isRtspProtocol } from '/@/components/Video/src/utils';
  import { VideoJsPlayerOptions } from 'video.js';
  import { useFingerprint } from '/@/utils/useFingerprint';
  import { GetResult } from '@fingerprintjs/fingerprintjs';
  import { AccessMode } from '/@/views/camera/manage/config.data';
  import { Video } from './config';

  const heightNum = ref(800);
  const showVideo = ref(false);

  const playUrl = ref('');

  const withToken = ref(false);

  const fingerprintResult = ref<Nullable<GetResult>>(null);

  const options = reactive<VideoJsPlayerOptions>({
    width: '100%' as unknown as number,
    height: 384 as unknown as number,
    autoplay: true,
  });

  const setSources = (url: string, fingerprintResult: GetResult, id) => {
    const flag = isRtspProtocol(url);
    options.sources = [
      {
        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
        type: getVideoTypeByUrl(url),
        id,
      },
    ];
  };

  const { getResult } = useFingerprint();
  const [register] = useModalInner(
    async (data: { record: CameraModel | StreamingManageRecord }) => {
      const { record } = data;
      const result = await getResult();
      fingerprintResult.value = result;
      if (record.accessMode === AccessMode.ManuallyEnter) {
        if ((record as CameraModel).videoUrl) {
          if (isRtspProtocol((record as CameraModel).videoUrl)) {
            playUrl.value = (record as CameraModel).videoUrl;
            closeFlvPlay(unref(playUrl), result.visitorId);
            withToken.value = true;
          }
          setSources((record as CameraModel).videoUrl, result, record.id);
        }
      } else {
        try {
          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
          setSources(url, result, record.id);
        } catch (error) {}
      }
      showVideo.value = true;
    }
  );

  const handleCloseFlvPlayUrl = () => {
    if (isRtspProtocol(unref(playUrl))) {
      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
    }
  };

  const handleCancel = () => {
    showVideo.value = false;
    withToken.value = false;
  };
</script>

<style lang="less" scoped>
  .video-container:deep(.vben-basic-video-play) {
    min-height: 13rem;
  }

  .video-container:deep(.video-js) {
    min-height: 13rem;
  }
</style>