<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('生成二维码的设备id:', printContent.equipmentId)
  const codeUrl = useCreateQr(printContent.equipmentId)
  // 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.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, 150, 100, 64)
      }

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

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

defineExpose({ toImage })
</script>

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