<!-- 预防措施处理单详情页面 -->
<script name="QualityPreventDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import edit from './edit.vue'
import { DETAILURL } from '@/views/quality/agree'
import { downloadFileName, getFiles } from '@/utils/download'
import { exportFile, printContent } from '@/utils/exportUtils'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
import { getBizQualityPreventRecordFile } from '@/api/quality/prevent/index'
const $router = useRouter()
const $route = useRoute()
const close = () => {
  $router.push({
    path: '/prevent/preventhandle',
  })
}
const baseRef = ref()
const showMenu = () => {
  return baseRef?.value?.showMenu === '基本信息'
}
const { proxy } = getCurrentInstance() as any
const file = ref()
const getFile = (fun: any) => {
  getBizQualityPreventRecordFile({
    id: $route.query.id,
    pdf: true,
  }).then((res) => {
    file.value = res.data
    fun(res)
  }).catch(() => {
    fun()
    ElMessage.error('文件获取失败')
  })
}
// 打印
const printFile = () => {
  if (file.value) {
    printContent(getFiles(file.value, 'application/pdf;chartset=UTF-8'))
  }
  else {
    ElMessage.warning('打印失败')
  }
}
// 下载
const downloadFile = () => {
  if (file.value) {
    const data = JSON.parse($route.query.row as string)
    exportFile(file.value, `${data.fileName}.pdf`)
  }
  else {
    ElMessage.warning('下载失败')
  }
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="预防措施处理单">
      <template #btns>
        <el-button type="primary" @click="downloadFile">
          下载
        </el-button>
        <el-button type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div class="base-info-report">
      <edit ref="baseRef" class="base-info-report" :show-base="false" />
      <pdf-file @get-file="getFile" />
      <!-- 展示文件流 -->
      <!-- <div v-show="showMenu()">
        文件流
      </div> -->
    </div>
  </app-container>
</template>

<style lang="scss" scoped>
.base-info-report {
  ::v-deep(.app-container) {
    padding: 0 !important;

    .info-header {
      display: none;
    }

    .info-body {
      display: none;
    }
  }
}
</style>