<template>
  <div v-if="show">
    <div class="userShare" id="captureId">
      <div class="userShareImg" v-show="firstFlag">
        <div class="shareImg">
          <img
            class="itemimg"
            :src="getImgBase64(firstImg + item.images[0].imgUrl)"
            alt
          />
          <div class="shareJoin">
            <div>
              <div class="shareJoinname">{{ shopName }}</div>
              <div class="shareJoindiv">
                我在参加
                <span class="shareJoinspan">买家秀活动</span>
                <br />快来为我点赞
              </div>
            </div>
            <img class="shareJoinimg" :src="dataURL" alt />
          </div>
        </div>
      </div>
      <div style="position:relative;z-index:3002">
        <img :src="dataURL1" alt="" />
      </div>
    </div>
    <div v-if="this.id == 0" class="share">
      <div>长按图片保存到相册</div>
      <div @click="clickShare">点击此处分享</div>
    </div>
    <div v-else class="shareTextImg">长按保存到相册</div>
    <div class="closeBtn1" @click="btnClose"></div>
  </div>
</template>
<script>
import { allShare } from "../../../js/share.js";
var QRCode = require("qrcode");
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      firstFlag: true,
      shopName: "",
      dataURL: "",
      firstImg: "https://img10.360buyimg.com/imgzone/",
      shopImg: "",
      dataURL1: "",
    };
  },
  created() {
    this.initdata();
  },
  mounted() {
    this.$nextTick(function () {
      setTimeout(() => {
        this.toImg();
      }, 50);
    });
  },

  methods: {
    toImg() {
      html2canvas(document.querySelector("#captureId"))
        .then((canvas) => {
          let imgUrl = canvas.toDataURL("image/jpg");
          this.dataURL1 = imgUrl;
          console.log(imgUrl, "imgUrl123123");
          // this.firstFlag = false;
        })
        .catch((error) => {
          console.log(error, "123123");
        });
    },
    getImgBase64(imgUrl) {
      var base64 = "";
      var img = new Image();
      img.setAttribute("crossOrigin", "Anonymous");
      img.src = imgUrl;
      let that = this;

      img.onload = function () {
        base64 = that.image2Base64(img);
        that.shopImg = base64;
      };
      return this.shopImg;
    },
    image2Base64(img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png");
      return dataURL;
    },
    initdata() {
      this.shopName = this.data.shopName;
      this.getCode();
    },
    getCode() {
      var actUrl = location.href;
      var nowVue = this;
      let that = this;
      QRCode.toDataURL(actUrl, function (err, url) {
        console.log(url);
        nowVue.dataURL = url;
      });
    },
    btnClose() {
      console.log("2222222");
      this.submit();
    },
    clickShare() {
      var url = "";
      url = location.href;
      //点击分享
      console.log(url);
      allShare( this.isTemplate, this, (callBackData) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.userShare {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 3000;
  background: rgba($color: #000000, $alpha: 0.7);
}
.userShareImg {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.shareImg {
  width: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  box-sizing: border-box;
}
.shareJoin {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
  padding: 0px 0.2rem;
  box-sizing: border-box;
}
.share {
  font-size: 0.24rem;
  text-align: center;
  margin-top: 0.3rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.shareTextImg {
  font-size: 0.24rem;
  text-align: center;
 
  color: #fff;
  position: fixed;
  left: 2.75rem;
  bottom: 1.5rem;
  z-index: 3001;
}
.closeBtn {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/49543/21/16850/1595/5ddd2064E43cbdd22/cc16b630ad69506b.png)
    no-repeat;
  background-size: 100%;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.5rem auto 0;
}
.closeBtn1 {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/49543/21/16850/1595/5ddd2064E43cbdd22/cc16b630ad69506b.png)
    no-repeat;
  background-size: 100%;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0.1rem;
  margin-left: 3.2rem;
  position: fixed;
  z-index: 3001;
  bottom: 0.5rem;
}
.shareJoinname {
  font-size: 0.24rem;
  color: rgb(153, 153, 153);
}
.shareJoindiv {
  font-size: 0.24rem;
  color: rgb(37, 37, 37);
  margin-top: 0.2rem;
}
.shareJoinspan {
  color: rgb(224, 74, 133);
}
.shareJoinimg {
  width: 1.5rem;
  height: 1.5rem;
}
.itemimg {
  width: 3.8rem;
}
</style>