<!-- 检测结果复查通知单-详情 -->
<script lang="ts" setup name="DetecTIONFormEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import detection from './detection.vue'
import pdfFile from './pdfFile.vue'
import { printPdf } from '@/utils/printUtils'
import { printPage } from '@/api/eqpt/MeasurementBusiness/detection'
import { exportFile, printContent } from '@/utils/exportUtils'
import { getFiles } from '@/utils/download'
const $route = useRoute()
const $router = useRouter()
const ruleFormRef = ref<FormInstance>() // from组件
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  createTime: '', // 创建时间
  createUserId: '', // 创建人id
  createUserName: '', // 创建人名字
  customerId: '', // 委托方id
  customerName: '', // 委托方名称
  deviceModel: '', // 送检设备型号
  deviceName: '', // 送检设备名称
  deviceNo: '', // 送检设备编号
  id: '', // id
  labCode: '', // 实验室代码
  labCodeName: '', // 实验室代码
  noticeDate: '', // 通知日期
  noticeName: '', // 通知单名称
  noticeNo: '', // 通知单编号
  noticeUserId: '', // 通知委托方用户id
  noticeUserName: '', // 通知委托方用户名字
  returnDate: '', // 寄回日期
  submitDate: '', // 送检日期
  updateTime: '', // 更新时间
}) // 表单
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  if ($route.params.type !== 'create') {
    const data = JSON.parse($route.query.row as string)
    ruleForm.value = data
  }
}
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
// 打印
// const print = () => {
//   printPage({ id: $route.query.id, pdf: true }).then((res) => {
//     // pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
//     printPdf(res.data)
//     // exportFile(res.data, '123.pdf')
//   })
// }
// 打印
// const printObj = ref({
//   id: 'form', // 需要打印元素的id
//   popTitle: '', // 打印配置页上方的标题
//   extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
//   preview: false, // 是否启动预览模式，默认是false
//   standard: '',
//   extarCss: '',
// })
// 获取文件
const file = ref()
const getFile = (fun: any) => {
  printPage({
    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('打印失败')
  }
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`检测结果复查通知单-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button type="primary" @click="printFile">
          打印
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''" label-position="right" label-width="120px" class="form" :disabled="$route.path.includes('detail')">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="文件编号" prop="noticeNo">
              <el-input v-model.trim="ruleForm.noticeNo" placeholder="文件编号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="文件名称" prop="noticeName">
              <el-input v-model.trim="ruleForm.noticeName" placeholder="文件名称" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人" props="createUserName">
              <el-input v-model.trim="ruleForm.createUserName" placeholder="创建人" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model.trim="ruleForm.createTime" placeholder="创建时间" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <!-- <detail-block-com><detection :data="ruleForm" /></detail-block-com> -->
    <pdf-file @get-file="getFile" />
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>