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

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

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

import { urlToBase64 } from '../../../utils/file/base64Conver';

// const emit = defineEmits<{
//   success: [];
// }>();
// const formData = ref<LaborCostApi.LaborCost>();

// const formSchema: VbenFormSchema[] = [
//   {
//     component: 'DatePicker',
//     fieldName: 'recordDate',
//     label: '记录时间',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'ossId',
//     label: '文件ID',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'fileKey',
//     label: '文件Key',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'remark',
//     label: '备注',
//     rules: 'required',
//   },
// ];

// const [BasicForm, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full',
//     },
//     formItemClass: 'col-span-2',
//     labelWidth: 90,
//   },
//   schema: formSchema,
//   showDefaultActions: false,
//   wrapperClass: 'grid-cols-2',
// });

// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
//   {
//     initializedGetter: defaultFormValueGetter(formApi),
//     currentGetter: defaultFormValueGetter(formApi),
//   },
// );
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];
      url.value = `http://119.184.127.215:8012/onlinePreview?url=${encodeURIComponent(urlToBase64(ossData.url))}`;
      // console.log('[url.value]', url.value);
      // formData.value = data;
      // await formApi.setValues(formData.value);
    }
    // await markInitialized();

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

async function onSubmit() {
  modalApi.close();
  // const { valid } = await formApi.validate();
  // if (valid) {
  //   modalApi.lock();
  //   const data = await formApi.getValues<LaborCostApi.LaborCost>();
  //   try {
  //     await (formData.value?.id
  //       ? apiUpdate({ id: formData.value.id, ...data })
  //       : apiAdd(data));
  //     resetInitialized();
  //     emit('success');
  //     modalApi.close();
  //   } finally {
  //     modalApi.unlock();
  //   }
  // }
}

// 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>
