<!-- 检定数据管理详情 -->
<script lang="ts" setup name="MeasureDataDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import VuePdfEmbed from 'vue-pdf-embed'
import * as pdfjsLib from 'pdfjs-dist'
import templateFormAndTable from './components/templateFormAndTable.vue'
import { useSolveFormData } from './components/useSolveFormData'
import base64Str from './base64'
import useUserStore from '@/store/modules/user'
import { getInfo } from '@/api/business/taskMeasure/measureData'
import Standard from '@/views/equipement/standard/book/components/standard.vue'
import { base64toFile, exportCharts, getChartsFile } from '@/utils/download'
import { UploadFile } from '@/api/file'
import CanvasCom from '@/views/business/taskMeasure/print/components/canvas/canvas.vue'
import CanvasComLimit from '@/views/business/taskMeasure/print/components/canvas/limitInstructionCanvas.vue'
import { printHtml, printImage } from '@/utils/printUtils'
import selectPrintType from '@/views/business/taskMeasure/measureData/dialog/selectPrintType.vue'
const user = useUserStore() // 用户信息
const $router = useRouter() // 关闭页面使用
const $route = useRoute() // 路由参数
const infoId = ref('') // 列表id
const templateFormAndTableRef = ref()
const belongStandardEquipment = ref('') // 检校标准装置
const belongStandardEquipmentName = ref('') // 检校标准装置名称
const itemCategoryName = ref('') // 检定项分类名称
const itemCategoryId = ref('') // 检定项分类id
const printForm = ref<{ [key: string]: string }>({
  manufactureNo: '',
  year: '',
  month: '',
  day: '',
  personName: '',
  equipmentId: '', // 设备id
  userId: '', // 检定员id
  restrictionInstruction: '', // 限用说明
})
const printType = ref('1') // 打印类型 1合格种类标签 2限用说明

const originalRecordFile = ref('') // 原始记录附件
const certificateFile = ref('') // 检定证书附件
// ----------------------------------路由参数--------------------------------------------
if ($route.params.id) {
  infoId.value = $route.params.id as string
}
// -------------------------------------------按钮----------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

// 设置打印内容
const setPrintForm = () => {
  printForm.value = {
    manufactureNo: templateFormAndTableRef.value.sampleList[0].manufactureNo,
    year: (templateFormAndTableRef.value.form.meterIdentify === '合格' || templateFormAndTableRef.value.form.meterIdentify === '限用') ? templateFormAndTableRef.value.form.measureValidDate.slice(0, 4) : templateFormAndTableRef.value.form.traceDate.slice(0, 4),
    month: (templateFormAndTableRef.value.form.meterIdentify === '合格' || templateFormAndTableRef.value.form.meterIdentify === '限用') ? templateFormAndTableRef.value.form.measureValidDate.slice(5, 7) : templateFormAndTableRef.value.form.traceDate.slice(5, 7),
    day: (templateFormAndTableRef.value.form.meterIdentify === '合格' || templateFormAndTableRef.value.form.meterIdentify === '限用') ? templateFormAndTableRef.value.form.measureValidDate.slice(8, 10) : templateFormAndTableRef.value.form.traceDate.slice(8, 10),
    personName: templateFormAndTableRef.value.form.createUserName,
    userId: templateFormAndTableRef.value.form.createUserId,
    equipmentId: templateFormAndTableRef.value.sampleList[0].sampleId,
    restrictionInstruction: templateFormAndTableRef.value.form.restrictionInstruction,
  }
  console.log('打印内容', printForm.value)
}

// 选择打印标签类型
const selectPrintTypeRef = ref()
const threeInfoRef = ref()
const printLabel = () => {
  if (templateFormAndTableRef.value.form.conclusion === '除*外其余所检项目合格') {
    selectPrintTypeRef.value.initDialog(templateFormAndTableRef.value.form.meterIdentify)
  }
  else {
    downloadImage()
  }
}
// 点击确认
const confirmSelectPrintType = (value: string) => {
  printType.value = value
  downloadImage()
}

