<script setup>
import { onMounted, ref, watch } from 'vue'
import { useCreateQr } from '@/commonMethods/useCreateQr'
import { listPageApi } from '@/api/system/tool'
import { getPhotoUrl } from '@/api/file'

const props = defineProps({
  width: {
    type: Number,
    default: 300,
  },
  height: {
    type: Number,
    default: 200,
  },
  printForm: {
    type: Object,
  },
})
// 引入qrcode库
const canvasRef = ref(null)

// onMounted(() => {
//   const ctx = canvasRef.value.getContext('2d')
//   // 在这里绘制你的图形或文本
//   ctx.fillStyle = '#cef3eb'
//   ctx.fillRect(0, 0, props.width, props.height)

//   // 设置文本样式
//   ctx.font = '20px Arial'
//   ctx.fillStyle = 'black'
//   ctx.textAlign = 'center'
//   // 绘制文本
//   ctx.fillText('1111111', 20, 20)
// })

// 签名查询数据
const searchQueryAutograph = ref({
  signNo: '', // 编号
  signName: '', // 名称
  signDirector: '', // 负责人
  signUserId: '', // 用户id
  createStartTime: '',
  createEndTime: '',
  limit: 20,
  offset: 1,
  signType: '',
  ids: [],
})

const singPicture = ref()
const url = ref('')
// 获取签名数据
const getAutographList = async (userId) => {
  searchQueryAutograph.value.signUserId = userId // 创建人的签名
  const res = await listPageApi(searchQueryAutograph.value)
  if (res.code === 200) {
    if (res.data.rows.length) {
      singPicture.value = res.data.rows[0].minioFileName
      // getPhotoUrl(singPicture.value).then((res) => {
      //   url.value = res.data
      //   console.log('打印签名图片', url.value)
      // })
    }
    else {
      singPicture.value = ''
    }
  }
}

function convertImageToBase64(url, callback) {
  fetch(url)
    .then(response => response.blob())
    .then((blob) => {
      // 创建一个FileReader对象
      const reader = new FileReader()
      reader.onload = function () {
        callback(reader.result)
      }
      reader.readAsDataURL(blob)
    })
    .catch(error => console.error('Error converting image to Base64:', error))
}

// 使用示例
convertImageToBase64('https://example.com/image.jpg', (base64) => {
  console.log(base64) // 输出图片的Base64编码
})

watch(() => props.printForm, (printContent) => {
  console.log('生成二维码的智能模型id:', printContent.equipmentId)
  const codeUrl = useCreateQr(printContent.equipmentId)
  // const codeUrl = useCreateQr('1745008578843930626')
  // 获取签名
  // getAutographList(printContent.userId).then(() => {
  //   // 获取签名图片的文件
  //   getPhotoUrl(singPicture.value).then((res) => {
  //     // 转换成base64
  //     convertImageToBase64(res.data, (base64) => {
  const imageCode = new Image()
  //       const imageSign = new Image()
  imageCode.src = codeUrl
  //       imageSign.src = base64
  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('C212947893', 140, 100)

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

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

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

    // 人名
    ctx.font = '32px Arial'
    ctx.fillStyle = 'black'
    // 绘制文本
    ctx.fillText(printContent.personName, 140, 180)
    // ctx.fillText('李翔宇', 140, 180)

    ctx.drawImage(imageCode, 420, 20, 160, 160)
    // ctx.drawImage(imageSign, 140, 150, 40, 100)
  }
  // })
  // })
  // })
}, { 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>