<template>
  <img ref="qrCodeImg" :src="QRImgUrl" alt="二维码" :width="width" :height="height" />
</template>

<script>
import QRCode from "qrcode";

export default {
  name: 'QrCode',
  props: {
    // 需要生成二维码的内容
    text: {
      type: String,
      default: null,
      required: true
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    },
    // 下载时的文件名前缀
    fileNamePrefix: {
      type: String,
      default: '二维码'
    }
  },
  data() {
    return {
      QRImgUrl: null,
    }
  },
  watch: {
    text(val) {
      this.getQrCode(val);
    }
  },
  created() {
    this.getQrCode(this.text);
  },
  methods: {
    // 获取二维码
    getQrCode(text) {
      let opts = {
        errorCorrectionLevel: "L",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 2,//二维码留白边距
        width: 1024,//宽
        height: 1024,//高
        text: text,//二维码内容
        color: {
          dark: "#333",//前景色
          light: "#fff"//背景色
        }
      };
      // 根据文本生成二维码
      QRCode.toDataURL(this.text, opts, (err, url) => {
        if (err) throw err
        //将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url;
      });
    },
    // 下载二维码
    download(fileName, text) {
      const qrCodeImg = this.$refs.qrCodeImg;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();

      img.onload = () => {
        // 计算合适的文字大小和边距
        const padding = Math.round(img.width * 0.1); // 底部内边距为图片宽度的10%
        const fontSize = Math.round(img.width * 0.05); // 字体大小为图片宽度的5%

        // 设置画布大小为图片大小，如果有文字则增加底部空间
        canvas.width = img.width;
        canvas.height = text ? (img.height + padding * 2) : img.height;

        // 填充白色背景
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制图片到画布
        ctx.drawImage(img, 0, 0);

        // 如果有文字，在底部绘制文字
        if (text) {
          ctx.fillStyle = '#333333';
          ctx.font = `${fontSize}px Arial, "Microsoft YaHei", "微软雅黑"`;
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';

          // 计算文字位置，在底部区域的中心
          const textY = img.height + padding;

          // 绘制文字
          ctx.fillText(text, canvas.width / 2, textY);
        }

        // 创建下载链接
        const link = document.createElement('a');
        link.download = fileName || `${this.fileNamePrefix}_${this.text}.png`;
        link.href = canvas.toDataURL('image/png');

        // 触发下载
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };

      img.src = qrCodeImg.src;
    }
  }
}
</script>
