<template>
  <BasicModal
    v-bind="$attrs"
    width="60rem"
    destroyOnClose
    :height="800"
    @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 :play-url="playUrl" :options="options" />
    </div>
  </BasicModal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import VideoPlayer from './video.vue';
  import { VideoCancelModalParamsType } from '/@/views/device/list/cpns/tabs/VideoChannel/config';
  const emit = defineEmits(['reloadTable', 'register']);

  const playUrl = ref();
  const options = ref<VideoCancelModalParamsType>();
  const [register, { setModalProps }] = useModalInner(
    async (data: ModalParamsType<VideoCancelModalParamsType>) => {
      const { record } = data;
      try {
        setModalProps({ loading: true, loadingTip: '视频加载中...' });
        const { url, type } = await record.getPlayUrl();

        playUrl.value = url;
        options.value = record;
        options.value.playerProps = {
          ...(options.value?.playerProps || {}),
          streamType: type,
        };
      } catch (error) {
      } finally {
        setModalProps({ loading: false });
      }
    }
  );

  const handleCancel = () => {
    emit('reloadTable');
  };
</script>