<template>
  <div class="showMaskBlack" v-if="show">
    <div class="getmycardfalse" :style="styleData.drawCardStyle">
      <div class="thanksfalse">很遗憾,您未抽中！</div>
      <div v-if="drawCardCount > 0" class="sharebtn" :style="styleData.drawCardSharebtn" @click="closeClick">
        继续抽一张（{{drawCardCount}}）
      </div>
      <div v-else class="sharebtn" :style="styleData.drawCardSharebtn" @click="setShareButton()">邀请好友帮忙抽卡</div>
      <div class="closeMaskBtn" @click="closeClick()"></div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import { allShare } from '../../../js/share.js';
let { drawCardInfoList } = apis1;
import { DrawCardPopComService } 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"
    );
  },
  methods: {
    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;
        this.closeClick();
        DrawCardPopComService.create(
          this.cardName,
          this.cardUrl,
          this.drawCardCount,
          (submit) => {
            DrawCardPopComService.close();
          }
        );
      } else {
        this.drawCardCount = this.drawCardCount - 1;
        document.querySelector("body").setAttribute("style",
          "position:#fixed;top:0;height:100%;overflow:hidden");
      }
    },
    //分享
    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, 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;
}
.getmycardfalse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.closeMaskBtn {
  height: 0.24rem;
  width: 0.24rem;
  position: absolute;
  right: 0.34rem;
  top: 0.34rem;
  background: url('//img10.360buyimg.com/imgzone/jfs/t1/143521/26/18654/387/5fd9e706E8f1594e3/ae5cc06440559585.png')
    no-repeat;
  background-size: 100% 100%;
}
.sharebtn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  margin-left: -2rem;
}
.thanksfalse {
  font-size: 0.48rem;
  color: #262626;
  font-weight: bold;
  text-align: center;
}
</style>
