<template>
  <div class="es-qrcode-box" id="qrcode" ref="qrcode">
    <template v-if="mwidth && mheight">
      <img
        class="es-qrcode-img"
        :width="mwidth"
        :height="mheight"
        ref="qrcodeImg"
        alt="二维码图片"
      />
      <!-- <img
      v-if="logo"
      class="es-qrcode-logo"
      ref="qrcodeLogo"
      :src="logo"
      alt="二维码logo"
    /> -->
      <canvas
        :width="mwidth"
        :height="mheight"
        class="canvas"
        ref="canvas"
      ></canvas>
    </template>
  </div>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
const QRCode = require('qrcode');
export default {
  name: 'EsQrCode',
  props: {
    content: {
      type: String,
      required: true
    },
    logo: String,
    text: String,
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    auto: Boolean,
    option: {
      type: Object,
      default: () => {
        return {
          errorCorrectionLevel: 'H', //纠错等级
          color: {
            dark: '#000000',
            light: '#ffffff'
          }
        };
      }
    }
  },
  computed: {},
  data() {
    return {
      mwidth: 0,
      mheight: 0
    };
  },
  watch: {
    logo: function (val) {
      this.$nextTick(() => {
        this.createQRCode();
      });
    },
    content: {
      immediate: true,
      handler(val) {
        if (val) {
          this.createQRCode();
        }
      }
    }
  },
  created() {},
  mounted() {
    if (this.auto) {
      let h =
        (this.$refs.qrcode.offsetHeight || this.$refs.qrcode.offsetWidth) -
        parseInt(util.getStyle(this.$refs.qrcode, 'padding-top'), 10) -
        parseInt(util.getStyle(this.$refs.qrcode, 'padding-bottom'), 10);
      if (h > 0) {
        this.mwidth = h;
        this.mheight = h;
      }
    } else {
      this.mwidth = this.width;
      this.mheight = this.height;
    }
    this.$nextTick(() => {
      this.createQRCode();
    });
  },
  methods: {
    createQRCode() {
      let qrcodeImg = this.$refs.qrcodeImg;
      //let qrcodeLogo = this.$refs.qrcodeLogo;
      let canvas = this.$refs.canvas;
      let option = util.extend({}, this.option, {
        width: this.mwidth,
        height: this.mheight
      });
      if (!qrcodeImg) {
        return false;
      }
      QRCode.toDataURL(this.content, option, (err, url) => {
        if (this.content && url) {
          qrcodeImg.src = url;
          // 画二维码里的logo// 在canvas里进行拼接
          let ctx = canvas.getContext('2d');
          setTimeout(() => {
            //获取图片
            ctx.drawImage(qrcodeImg, 0, 0, this.mwidth, this.mheight);
            if (this.logo && this.logo.indexOf('.') > -1) {
              let logo = new Image();
              logo.src = this.logo;
              //设置logo大小
              let logoPosition = (this.mwidth - 46) / 2; //logo相对于canvas居中定位
              //设置获取的logo将其变为圆角以及添加白色背景
              /* ctx.fillStyle = "#fff";
							ctx.beginPath();
							let h = 46; //圆角高 10为基数(logo四周白色背景为10/2)
							let w = 46; //圆角宽
							let x = logoPosition - 5;
							let y = logoPosition - 5;
							let r = 5; //圆角半径
							ctx.moveTo(x + r, y);
							ctx.arcTo(x + w, y, x + w, y + h, r);
							ctx.arcTo(x + w, y + h, x, y + h, r);
							ctx.arcTo(x, y + h, x, y, r);
							ctx.arcTo(x, y, x + w, y, r);
							ctx.closePath();
							ctx.fill(); */
              logo.onload = () => {
                ctx.drawImage(logo, logoPosition, logoPosition, 46, 46);
                qrcodeImg.src = canvas.toDataURL();
              };
            } else if (this.text) {
              //设置字体
              let fpadd = 10; //规定内间距
              ctx.font = 'bold 16px Arial';
              let tw = ctx.measureText(this.text).width; //文字真实宽度
              let ftop = (this.mheight - 16) / 2; //根据字体大小计算文字top
              let fleft = (this.mwidth - tw) / 2; //根据字体大小计算文字left
              let tp = 16 / 2; //字体边距为字体大小的一半可以自己设置
              ctx.fillStyle = '#fff';
              ctx.fillRect(fleft - tp / 2, ftop - tp / 2, tw + tp, 16 + tp);
              ctx.textBaseline = 'top'; //设置绘制文本时的文本基线。
              ctx.fillStyle = '#f40';
              ctx.fillText(this.text, fleft, ftop);
            }
            canvas.style.display = 'none';
            qrcodeImg.src = canvas.toDataURL();
            qrcodeImg.style.display = 'inline-block';
          }, 500);
        }
      });
    }
  }
};
</script>
