<!-- 检定数据管理详情 -->
<script lang="ts" setup name="MeasureDataDetail">
import { ref } from 'vue'
import { ElLoading, ElMessage } from 'element-plus'
import VuePdfEmbed from 'vue-pdf-embed'
import templateFormAndTable from './components/templateFormAndTable.vue'
import { useSolveFormData } from './components/useSolveFormData'
import base64Str from './base64'
import base64Str1 from './base641'
import useUserStore from '@/store/modules/user'
import { getInfo } from '@/api/business/taskMeasure/measureData'
import Standard from '@/views/equipement/standard/book/components/standard.vue'
import { base64ToBlob, base64toFile, downloadFile, exportCharts, getChartsFile, getObjectURL } from '@/utils/download'
import { UploadFile } from '@/api/file'
import excelOreview from '@/components/filePreview/excelOreview.vue'
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() as any// 原始记录附件
const originalRecordFileName = ref('') // 原始记录附件名称
const certificateFile = ref() as any// 检定证书附件
const certificateFileName = 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(async (res) => {
    useSolveFormData(res, templateFormAndTableRef.value)
    setPrintForm()
    // const certificateFileBase64 = `data:application/vnd.ms-excel;base64,${res.data.constCertificateExcelData}`
    // const certificateFileBase64 = base64Str
    // const certificateFileBlob = base64ToBlob(certificateFileBase64)
    // certificateFile.value = certificateFileBlob
    // const originalRecordFileBase64 = `data:application/vnd.ms-excel;base64,${res.data.constRecordExcelData}`
    // const originalRecordFileBlob = base64ToBlob(originalRecordFileBase64)
    // originalRecordFile.value = originalRecordFileBlob
    const fileCertificate = base64toFile(`data:application/vnd.ms-excel;base64,${res.data.constCertificateExcelData}`, `${res.data.sampleName}检定证书`, 'xls')
    certificateFileName.value = `${res.data.sampleName}检定证书`
    certificateFile.value = fileCertificate
    const fileOriginalRecord = base64toFile(`data:application/vnd.ms-excel;base64,${res.data.constRecordExcelData}`, `${res.data.sampleName}原始记录`, 'xls')
    originalRecordFileName.value = `${res.data.sampleName}原始记录`
    originalRecordFile.value = fileOriginalRecord
    loading.close()
  })
}

// 点击下载证书
const handleClickFile = (type: 'certificate' | 'originalRecord') => {
  if (type === 'certificate') {
    downloadFile(certificateFile.value, `${certificateFileName.value}.xls`)
  }
  else {
    downloadFile(originalRecordFile.value, `${originalRecordFileName.value}.xls`)
  }
}

// -------------------------------------------钩子--------------------------------------------------
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;">
        <excel-oreview v-if="certificateFile" style="width: 50%;margin-right: 20px;" :print-file-name="certificateFile" />
        <excel-oreview v-if="originalRecordFile" style="width: 50%;" :print-file-name="originalRecordFile" />
      </div> -->
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="检定证书:">
            <span class="link" @click="handleClickFile('certificate')">{{ certificateFileName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原始记录:">
            <span class="link" @click="handleClickFile('originalRecord')">{{ originalRecordFileName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="color: red;font-size: 11px;">
        ***注意：点击证书名称进行下载查看证书***
      </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;
}

.link {
  color: #5da0ff;
  text-decoration: underline;
  cursor: pointer;
  margin-right: 8px;
}
</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>