<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)

const drawCanvas = (printContent, imageSign, imageCode) => {
  console.log('llllllllllll', imageSign)
  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.font = '32px Arial'
  ctx.fillStyle = 'black'
  // 绘制文本
  ctx.fillText(printContent.year, 140, 140)

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

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

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

watch(() => props.printForm, (printContent) => {
  console.log('监听到打印信息有变化')
  console.log('生成二维码的设备id:', printContent.equipmentId)
  if (printContent.equipmentId) {
    const codeUrl = useCreateQr(printContent.equipmentId)
    if (printContent.userId) {
      // 获取签名
      getSignPicture(printContent.userId).then((res) => {
        const imageCode = new Image()
        const imageSign = new Image()
        imageCode.src = codeUrl
        imageSign.src = `data:image/jpeg;base64,${res.data}`
        imageCode.onload = () => {
          nextTick(() => {
            drawCanvas(printContent, imageSign, imageCode)
          })
        }
      })
    }
    else {
      const imageCode = new Image()
      imageCode.src = codeUrl
      imageCode.onload = () => {
        nextTick(() => {
          drawCanvas(printContent, '', imageCode)
        })
      }
    }
  }
}, { 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>