<template>
  <BasicModal
    :width="800"
    :minHeight="600"
    :title="getTitle"
    class="upload-preview-modal"
    v-bind="$attrs"
    @register="register"
    cancel-text="关闭"
    ok-text="下载"
    @ok="handleDownload"
  >
    <!-- <template #insertFooter>
      <a-button type="primary" color="success" @click="handleDownload">下载</a-button>
    </template> -->
    <div class="upload-preview-modal__cnt">
      <iframe
        :id="fileInfo.id"
        class="upload-preview-modal__iframe"
        :src="fileInfo.previewUrl"
        :title="fileInfo.realName"
      />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { downloadByUrl } from '/@/utils/file/download';

  export default defineComponent({
    components: { BasicModal },
    setup() {
      const fileInfo = ref<any>({});
      const getTitle = ref('');
      const [register, { closeModal }] = useModalInner(async data => {
        console.log(
          '🚀 ~ file: UploadPreviewModal.vue:32 ~ const[register,{closeModal}]=useModalInner ~ data:',
          data,
        );
        fileInfo.value = data;
        getTitle.value = `预览-${data.realName}`;
      });
      // watch(
      //   () => props.id,
      //   value => {
      //     console.log('🚀 ~ file: UploadPreviewModal.vue:37 ~ setup ~ value:', value);
      //   },
      //   { immediate: true },
      // );

      // 下载
      function handleDownload() {
        const url = fileInfo.value.absolutePath || '';
        downloadByUrl({ url });
      }

      return {
        fileInfo,
        register,
        closeModal,
        handleDownload,
        getTitle,
      };
    },
  });
</script>
<style lang="less">
  .upload-preview-modal {
    // display: flex;
    &__cnt {
      height: 678px;
    }

    &__iframe {
      width: 100%;
      min-height: 678px;
    }
  }
</style>
