<!-- 标志打印详情 -->
<script name="BusinessTaskMeasurePrintDetail" lang="ts" setup>
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import ThreeInfo from './components/label/threeInfo.vue'
import type { IEquipmentList } from './print-interface'
import printLimitInstruction from './components/label/labelLimitInstruction.vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { add, updateLabelPrint } from '@/api/business/measure/print'
import { printImage } from '@/utils/printUtils'
import CanvasCom from '@/views/business/taskMeasure/print/components/canvas/canvas.vue'
import CanvasComLimit from '@/views/business/taskMeasure/print/components/canvas/limitInstructionCanvas.vue'
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 字典
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const pageType = ref('') // 页面类型
const $route = useRoute()
const $router = useRouter()
const printForm = ref() // 打印内容
const printType = ref('1')
// ----------------------------------路由参数--------------------------------------------
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  console.log(pageType.value)

  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ---------------------------------------------左侧表格-------------------------------------------
const list = ref<IEquipmentList[]>([]) // 左侧设备表格数据
const checkoutList = ref([]) as any // 选中
// 表头
const columns = ref<TableColumn[]>([
  { text: '设备名称', value: 'equipmentName', align: 'center' },
  { text: '型号', value: 'model', align: 'center' },
  { text: '出厂编号', value: 'manufactureNo', align: 'center' },
  { text: '计量标识', value: 'meterIdentifyName', align: 'center' },
])
// 选中
const handleSelectionChange = (e: any) => {
  if (!e[0].meterIdentifyName) {
    ElMessage.warning('无标志类型, 不可打印')
    return false
  }
  checkoutList.value = e
  console.log(checkoutList.value)

  printForm.value = {
    manufactureNo: e[0].manufactureNo, // 出厂编号
    // 合格、限用使用 检定有效期，其他使用 测试、校准或检定日期
    year: (e[0].meterIdentifyName === '合格' || e[0].meterIdentifyName === '限用') ? e[0].measureValidDate ? dayjs(e[0].measureValidDate).format('YYYY-MM-DD').slice(0, 4) : '' : dayjs(e[0].checkDate).format('YYYY-MM-DD').slice(0, 4),
    month: (e[0].meterIdentifyName === '合格' || e[0].meterIdentifyName === '限用') ? e[0].measureValidDate ? dayjs(e[0].measureValidDate).format('YYYY-MM-DD').slice(5, 7) : '' : dayjs(e[0].checkDate).format('YYYY-MM-DD').slice(5, 7),
    day: (e[0].meterIdentifyName === '合格' || e[0].meterIdentifyName === '限用') ? e[0].measureValidDate ? dayjs(e[0].measureValidDate).format('YYYY-MM-DD').slice(8, 10) : '' : dayjs(e[0].checkDate).format('YYYY-MM-DD').slice(8, 10),
    personName: '', // 检定员
    userId: '', // 检定员
    equipmentId: e[0].equipmentId, // 设备id
    restrictionInstruction: e[0].limitInstruction, // 限用说明
    meterIdentify: e[0].meterIdentify, // 计量标识
    meterIdentifyName: e[0].meterIdentifyName, // 计量标识名称
  }
  console.log('打印内容', printForm.value)
}
// -----------------------------------------按钮--------------------------------------------------
// 关闭新增页面的回调
const close = () => {
  $router.back()
}
const threeInfoRef = ref()
const canvasComponent = ref()
const canvasLimitInstructionRef = ref()

// 增加打印记录
const addLabelPrint = () => {
  const params = {
    ...checkoutList.value[0],
    identifyType: checkoutList.value[0].meterIdentify, // 计量标识\标志类型
    deviceName: checkoutList.value[0].equipmentName, // 设备名称
    deviceNo: checkoutList.value[0].equipmentNo, // 设备名称
    deviceId: checkoutList.value[0].equipmentId, // 设备id
    deviceType: '1', // 设备类型(字典code，受检设备/设备台账)
    checkDate: '', // 测试、校准或检定日期
    deptId: checkoutList.value[0].deptId, // 使用部门id
    deptName: checkoutList.value[0].deptName, // 使用部门
    limitInstruction: checkoutList.value[0].limitInstruction, // 限用说明
    manufactureNo: checkoutList.value[0].limitInstruction, //	出厂编号
    manufacturer: checkoutList.value[0].manufacturer, //	生产厂家
    measurePerson: checkoutList.value[0].measurePersonName, //	检定员名字
    measurePersonId: checkoutList.value[0].measurePersonId, //	检定员id
    measureValidDate: checkoutList.value[0].certificateValid ? dayjs(checkoutList.value[0].certificateValid).format('YYYY-MM-DD HH:mm:ss') : checkoutList.value[0].certificateValid, //	检定有效期（使用的是受检设备的证书有效期）
    model: checkoutList.value[0].model, //	规格型号
    recordNo: '', 	//	记录编号
    // traceCompany: checkoutList.value[0].companyName, //	委托单位（使用的是受检设备的所在单位）
    traceCompany: '', //	委托单位（使用的是受检设备的所在单位）
    id: '',
  }
  console.log('------', pageType.value)

  if (pageType.value === 'add') {
    add(params).then((res) => {
      if (res.code === 200) {
        ElMessage.success('新增打印记录成功')
      }
    })
  }
  else if (pageType.value === 'edit') {
    updateLabelPrint({ id: checkoutList.value[0].id })
  }
}