// -------------------------------------------获取详情信息--------------------------------------------------
// 获取const详情
const fetchInfo = (orderId = '', sampleId = '', dataSource = '') => {
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  getInfo({
    id: infoId.value,
    orderId, // 任务单id
    sampleId, // 被检设备id
    dataSource,
  }).then((res) => {
    useSolveFormData(res, templateFormAndTableRef.value)
    setPrintForm()
    // certificateFile.value = `data:image/jpg;base64,${res.data.constCertificateExcelData}`
    // originalRecordFile.value = `data:application/pdf;base64,${res.data.constRecordExcelData}`
    certificateFile.value = base64Str
    originalRecordFile.value = base64Str
    loading.close()
  })
}

// -------------------------------------------钩子--------------------------------------------------
onMounted(async () => {
  itemCategoryName.value = $route.query.itemCategoryName as string || '' // 检定项分类名称
  itemCategoryId.value = $route.query.itemCategoryId as string || '' // 检定项分类id
  belongStandardEquipment.value = $route.query.belongStandardEquipment as string || ''// 标准装置code
  belongStandardEquipmentName.value = $route.query.belongStandardEquipmentName as string || ''// 标准装置名称
  fetchInfo($route.query.orderId as string, $route.query.sampleId as string, $route.query.dataSource as string)
})

const canvasComponent = ref(null) as any
const canvasComponent1 = ref(null) as any
const canvasLimitInstructionRef = ref(null) as any
const imageUrl = ref('')
const imageUrl2 = ref('')
function downloadImage() {
  if (printType.value === '1') { // 合格种类
    imageUrl.value = canvasComponent.value!.toImage()
    imageUrl2.value = canvasComponent1.value!.toImage()
  }
  else if (printType.value === '2') { // 限用说明
    imageUrl.value = canvasLimitInstructionRef.value!.toImage()
  }
  // printImage([imageUrl.value, imageUrl2.value])
  printImage(imageUrl.value)
}
</script>

<template>
  <app-container class="measure-data">
    <!-- 合格类型打印 -->
    <canvas-com
      v-show="false"
      ref="canvasComponent"
      :width="600"
      :height="200"
      :print-form="printForm"
    />
    <!-- 合格类型打印----这里用来测试批量打印 -->
    <canvas-com
      v-show="false"
      ref="canvasComponent1"
      :width="600"
      :height="200"
      :print-form="printForm"
    />
    <!-- 限用说明标签 -->
    <canvas-com-limit
      v-show="false"
      ref="canvasLimitInstructionRef"
      :width="600"
      :height="200"
      :print-form="printForm"
    />
    <detail-page title="检定数据管理-详情">
      <template #btns>
        <el-button type="primary" @click="printLabel">
          标识打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <template-form-and-table ref="templateFormAndTableRef" page-type="detail" />

    <detail-block title="检定数据">
      <div style="display: flex; padding: 10px 10px 20px 0;box-sizing: border-box;">
        <vue-pdf-embed ref="pdf" style="width: 50%;" :source="certificateFile" class="vue-pdf-embed" />
        <vue-pdf-embed ref="pdf" style="width: 50%;" :source="originalRecordFile" class="vue-pdf-embed" />
      </div>
    </detail-block>
  </app-container>
  <!-- 选择打印类型标签 -->
  <select-print-type ref="selectPrintTypeRef" @confirm="confirmSelectPrintType" />
</template>

<style lang="scss" scoped>
.step {
  line-height: 28px;
  font-size: 20px;
  color: #3d7eff;
  font-weight: bold;
  margin-bottom: 5px;
  width: fit-content;
}
</style>

<style lang="scss">
.fieldtest-record-detail {
  .el-table thead.is-group th.el-table__cell {
    background: #f2f6ff;
  }
}

.measure-data {
  .el-radio__label {
    display: block !important;
  }
}
</style>