<template>
  <div class="QrCode-wrap">
    <div id="qrcode" ref="qrcode"></div>
    <el-button
      type="primary"
      v-if="isShow"
      plain
      size="mini"
      style="margin-top:20px"
      @click="savePic"
      >下载</el-button
    >
    <el-button
      type="primary"
      v-else
      plain
      size="mini"
      style="margin-top:20px"
      @click="close"
      >关闭</el-button
    >
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      qrcode: null
    };
  },
  props: {
    isShow: {
      type: Number,
      default: 1
    }
  },
  watch: {},
  mounted() {
    this.qrCode();
  },
  methods: {
    savePic() {
      const myCanvas = document
        .getElementById("qrcode")
        .getElementsByTagName("canvas");
      const a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("images/png");
      a.download = "二维码";
      a.click();
    },
    qrCode() {
      // this.qrcode && this.qrcode.clear()
      this.qrcode = new QRCode("qrcode", {
        width: 150, // 二维码宽度 （不支持100%）
        height: 150, // 二维码高度 （不支持100%）
        colorDark: "#000",
        colorLight: "#fff",
        typeNumber: 4,
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    createCode(url) {
      this.qrcode.clear();
      this.qrcode.makeCode(url);
    },
    close() {
      this.$emit("closePopover");
    }
  }
};
</script>
<style lang="scss" scoped>
.QrCode-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>
