<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Base64 } from 'js-base64';

import { ossInfo } from '#/api/system/oss';

const url = ref('');

const [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: true,
  // onClosed: handleClosed,
  onConfirm: onSubmit,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);

    const { ossId } = modalApi.getData() as { ossId: number };
    if (ossId) {
      const resp = await ossInfo(ossId);
      const ossData = resp[0];
      // ossData.url = (ossData?.url as string).replace(
      //   'http://cdn.hr.antaikeji.top',
      //   '/oss-proxy',
      // );
      const base64 = encodeURIComponent(Base64.encode(ossData.url));
      url.value = `/file-preview/onlinePreview?url=${base64}`;
      // url.value = `http://119.184.127.215:18010/file-preview/onlinePreview?url=${base64}`;
      // url.value = `http://172.16.200.110:8012/onlinePreview?url=${base64}`;
      // console.log('[url.value]', url.value);
    }

    modalApi.modalLoading(false);
  },
});

async function onSubmit() {
  modalApi.close();
}

// async function handleClosed() {
//   await formApi.resetForm();
//   resetInitialized();
// }
// class="size-full"
</script>
<template>
  <BasicModal class="h-[950px] w-[1100px]" title="文件预览">
    <iframe :src="url" class="h-[900px] w-full rounded-[6px] border"></iframe>
  </BasicModal>
</template>
