<!-- 限用说明标签 -->
<script setup>
import { ref, watch } from 'vue'
import { useTextPrewrap } from './useTextPrewrap'
import { useCreateQr } from '@/commonMethods/useCreateQr'
const props = defineProps({
  width: {
    type: Number,
    default: 550,
  },
  height: {
    type: Number,
    default: 200,
  },
  printForm: {
    type: Object,
  },
})
// 引入qrcode库
const canvasLimitRef = ref(null)

watch(() => props.printForm, (printContent) => {
  console.log('生成二维码的设备id:', printContent.equipmentId)
  if (printContent.equipmentId) {
    const codeUrl = useCreateQr(printContent.equipmentId)
    const imageCode = new Image()
    imageCode.src = codeUrl
    imageCode.onload = () => {
      const ctx = canvasLimitRef.value.getContext('2d')
      // 在这里绘制你的图形或文本
      ctx.fillStyle = 'transparent'
      ctx.fillRect(0, 0, props.width, props.height)

      // 限用说明
      ctx.font = '28px Arial'
      ctx.fillStyle = 'black'
      // 绘制文本
      ctx.fillText('', 140, 100)
      useTextPrewrap(ctx, printContent.restrictionInstruction, 40, 95, 34, 300, 3)
      // 绘制二维码
      ctx.drawImage(imageCode, 420, 20, 160, 160)
    }
  }
}, { deep: true, immediate: true })

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

defineExpose({ toImage })
</script>

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