<template>
  <div class="showMaskBlack" v-if="show">
    <div class="getmycardsuccess">
      <img class="getmycardsucimg" :src="cardUrl">
      <div class="newgetcardtext">
        <div class="newgmcstitle">恭喜您抽中“{{cardName}}”</div>
        <div class="newgmcscontext">~集齐5张卡记得去抽奖哦~</div>
      </div>
      <div v-if="drawCardCount > 0" class="sharebtn" @click="closeClick">继续抽一张（{{drawCardCount}}）</div>
      <div v-else class="sharebtn" @click="setShareButton()">邀请好友帮忙抽卡</div>
    </div>
    <div class="closeMaskBtn" @click="closeClick()"></div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import { allShare } from '../../../js/share.js';
let { drawCardInfoList , cardInfoList } = apis1;
import { DrawCardPopComService1 } from '../../../util/comCreate.js';


export default {
  props: [],
  components: {
  },
  data() {
    return {
      cardName:'',
      cardUrl:'',
      drawCardCount:'',
      drawCardList:[],
      cardList:[],
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );
    this.initData();
  },
  methods: {
    initData(){
      this.publicData.$emit('isKe', true);
    },
    shakeThat(){
      drawCardInfoList(data => {
        this.drawCardList = data.data;
        this.cardList = data.data.cardList;
        this.cardName = data.data.drawCard.cardName;
        this.cardUrl = data.data.drawCard.cardUrl;
        this.callDrawPop();
      });

    },
    callDrawPop(){
      if(this.drawCardCount == 0) {
        this.$toast('没有抽卡次数了');
        return;
      }
      if (this.drawCardList.drawCard.status){
        this.drawCardCount = this.drawCardCount - 1;
        document.querySelector("body").setAttribute("style",
          "position:#fixed;top:0;height:100%;overflow:hidden");
      }else{
        this.drawCardCount = this.drawCardCount - 1;
        this.closeClick();
        DrawCardPopComService1.create(
          this.drawCardCount,
          (submit) => {
            DrawCardPopComService1.close();
          }
        );
      }
    },
    //分享
    setShareButton() {
      let actStatus = sessionStorage.getItem('actStatus');

        if (actStatus == 2) {
          // Toast
          this.$toast('活动已结束');
          return;
        }
        if (actStatus == 1) {
          this.$toast('活动尚未开始');
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          // Toast('活动正在惊醒中');
          // this.share = 1
          allShare(false, this, callBackData => {
            console.log(callBackData, 'callBackData');
          });
        }
    },
    closeClick() {
      this.publicData.$emit("jikaClose", true);
      document.querySelector("body").removeAttribute("style");
      this.submit(this.cardList,this.cardName,this.drawCardCount);
    }
  },

};
</script>

<style lang="scss">
.showMaskBlack {
  background: rgba(0,0,0,.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
}
.getmycardsuccess {
  position: relative;
  width: 5rem;
  height: 4.5rem;
  padding-top: 4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/25686/1/6348/5370/5c4da4acEfd20ced4/c9c4ab6483f6c8d9.png);
}
.closeMaskBtn {
  width: .5rem;
  height: .5rem;
  margin-top: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAclBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9eWEHEAAAAJXRSTlMA1BW5Ce9XMB8FFt2pGg369KGXk398eWBHEq/asNbGvW1PTSkogWj3YwAAAZVJREFUSMeEkNmWgjAQBRuTsMg+KIg67vX/vzjE8aBoq/WSpE8qfdPyStw1ZuPK0m1M08XylXgZMCFYfraiDIUseivMazyVaY/nPkn687E1FZ56rhuhY8CE9rFoQ+OrLlSE5IeBbaSkXTPwkzzXC/9YuhKVVerbF9Oi3flvDkWdwo9lZyep9sBCPrAA9o/Z/D8O8pGD/8/DrJQeap9xbrmDTL6Sgctv+xrS4rtSpFDf5g4o01VmDUTi2cJ6LOdWnrD5uF3D1q+xd0ejDGZTYxaUg3PPEw/rEsz9yYCpMxsK98bmf7K/EE6vzN4eQ9hcc1VWlEuKIbbyybprLs2ZGmOyThpoRXFUQ1povHeSV2euGnLymVK4iOZohlwgFQe9aI5mSA9OgEQ0RzMkgfKv03JHAQCEYeievYvQ+1/TsYghhbdbUJvPAyPgYuD55JP9KhVW6QWjJBgrS0VZOvErit9ZTNlixshajAziAoQSiD4QsBPjtU3UxDgoC1BJoPhYvU6Jn1DiCBU4kHDsGbjq93x/cAUQ7gKpbEQ7T+Xb4wAAAABJRU5ErkJggg==);
}
.getmycardsucimg {
  position: absolute;
  width: 1.1rem;
  height: 1.2rem;
  left: 1.95rem;
  top: .4rem;
}
.newgetcardtext {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: absolute;
  left: 0;
  top: 2rem;
  height: 2rem;
}
.sharebtn {
  width: 4rem;
  height: .88rem;
  background: linear-gradient(to right,#ff2a3e,#ff614c,#ff9e6d);
  border-radius: .44rem;
  color: #fff;
  font-size: .3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.newgmcstitle {
  font-size: .4rem;
  font-weight: 700;
  text-align: center;
  color: #f23c3c;
}
.newgmcscontext {
  font-size: .3rem;
  text-align: center;
  color: #f23c3c;
}

</style>
