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

/**
 * 初始化审批弹窗
 * @param printFileName 文件名
 */
function initDialog(printFileName: string) {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getPhotoUrl(printFileName).then((res) => {
    dialogVisible.value = true
    const url = res.data
    pdfUrl.value = res.data
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    loading.close()
    // proxy.$refs.pdf.print()
    // download(url, row.printFileName as string)
  })
}

// 关闭弹窗
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>