<!-- 意见登记表详情 -->
<script name="FileChangeFormDetailApproved" lang="ts" setup>
import { ElLoading, ElMessage } from 'element-plus'
// import * as pdfjsLib from 'pdfjs-dist'
import { exportFile } from '@/utils/exportUtils'
import { printPdf } from '@/utils/printUtils'
import { getBase64 } from '@/utils/download'
import { getStream } from '@/api/resource/fileChange'
const infoId = ref('') // id
const $route = useRoute()
const $router = useRouter()
const pdfUrl = ref('') // pdfurl
const pdfStream = ref() as any // pdf流

// -----------------------------------------按钮--------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
// 导出word
const exportWord = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: infoId.value, pdf: false }).then((res) => {
    exportFile(res.data, '文件更改申请单.doc')
    loading.close()
  })
}

// 导出pdf
const exportPdf = () => {
  exportFile(pdfStream.value, '文件更改申请单.pdf')
}

// 打印
const print = () => {
  const blobUrl = URL.createObjectURL(pdfStream.value)
  printPdf(blobUrl)
}
// -------------------------------------------------------------------------------------------
/**
 * 初始化
 */
function init() {
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.6)',
  })
  getStream({ id: infoId.value, pdf: true }).then((res) => {
    pdfStream.value = new Blob([res.data])
    getBase64(res.data).then((res) => {
      pdfUrl.value = res as string
    })
    // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
    loading.close()
  })
}

onMounted(() => {
  infoId.value = $route.query.id as string
  init()
})
</script>

<template>
  <app-container>
    <detail-page title="文件更改申请单">
      <template #btns>
        <el-button type="primary" @click="exportWord">
          导出word
        </el-button>
        <el-button type="primary" @click="exportPdf">
          导出pdf
        </el-button>
        <el-button type="primary" @click="print">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div style="display: flex;justify-content: center; margin-top: 10px;width: 100%;">
      <file-preview :pdf-url="pdfUrl" style="width: 70%;" />
    </div>
  </app-container>
</template>