// 点击打印按钮
const handlePrint = () => {
  if (!checkoutList.value.length) {
    ElMessage.warning('请选中')
    return false
  }
  let imageUrl = ''
  if (printType.value === '1') { // 合格种类
    imageUrl = canvasComponent.value!.toImage()
  }
  else if (printType.value === '2') { // 限用说明
    imageUrl = canvasLimitInstructionRef.value!.toImage()
  }
  console.log('生成的打印canvas图片', imageUrl)

  printImage(imageUrl)
  addLabelPrint()
}

// -----------------------------------------钩子--------------------------------------------------
const printMenu = {
  测试: {
    title: '测试',
    backgroundColor: '#970000',
    dateTitle: '测试日期',
    personTitle: '测试人',
  },
  封存: {
    title: '编号',
    backgroundColor: '#7000ff',
    dateTitle: '封存日期',
    personTitle: '批准人',
  },
  合格: {
    title: '编号',
    backgroundColor: '#009000',
    dateTitle: '有效期至',
    personTitle: '检定员',
  },
  禁用: {
    title: '编号',
    backgroundColor: '#ff2a00',
    dateTitle: '禁用日期',
    personTitle: '批准人',
  },
  停用: {
    title: '编号',
    backgroundColor: '#ff7e00',
    dateTitle: '停用日期',
    personTitle: '检定员',
  },
  限用: {
    title: '编号',
    backgroundColor: '#00a8ff',
    dateTitle: '有效期至',
    personTitle: '检定员',
  },
  校准: {
    title: '编号',
    backgroundColor: '#002aff',
    dateTitle: '校准日期',
    personTitle: '校准人',
  },
  在用: {
    title: '编号',
    backgroundColor: '#41b883',
    dateTitle: '有效期至',
    personTitle: '使用人',
  },
} as any

onMounted(() => {
  list.value = JSON.parse($route.query.equipmentList as string)
  console.log('0000000000000000')
  console.log(list.value)
})
</script>

<template>
  <app-container class="label-print">
    <detail-page v-loading="loading" :title="`标识打印-${textMap[pageType]}`">
      <template #btns>
        <el-button type="primary" @click="handlePrint">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
    </detail-page>
    <el-row :gutter="20">
      <!-- 左侧表格 -->
      <el-col :span="12">
        <detail-block title="" style="padding-bottom: 20px;">
          <normal-table
            :data="list"
            :columns="columns"
            :is-showmulti-select="false"
            :is-multi="false"
            :max-height="660"
            :pagination="false"
            @multi-select="handleSelectionChange"
          >
            <!-- 序号 -->
            <template #preColumns>
              <el-table-column label="#" width="55" align="center" fixed>
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </detail-block>
      </el-col>
      <el-col :span="12">
        <detail-block title="" style="padding-bottom: 20px;display: flex;justify-content: center;">
          <div v-if="checkoutList.length">
            <el-form-item v-if="printForm.meterIdentifyName === '限用'" label="打印类型:" style="display: flex;justify-content: center;align-items: center;">
              <el-radio-group v-model="printType">
                <el-radio label="1" size="large">
                  限用
                </el-radio>
                <el-radio label="2" size="large">
                  限用说明
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <three-info
              ref="threeInfoRef"
              :manufacture-no="checkoutList[0].manufactureNo"
              :title="checkoutList[0].meterIdentifyName"
              :date="printForm.year ? `${printForm.year}年${printForm.month}月${printForm.day}日` : ''"
              :date-title="printMenu[checkoutList[0].meterIdentifyName].dateTitle"
              :person-title="printMenu[checkoutList[0].meterIdentifyName].personTitle"
              :background-color="printMenu[checkoutList[0].meterIdentifyName].backgroundColor"
            />
            <print-limit-instruction
              v-show="printForm.meterIdentifyName === '限用'"
              :manufacture-no="checkoutList[0].manufactureNo"
              style="margin-top: 20px;"
              :limit-instruction="printForm.restrictionInstruction"
            />
            <canvas-com
              v-show="false"
              ref="canvasComponent"
              :width="600"
              :height="200"
              :print-form="printForm"
            />
            <!-- 限用说明标签 -->
            <canvas-com-limit
              v-show="false"
              ref="canvasLimitInstructionRef"
              :width="600"
              :height="200"
              :print-form="printForm"
            />
          </div>
        </detail-block>
      </el-col>
    </el-row>
  </app-container>
</template>

<style lang="scss">
.label-print {
  .el-radio__label {
    display: block !important;
  }
}
</style>