<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 bg-dark-50"
      >
        <VideoPlayer
          ref="videoInstance"
          v-if="showVideo"
          :options="(options as VideoJsPlayerOptions)"
          :withToken="withToken"
          :isGBT="isGBT"
          :GBTOption="GBTOption"
        />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { VideoJsPlayerOptions } from 'video.js';
  import VideoPlayer from './video.vue';
  import { getVideoControlStart } from '/@/api/device/videoChannel';
  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
  import { getVideoTypeByUrl } from '/@/components/Video';
  import { AccessMode } from '/@/views/camera/manage/config.data';
  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';

  const emit = defineEmits(['reloadTable', 'register']);

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

  const videoInstance = ref<InstanceType<typeof VideoPlayer>>();

  const videoId = ref<string>();

  const withToken = ref(false);

  const options = reactive<VideoJsPlayerOptions>({
    width: '100%' as unknown as number,
    height: 384 as unknown as number,
    autoplay: true,
  });
  const GBTOption = ref({
    tbDeviceId: '',
    channelId: '',
  });
  const isGBT = ref<boolean>(false);

  const [register, { setModalProps }] = useModalInner(
    async (data: { record: VideoChannelItemType }) => {
      const { record, ifShowGBT = false } = data;
      const { params } = record as Recordable;
      videoId.value = record.id || '';
      isGBT.value = ifShowGBT;
      GBTOption.value.tbDeviceId = params?.deviceId ? params?.deviceId : record?.deviceId;
      GBTOption.value.channelId = params?.channelNo ? params?.channelNo : record?.channelId;
      try {
        setModalProps({ loading: true, loadingTip: '视频加载中...' });
        // getStreamingPlayUrl
        let result: any = null;
        if (record.accessMode === AccessMode.GBT28181 || ifShowGBT) {
          result = await getVideoControlStart({
            deviceId: params?.deviceId ? params?.deviceId : record?.deviceId,
            channelId: params?.channelNo ? params?.channelNo : record?.channelId,
          });
          options.sources = [{ src: result.data.flv, type: getVideoTypeByUrl(result.data.flv) }];
        } else {
          result = await getStreamingPlayUrl(record.id);
          options.sources = [
            { src: result.data.url, type: getVideoTypeByUrl(result.data.url), id: record.id },
          ];
        }
        showVideo.value = true;
      } catch (error) {
      } finally {
        setModalProps({ loading: false });
      }
    }
  );

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

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

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