<template>
  <BasicModal
    v-bind="$attrs"
    width="60rem"
    destroyOnClose
    :height="800"
    @register="register"
    :title="t('deviceManagement.device.videoChannel.preview')"
    :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';
  import { useI18n } from '/@/hooks/web/useI18n';
  const emit = defineEmits(['reloadTable', 'register']);
  const { t } = useI18n();
  const playUrl = ref<Nullable<string>>();
  const options = ref<Nullable<VideoCancelModalParamsType>>();
  const [register, { setModalProps }] = useModalInner(
    async (data: ModalParamsType<VideoCancelModalParamsType>) => {
      const { record } = data;
      try {
        playUrl.value = null;
        options.value = null;
        setModalProps({
          loading: true,
          loadingTip: t('deviceManagement.device.videoChannel.videoLoadding'),
        });
        const { url, type, withToken } = await record.getPlayUrl();
        playUrl.value = url;
        options.value = record;
        options.value.playerProps = {
          ...(options.value?.playerProps || {}),
          streamType: type,
          withToken: withToken,
        };
      } catch (error) {
      } finally {
        setModalProps({ loading: false });
      }
    }
  );

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