<!-- 证书预览 -->
<script lang="ts" setup name="certificateReportRetrieval">
import VuePdfEmbed from 'vue-pdf-embed'
import { getPdfStream } from '@/api/system/tool'
import { getBase64 } from '@/utils/download'
// 初始化
const pdfUrl = ref()
const dialogVisible = ref(false)
const loading = ref(true)
const initDialog = (fileName: string) => {
  dialogVisible.value = true
  loading.value = true
  getPdfStream(fileName).then((res) => {
    getBase64(res.data).then((res) => {
      pdfUrl.value = res as any
    })
    loading.value = false
  })
}
defineExpose({ initDialog })
</script>

<template>
  <el-dialog v-model="dialogVisible" title="证书预览" width="80%" append-to-body>
    <div v-loading="loading" style="margin: 0 auto;">
      <vue-pdf-embed id="print-page" ref="pdf" :source="pdfUrl" class="vue-pdf-embed" />
    </div>
    <template #footer>
      <el-button type="primary" @click="() => dialogVisible = false">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.short-input {
  width: 160px;
}
</style>