<template>
  <div ref="sharePic" class="container">
    <div class="groupInfo">
      <!-- 组团头像信息 -->
      <div class="avatorGroup">
        <div class="item leader">
          <img
            class="avator"
            src="https://img.lkbang.net/avator/0070abce3cf2fd7f0f436f5e49d3e6f8d684f4571ada0-dMUyR7_fw658.jpeg"
            alt=""
          />
          <div class="leaderName">团长</div>
          <div class="leaderBorder">
            <img src="https://img.lkbang.net/activity/share/default/leaderBorder.png?i=1" alt="" />
          </div>
          <div class="crown">
            <img src="https://img.lkbang.net/activity/share/default/crown.png?i=1" alt="" />
          </div>
        </div>
        <div class="item normal">
          <img
            src="https://img.lkbang.net/avator/0070abce3cf2fd7f0f436f5e49d3e6f8d684f4571ada0-dMUyR7_fw658.jpeg"
            alt=""
          />
        </div>
        <div class="item placeholder" />
        <div class="item more" />
        <div class="item more" />
        <div class="item more" />
        <div class="item more" />
      </div>
      <div class="groupProcess">
        <div class="desc">还差 <span>2人</span> 成团，参团截止时间5月3日</div>
      </div>
    </div>
    <div class="skuImg">
      <!-- 商品图 -->
      <img src="https://img.lkbang.net/activity/share/default/skuImg.png" alt="" />
      <div class="skuInfo">
        <div class="skuPrice">
          <span class="groupPriceContainer">拼团价 ¥</span>
          <span class="groupPrice">0</span>
          <span class="salePrice">¥3899</span>
        </div>
        <div class="skuSuccess">
          <p>已有<span>6999人</span></p>
          <p>拼团成功</p>
        </div>
      </div>
    </div>
    <div class="skuName">
      <!-- 商品名称 -->
      SAINT LAURENT PARIS 圣罗兰 方管纯口红 3.8克 女神挚爱款 千颂伊同款
    </div>
    <div class="shareInfo">
      <!-- 底部分享信息 -->
      <div class="qrcode">
        <img src="https://img.lkbang.net/activity/share/default/qrcode.png" alt="" />
      </div>
      <div class="shareDesc">
        <p>分享自 <span>羊小咩小程序</span></p>
        <p>扫码或长按识别二维码0元拿好物</p>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
import qiNiuApi from '@/api/qiniu.api';
import { upload } from 'qiniu-js';
import config from '@/config';
export default {
  mounted() {
    // this.uploadPic();
  },
  methods: {
    async uploadPic() {
      const [res] = await qiNiuApi.getQiniuToken();
      const token = res.token;
      html2canvas(this.$refs.sharePic, {
        width: 1080,
        height: 1920,
        useCORS: true,
        scale: 1
      }).then(function(canvas) {
        canvas.toBlob(
          blob => {
            const observable = upload(blob, null, token);
            const observer = {
              error(err) {
                console.log(err);
              },
              complete({ hash }) {
                const fileLink = config.qiniuHost + hash;
                console.log('fileLink', fileLink);
              }
            };
            observable.subscribe(observer);
            // newImg.onload = function() {
            //   URL.revokeObjectURL(url);
            // };

            // newImg.src = url;
            // document.body.appendChild(newImg);
          },
          'image/jpeg',
          0.85
        );
      });
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
div,
span,
p,
img {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  font-size: 12px;
}
.container {
  position: fixed;
  top: -9999999px;
  left: -9999999px;
  width: 1080px;
  height: 1920px;
  padding: 48px;
  color: #333;
}
.groupInfo {
  height: 319px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.groupInfo .avatorGroup {
  display: flex;
}
.groupInfo .avatorGroup .item {
  width: 94px;
  height: 94px;
  background-color: #ffe1e1;
  margin: 0 21px;
  border-radius: 50%;
  position: relative;
}
.groupInfo .avatorGroup .normal,
.groupInfo .avatorGroup .leader {
  background: transparent;
}
.groupInfo .avatorGroup .leader {
  display: flex;
  align-items: center;
  justify-content: center;
}
.groupInfo .avatorGroup .leader .avator {
  width: 84px;
  height: 84px;
  border-radius: 50%;
}
.groupInfo .avatorGroup .leader .leaderBorder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.groupInfo .avatorGroup .leader .leaderBorder img {
  width: 100%;
  height: 100%;
}
.groupInfo .avatorGroup .leader .crown {
  position: absolute;
  top: -18px;
  right: -5px;
  width: 49px;
  height: 43px;
}
.groupInfo .avatorGroup .leader .crown img {
  width: 100%;
  height: 100%;
}
.groupInfo .avatorGroup .leader .leaderName {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 76px;
  height: 36px;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff9700;
  border-radius: 8px;
}
.groupInfo .avatorGroup .normal img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.groupInfo .avatorGroup .more {
  border: 2px dashed #ff9393;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ec1500;
  font-size: 34px;
}
.groupInfo .avatorGroup .more::after {
  content: '?';
}
.groupInfo .avatorGroup .placeholder {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ec1500;
  font-size: 34px;
}
.groupInfo .avatorGroup .placeholder::after {
  content: '...';
  margin-top: -15px;
}
.groupInfo .groupProcess {
  width: 750px;
  height: 123px;
  padding-top: 50px;
}
.groupInfo .groupProcess .desc {
  width: 100%;
  height: 100%;
  background: #ffe8e8;
  border-radius: 36.5px;
  color: #333;
  font-size: 34px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.groupInfo .groupProcess .desc span {
  color: #ec1500;
  margin: 0 10px;
}
.skuImg {
  width: 984px;
  height: 984px;
  position: relative;
}
.skuImg img {
  width: 100%;
  height: 100%;
}
.skuImg .skuInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 134px;
  background-image: url('https://img.lkbang.net/activity/share/default/skuInfoBg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.skuImg .skuInfo .skuPrice {
  display: flex;
  align-items: baseline;
  width: 653px;
  height: 100%;
  flex-shrink: 0;
  color: @white;
  font-size: 34px;
  padding-left: 32px;
  margin-right: 10px;
}
.skuImg .skuInfo .skuPrice .groupPrice {
  display: inline-block;
  color: @white;
  font-size: 64px;
  margin-right: 10px;
}
.skuImg .skuInfo .skuPrice .salePrice {
  font-size: 34px;
  text-decoration: line-through;
  font-weight: lighter;
  line-height: 134px;
}
.skuImg .skuInfo .skuSuccess {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.skuImg .skuInfo .skuSuccess p {
  font-size: 34px;
  text-align: center;
}
.skuImg .skuInfo .skuSuccess p:first-child {
  margin-bottom: 15px;
}
.skuImg .skuInfo .skuSuccess p span {
  color: #ec1500;
}
.skuName {
  height: 132px;
  margin: 28px 0 42px;
  font-size: 44px;
  color: #333333;
  line-height: 62px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.shareInfo {
  height: 318px;
  background: #f7f8f9;
  border-radius: 24px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shareInfo .qrcode {
  width: 353px;
  height: 278px;
  flex-shrink: 0;
  padding: 0 75px 0 0;
}
.shareInfo .qrcode img {
  width: 100%;
  height: 100%;
}
.shareInfo .shareDesc {
  flex: 1;
  font-size: 34px;
  color: #666;
}
.shareInfo .shareDesc p:first-child {
  margin-bottom: 25px;
}
.shareInfo .shareDesc span {
  font-weight: bold;
}
</style>
