<script setup>
import { onMounted, ref, watch } from 'vue'
import { useCreateQr } from '@/commonMethods/useCreateQr'
import { getSignPicture, listPageApi } from '@/api/system/tool'
import { getPhotoUrl } from '@/api/file'
const props = defineProps({
  width: {
    type: Number,
    default: 550,
  },
  height: {
    type: Number,
    default: 200,
  },
  printForm: {
    type: Object,
  },
})
// 引入qrcode库
const canvasRef = ref(null)

watch(() => props.printForm, (printContent) => {
  // console.log('监听到打印信息有变化')
  // console.log('生成二维码的智能模型id:', printContent.equipmentId)
  if (printContent.equipmentId) {
    const codeUrl = useCreateQr(printContent.equipmentId)
    if (!printContent.userId) { return }
    // const codeUrl = useCreateQr('1743119306968838146')
    // 获取签名
    getSignPicture(printContent.userId).then((res) => {
      const imageCode = new Image()
      const imageSign = new Image()
      imageCode.src = codeUrl
      imageSign.src = `data:image/jpeg;base64,${res.data}`
      // console.log('签名图片', imageSign.src)
      // console.log('二维码图片', codeUrl)
      imageCode.onload = () => {
        const ctx = canvasRef.value.getContext('2d')
        // 在这里绘制你的图形或文本
        ctx.fillStyle = 'transparent'
        ctx.fillRect(0, 0, props.width, props.height)
        ctx.clearRect(0, 0, props.width, props.height)
        // 出厂编号
        ctx.font = '32px Arial'
        ctx.fillStyle = 'black'
        // 绘制文本
        ctx.fillText('', 140, 100)
        ctx.fillText(printContent.manufactureNo, 140, 100)
        // ctx.fillText('220215934', 140, 100)

        // 年
        ctx.font = '32px Arial'
        ctx.fillStyle = 'black'
        // 绘制文本
        ctx.fillText(printContent.year, 140, 140)
        // ctx.fillText('2026', 140, 140)

        // 月
        ctx.font = '32px Arial'
        ctx.fillStyle = 'black'
        // 绘制文本
        ctx.fillText(printContent.month, 240, 140)
        // ctx.fillText('05', 243, 140)

        // 日
        ctx.font = '32px Arial'
        ctx.fillStyle = 'black'
        // 绘制文本
        ctx.fillText(printContent.day, 300, 140)
        // ctx.fillText('19', 304, 140)

        if (!imageSign) { // 没有签名图片
        // 人名
          ctx.font = '32px Arial'
          ctx.fillStyle = 'black'
          // 绘制文本
          ctx.fillText(printContent.personName, 140, 180)
          // ctx.fillText('李翔宇', 140, 180)
        }
        else {
          ctx.drawImage(imageSign, 140, 140, 140, 60)
        }

        ctx.drawImage(imageCode, 420, 20, 160, 160)
      }
    })
  }
}, { deep: true, immediate: true })

function toImage() {
  const canvas = canvasRef.value
  return canvas.toDataURL('image/png')
}

defineExpose({ toImage })
</script>

<template>
  <canvas ref="canvasRef" :width="width" :height="height" />
</template>