<template>
  <div class="x-share-box">
    <div class="x-share-qrcode">
      <div class="share-qrcode__box">
        <img :src="qrImg" alt="">
      </div>
      <p class="qr-notice" v-show="qrImg">分享步骤：长按海报--发送给朋友</p>
    </div>
    <div class="share-qrcode__box--static">
      <img src="../assets/share-bg.jpg" alt="" class="bg">
      <div class="qr-user">
        <img src="../assets/default.png"
             class="head">
        <p class="name">Mr.Si...</p>
      </div>
      <div class="qr-img"></div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      qrImg: "",
    }
  },
  async mounted() {
    new QRCode(document.querySelector(".share-qrcode__box--static .qr-img"), {
        text: '//www.baidu.com',
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: 2
      });
    this.$Indicator.open("正在生成中....");
    this.$nextTick(() => {
      html2canvas(document.querySelector(".share-qrcode__box--static ")).then(canvas => {
        this.$Indicator.close();
        this.$Toast("分享海报生成成功！");
        this.qrImg = canvas.toDataURL("image/jpeg");
        document.querySelector(".share-qrcode__box--static ").remove();
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.x-share-box {
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.x-share-qrcode {
  background: linear-gradient(to bottom, rgba(255, 158, 100, .2), rgba(255, 26, 26, .2));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: scroll;

  .qr-notice {
    text-align: center;
    font-size: .28rem;
    color: #ea4a38;
  }
}

.share-qrcode__box,
.share-qrcode__box--static {
  position: relative;
  font-size: 0;

  .bg {
    width: 100%;
  }

  .qr-img {
    position: absolute;
    left: 1.4rem;
    bottom: 1.8rem;
    width: 100px;
    height: 100px;
  }
}

.share-qrcode__box {
  margin: .4rem .2rem .6rem;
  box-shadow: 0 0.16rem 0.52rem 0 rgba(255, 66, 40, .32);

  img {
    width: 100%;
  }
}

.share-qrcode__box--static {
  position: absolute;
  z-index: -1;

  .qr-user {
    position: absolute;
    top: .3rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .32rem;
    font-weight: bold;
    text-align: center;

    .head {
      width: 50px;
      height: 50px;
    }

    .name {
      line-height: 1;
    }
  }
}
</style>
