<script name="QualityScenePlanDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import edit from './edit.vue'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getFiles } from '@/utils/download'
import pdfFile from '@/views/quality/supervise/record/components/pdfFile.vue'
import { getAnalysisRepFile } from '@/api/quality/review/technology'
const $router = useRouter()
const $route = useRoute()
const close = () => {
  $router.push({
    path: '/qreview/qreviewtechnology',
  })
}
const { proxy } = getCurrentInstance() as any
const file = ref()
const getFile = (fun: any) => {
  getAnalysisRepFile({
    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 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 v-if="proxy.hasPerm('/quality/review/technology/download')" type="primary" @click="downloadFile">
          下载
        </el-button>
        <el-button v-if="proxy.hasPerm('/quality/review/technology/print')" type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div class="base-info-report">
      <edit :show-base="false" />

      <detail-block title="报告内容">
        <el-row :gutter="24" class="marg">
          <el-col :span="24">
            <pdf-file @get-file="getFile" />
          </el-col>
        </el-row>
      </detail-block>
      <!-- 展示文件流 -->
      <!-- <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;
    }

    .header {
      display: none;
    }

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