<template>
  <div ref="sharePic" class="container">
    <div class="groupInfo">
      <!-- 组团头像信息 -->
      <div class="avatorGroup">
        <div
          v-for="(item, index) in avatorList"
          :key="index"
          class="item"
          :class="{ leader: index == 0, normal: index != 0 }"
        >
          <img class="avator" :src="item" alt="" />
          <template v-if="index == 0">
            <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>
          </template>
        </div>
        <div
          v-for="num in maxCount - avatorList.length"
          :key="`placeholder${num}`"
          class="item placeholder"
        />
        <div v-if="openGroupCnt >= 7" class="item more" />
      </div>
      <div class="groupProcess">
        <div class="desc">
          还差 <span>{{ sharePicData.needGuys }}人</span> 成团，参团截止时间5月3日
        </div>
      </div>
    </div>
    <div class="skuImg">
      <!-- 商品图 -->
      <img :src="sharePicData.skuImg" alt="" />
      <div class="skuInfo">
        <div class="skuPrice">
          <span class="groupPriceContainer">拼团价 ¥</span>
          <span class="groupPrice">¥{{ sharePicData.activityPrice }}</span>
          <span class="salePrice">¥{{ sharePicData.salePrice }}</span>
        </div>
        <div class="skuSuccess">
          <p>
            已有<span>{{ sharePicData.groupBuySuccessGuys }}人</span>
          </p>
          <p>拼团成功</p>
        </div>
      </div>
    </div>
    <div class="skuName">
      <!-- 商品名称 -->
      {{ sharePicData.skuName }}
    </div>
    <div class="shareInfo">
      <!-- 底部分享信息 -->
      <div class="qrcode">
        <img :src="qrcodeUrl" 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 groupBuyApi from '@/api/groupBuy';
import { upload } from 'qiniu-js';
import config from '@/config';
export default {
  props: {
    sharePicData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      qrcodeUrl: '',
      avatorList: [],
      openGroupCnt: 7,
      maxCount: 0
    };
  },
  watch: {
    sharePicData() {
      this.handleAvator();
    }
  },
  methods: {
    handleAvator() {
      const openGroupCnt = this.sharePicData.openGroupCnt || 7;
      let peoplePhotoList = this.sharePicData.peoplePhotoList || [];
      this.maxCount = openGroupCnt >= 6 ? 6 : openGroupCnt;
      this.openGroupCnt = openGroupCnt;
      this.avatorList = peoplePhotoList.slice(0, openGroupCnt);
    },
    async createAndUploadPic() {
      console.log(JSON.stringify(this.sharePicData));
      this.handleAvator();
      const _this = this;
      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(this.sharePicData);
      this.qrcodeUrl = qrcodeUrl;
      const [res] = await qiNiuApi.getQiniuToken();
      const token = res.token;
      this.$nextTick(() => {
        html2canvas(this.$refs.sharePic, {
          width: 1080,
          height: 1920,
          useCORS: true,
          scale: 1,
          allowTaint: false
        }).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('pic create success', fileLink);
                  _this.$emit('outputPicUrl', fileLink);
                }
              };
              observable.subscribe(observer);
            },
            '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 {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ec1500;
  font-size: 34px;
}
.groupInfo .avatorGroup .more::after {
  content: '...';
  margin-top: -15px;
}
.groupInfo .avatorGroup .placeholder {
  border: 2px dashed #ff9393;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: #ec1500;
  font-size: 34px;
}
.groupInfo .avatorGroup .placeholder::after {
  content: '?';
}
.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>
