<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      destroyOnClose
      :height="heightNum"
      @register="register"
      title="视频预览"
      :showOkBtn="false"
      @cancel="handleCancel"
    >
      <div
        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52 video-container"
      >
        <BasicVideoPlay v-if="showVideo" :options="options" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
  import { AccessMode } from './config.data';
  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
  import { VideoJsPlayerOptions } from 'video.js';

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

  const setSources = (url: string) => {
    options.sources = [
      {
        src: url,
        type: getVideoTypeByUrl(url),
      },
    ];
  };

  const [register] = useModalInner(
    async (data: { record: CameraModel | StreamingManageRecord }) => {
      const { record } = data;
      if (record.accessMode === AccessMode.ManuallyEnter) {
        if ((record as CameraModel).videoUrl) {
          setSources((record as CameraModel).videoUrl);
        }
      } else {
        try {
          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
          setSources(url);
        } catch (error) {}
      }
      showVideo.value = true;
    }
  );

  const handleCancel = () => {
    showVideo.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>