<!-- 文件预览弹窗 -->
<script lang="ts" setup name="FilePreviewDialog">
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
import { getPhotoUrl } from '@/api/file'
const dialogVisible = ref(false) // 弹窗显示状态
const pdfUrl = ref('') // 打印文件url

/**
 * 初始化审批弹窗
 * @param printFileName 文件名
 */
function initDialog(printFileName: string) {
  getPhotoUrl(printFileName).then((res) => {
    dialogVisible.value = true
    const url = res.data
    pdfUrl.value = res.data
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
  })
}

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
}

// ----------------------- 以下是暴露的方法内容 ----------------------------
defineExpose({ initDialog })
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="文件预览"
    width="80%"
    :before-close="handleClose"
  >
    <!-- pdf预览 -->
    <vue-pdf-embed ref="pdf" :source="pdfUrl" class="vue-pdf-embed" />
    <template #footer>
      <el-button type="info" @click="handleClose">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 样式
</style>