<!-- 授权代理委托书详情 -->
<script name="OrderDetailApproved" lang="ts" setup>
import { ElMessage } from 'element-plus'
import { printContent } from '@/utils/exportUtils'
import FilePreview from '@/views/quality/supervise/record/components/pdfFile.vue'
import { exportOrderFile } from '@/api/resource/order'
import { getFiles } from '@/utils/download'

// 从路由中传过来的参数
const id = ref<string>('')

const route = useRoute()
const router = useRouter()

// 逻辑
// 关闭
const resetForm = () => {
  sessionStorage.removeItem('orderInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

// 获取文件流
const file = ref()
const getFile = (fun: any) => {
  exportOrderFile({
    id: route.query.id,
    pdf: true,
  }).then((res: any) => {
    if (res.data.type.includes('json')) {
      ElMessage.error('文件获取失败')
      fun()
      return
    }
    file.value = res.data
    fun(res)
  }).catch(() => {
    fun()
    ElMessage.error('文件获取失败')
  })
}

// 打印
const printClickedHandler = () => {
  if (file.value) {
    printContent(getFiles(file.value, 'application/pdf;chartset=UTF-8'))
  }
  else {
    ElMessage.warning('打印失败')
  }
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  id.value = params.id !== undefined ? params.id : ''
}

onMounted(() => {
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <detail-page title="计量测试站授权（代理）委托书">
      <template #btns>
        <el-button type="primary" @click="printClickedHandler">
          打印
        </el-button>

        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <div style="display: flex;justify-content: center;">
      <file-preview style="width: 70%;margin-top: 10px;" @get-file="getFile" />
    </div>
  </app-container>
</template>