<template>
  <div class="dialog-bg" v-if="show && bgImage && qrcodeUrl">
    <canvas id="canvas" class="img-canvas" width="560" height="996"></canvas>
    <div class="content">
      <img class="box-img" mode="widthFix" id="shareImage" />
      <div class="tips">长按保存至相册，打开朋友圈选取海报转发</div>
      <div class="iconfont icon-guanbi" @click="close"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bgImage: String,
    qrcodeUrl: String,
    show: Boolean,
  },
  data() {
    return {
    };
  },
  created() {},
  methods: {
    drawImage() {
      let _w = 560,
        _h = 996;

      var canvas = document.createElement("canvas");
      canvas.width = _w;
      canvas.height = _h;
      var context = canvas.getContext("2d");

      context.rect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "#fff";
      context.fill();

      var myImage = new Image();
      myImage.width = _w;
      myImage.height = _h;
      myImage.crossOrigin = "Anonymous";
      myImage.src = this.bgImage; //背景图片  你自己本地的图片或者在线图片
      myImage.onload = () => {
        context.drawImage(myImage, 0, 0, _w, _h);

        var myImage2 = new Image();
        myImage2.src = this.qrcodeUrl; //你自己本地的图片或者在线图片
        myImage2.width = 120;
        myImage2.height = 120;
        myImage2.crossOrigin = "Anonymous";

        myImage2.onload = function () {
          context.drawImage(myImage2, 371, 793, 136, 136);
          var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
          var img = document.getElementById("shareImage");
          img.src = base64;
        };
      };
    },
    again() {
      this.$emit("again");
      this.close();
    },
    close() {
      this.$emit("update:show", false);
    },
  },
  watch: {
    show(n) {
      if (n) {
        this.drawImage();
      }
    },
  },
};
</script>

<style scoped>
.img-canvas {
  position: fixed;
  left: 100%;
  top: 0;
  width: 560px;
  height: 996px;
}

.dialog-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.85);
}

.dialog-bg .content {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 60%;
}

.dialog-bg .content .tips {
  color: white;
  font-size: 14px;
  margin-top: 20px;
}

.dialog-bg .content .box-img {
  width: 100%;
}

.dialog-bg .content .icon-guanbi {
  margin: 20px auto 0;
  color: white;
  opacity: 0.8;
  padding: 15px;
  font-size: 28px;
  height: 28px;
  width: 28px;
}
</style>
