<script setup>
import { ref,defineEmits } from "vue";
import QRCode from "qrcode";

const imageURL = ref(null);
const canvasWidth = 256;
const canvasHeight = 300; // 假设二维码下方有足够的空间来添加文字
const qrCodeCanvas = ref(null); // 如果你需要引用canvas元素,可以保留这个ref

 
const emits = defineEmits(['qrCodeGenerated']);  

const cancel= function cancel() {
  imageURL.value = null;
}

const generateQRCodeWithTextAndNotifyParent = async function generateQRCodeWithText(text,qrText) {
  // 创建一个新的canvas元素(如果你直接在模板中使用了canvas,则不需要这一步)
  const canvas = document.createElement("canvas");
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  const ctx = canvas.getContext("2d");

  // 首先绘制二维码
  const qrCodeImage = new Image();
  qrCodeImage.onload = () => {
  ctx.drawImage(qrCodeImage, 0, 0, canvasWidth, canvasWidth);

    // 绘制文字
    ctx.font = "24px Arial";
    ctx.fillStyle = "#000";
    ctx.textAlign = "center";
    ctx.fillText(qrText, canvasWidth / 2, canvasWidth + 30); // 假设文字距离二维码底部有20px的间隔

    // 将canvas内容转换为图像URL
    imageURL.value = canvas.toDataURL("image/png");
    emits('qrCodeGenerated', imageURL.value);
    Download(qrText);
  };
  // 生成二维码的DataURL
  const qrCodeDataUrl = await QRCode.toDataURL(text, {
    errorCorrectionLevel: "H",
    width: canvasWidth,
    margin: 1
  });
  
  // 设置二维码图像的src并等待它加载
  qrCodeImage.src = qrCodeDataUrl;

}

//原来方式
const Download = function Download(text) {
  // 创建一个a标签来触发下载
  const link = document.createElement("a");
  link.href = imageURL.value;
  link.download = text+".png"; // 设置下载文件的名称
  link.click();
}
//改版方式
// const Download = function Download(text) {
//   // 将 data URL 转换为 Blob
//   const arr = imageURL.value.split(',');
//   const mime = arr[0].match(/:(.*?);/)[1];
//   const bstr = atob(arr[1]);
//   let n = bstr.length;
//   const u8arr = new Uint8Array(n);
//   while (n--) {
//     u8arr[n] = bstr.charCodeAt(n);
//   }
//   const blob = new Blob([u8arr], { type: mime });

//   // 创建临时 URL
//   const url = URL.createObjectURL(blob);
//   const link = document.createElement("a");
//   link.href = url;
//   link.download = text + ".png";
//   link.click();

//   // 释放内存
//   URL.revokeObjectURL(url);
// }

// 暴露给模板或父组件的方法  
defineExpose({  
  generateQRCodeWithTextAndNotifyParent,Download,cancel
});
</script>  
    
  <style scoped>
/* 你可以在这里添加一些样式,但在这个例子中我们主要关注canvas和下载功能 */
</style>