<!-- 限用说明标签 -->
<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)
  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 })

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

defineExpose({ toImage })
</script>

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