<template>
  <div class="basicMaskDiv" @click="closeClick" v-if="show">
    <!--助力成功弹窗-->
    <div v-show="helpSuccessWindow">
      <div class="modalBlock" :class="{bounceIn:helpSuccessWindow == true}">
        <div class="packet_bg">
          <div class="packet_text">成功助力好友，谢谢你哦~</div>
          <img class="packet_joinInThisActivityBtn"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/32323/17/14604/6304/5cbfd567E183c50e0/e00634d5bb4c1d4c.png"
               alt="" v-lz-click="'1'" @click="joinInThisActivity">
          <div class="closeBtn-succ" @click="helpSuccessWindow = false"></div>
        </div>
      </div>
    </div>
    <!--已助力弹窗-->
    <div v-show="hasHelpedWindow">
      <div class="modalBlock" :class="{bounceIn:hasHelpedWindow == true}">
        <div class="packet_bg">
          <div class="packet_text">真热情，已经帮助过啦~</div>
          <img class="packet_joinInThisActivityBtn"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/32323/17/14604/6304/5cbfd567E183c50e0/e00634d5bb4c1d4c.png"
               alt="" @click="joinInThisActivity">
          <div class="closeBtn-hb" @click="hasHelpedWindow = false"></div>
        </div>
      </div>
    </div>
    <!--发起者进入助力页，提示3秒后自动返回活动首页-->
    <div v-show="returnInviterPage">
      <div class="modalBlock">
        <div class="packet_bg">
          <div class="packet_text1" style="padding-top:1.7rem;">您不能给自己助力哦，</div>
          <div class="packet_text1">快去邀请好友助力抢红包吧~</div>
          <div class="packet_text2">{{ num }}秒后自动返回活动首页</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  props: [],
  components: {},
  data() {
    return {
      show: true,
      helpSuccessWindow: false,
      hasHelpedWindow: false,
      returnInviterPage: false,
      num: 3,
      url1:'',
    };
  },
  created() {
    document.querySelector("body").setAttribute("style",
      "position:#fixed;top:0;height:100%;overflow:hidden"
    );
    this.initData();
  },
  methods: {
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
    },
    initData() {
      if (this.data == 0) {
        this.helpSuccessWindow = true;
      } else if (this.data == 1) {
        this.hasHelpedWindow = true;
      } else if (this.data == 2) {
        this.returnInviterPage = true;
        setInterval(this.timer, 1000);
      }
    },
    joinInThisActivity() {
      this.url1 = this.url.substring(0, this.url.indexOf('shareUserId') + 1);
      location.href = this.url1;
    },
    timer: function () {
      if (this.num > 0) {
        this.num--
      } else {
        location.href = this.url;
        clearInterval(this.timer);
      }
    },
  },
};
</script>

<style lang="scss">
/*弹窗通用样式*/
.modalBlock {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.packet_bg {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/30381/22/14346/105509/5cbdac1dEe052cf35/4d810793198abb8f.png") no-repeat;
  background-size: 100%;
  width: 6.54rem;
  height: 7.98rem;
  margin: 2.4rem auto 0;
}

.packet_text {
  font-size: .44rem;
  color: #fef7cd;
  text-align: center;
  text-shadow: 0 3px 1px #f2600f;
  font-weight: bold;
  padding-top: 1.88rem;
}

.packet_joinInThisActivityBtn {
  width: 3.21rem;
  height: 1.02rem;
  display: block;
  margin: 3.6rem auto 0;
}

.closeBtn-hb {
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/40063/12/1642/1477/5cbdac1dEc8370051/cf64947ff8688863.png") no-repeat;
  background-size: 100%;
  width: .6rem;
  height: .6rem;
  margin: 1.25rem auto 0;
}
.closeBtn-succ{
  background: url("https://img10.360buyimg.com/imgzone/jfs/t1/40063/12/1642/1477/5cbdac1dEc8370051/cf64947ff8688863.png") no-repeat;
  background-size: 100%;
  width:.6rem;
  height:.6rem;
  margin: 1.25rem auto 0;
}
.packet_text1 {
  font-size: .44rem;
  color: #fef7cd;
  text-align: center;
  text-shadow: 0 3px 1px #f2600f;
  font-weight: bold;
}

.packet_text2 {
  text-align: center;
  color: #fde7a0;
  font-size: .28rem;
  margin-top: 3.3rem;
}

.basicMaskDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  bottom: 0;
  z-index: 200;
}
</style>
