<script name="QualityCheckDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
import { getReviewFormFile } from '@/api/quality/internal/inspect'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getFiles } from '@/utils/download'
const $router = useRouter()
const $route = useRoute()
const close = () => {
  $router.push({
    path: '/internal/internalinspect',
  })
}
const file = ref()
const getFile = (fun: any) => {
  getReviewFormFile({
    id: $route.query.id,
    pdf: true,
  }).then((res) => {
    if (res.data.type.includes('json')) {
      ElMessage.error('文件获取失败')
      fun()
      return
    }
    file.value = res.data
    fun(res)
  }).catch(() => {
    fun()
    ElMessage.error('文件获取失败')
  })
}
const { proxy } = getCurrentInstance() as any
// 打印
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.data 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 v-if="proxy.hasPerm('/quality/internal/inspect/download')" type="primary" @click="downloadFile">
          下载
        </el-button>
        <el-button v-if="proxy.hasPerm('/quality/internal/inspect/print')" type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div class="base-info-report">
      <pdf-file @get-file="getFile" />
    </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>