<template>
  <div class="backiii" v-if="show">
    <!-- <%--    弹窗--%> -->
    <div class="page-dialog">
      <template v-if="shareNumName=='助力已满'">
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/119759/15/517/48739/5e9d3ceaEf7b24266/26910196fac2d8aa.png"
             alt="" style="width:6.27rem;height:5.6rem;position: relative;margin:-.2rem auto 0;pointer-events: none">
        <div style="text-align: center;font-size: .3rem;color:#fff;margin-top:-1.3rem;">您的好友助力已满<br>参与<br>赢取幸运锦鲤大奖</div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top:.4rem;">
          <img @click="closeDialog()" style="width: 3.19rem;height: .79rem;"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/125070/21/13377/7271/5f6ab48cE805150ad/41b047a6f8faf96d.png"
               alt="">
        </div>
      </template>
      <template v-else-if="shareNumName=='太热情啦'">
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/119759/15/517/48739/5e9d3ceaEf7b24266/26910196fac2d8aa.png"
             alt="" class="shareNumStyle1">
        <div class="shareNumNametext">没有助力次数啦<br>活动期间只能为一位好友助力<br>参与<br>赢取幸运锦鲤大奖</div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top:.1rem;">
          <img @click="closeDialog()" style="width: 3.19rem;height: .79rem;"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/125070/21/13377/7271/5f6ab48cE805150ad/41b047a6f8faf96d.png"
               alt="">
        </div>
      </template>

      <template v-else-if="shareNumName=='助力成功'">
        <img
          src="https://img10.360buyimg.com/imgzone/jfs/t1/104757/34/19368/57771/5e9d4475Eda1b053d/577d4ab20ec5d53e.png"
          alt="" style="width:6.27rem;height:5.6rem;position: relative;margin:-.2rem auto 0;pointer-events: none">
        <div style="text-align: center;font-size: .3rem;color:#fff;margin-top:-1.1rem;">恭喜您助力成功<br>参与<br>赢取幸运锦鲤大奖</div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top:0.2rem;">
          <img @click="closeDialog()" style="width: 3.19rem;height: .79rem;"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/125070/21/13377/7271/5f6ab48cE805150ad/41b047a6f8faf96d.png"
               alt="">
        </div>
      </template>

      <template v-else-if="shareNumName=='助力失败'">
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/119759/15/517/48739/5e9d3ceaEf7b24266/26910196fac2d8aa.png"
             alt="" style="width:6.27rem;height:5.6rem;position: relative;margin:-.2rem auto 0;pointer-events: none">
        <div style="text-align: center;font-size: .3rem;color:#fff;margin-top:-.9rem;">加购时间已结束<br>助力失败</div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top:.4rem;">
          <img @click="closeDialog()"
               src="https://img10.360buyimg.com/imgzone/jfs/t1/113472/18/18596/6105/5f69c355E5a72950e/9421072faf279a7c.png"
               class="dialog-btn"/>
        </div>
      </template>

      <template v-else-if="shareNumName=='关注店铺'">
        <div style="text-align: center;font-size: .3rem;color:#008589;margin-top:1.7rem;">
          <div style="font-size: .4rem;">关注</div>
          <div>{{ shopName }}</div>
          <div>参与活动</div>
        </div>
        <div style="display: flex;justify-content: space-around;align-items: center;margin-top:2.8rem;">
          <img
            src="https://img10.360buyimg.com/imgzone/jfs/t1/148698/22/9126/7103/5f69d026E2fba5689/266eeb3e004ab926.png"
            style="width: 3.19rem;height: .79rem;" class="dialog-btn" @click="followShopClick()"/>
        </div>
      </template>

      <div class="close-btn-frdHelp" @click="closeDialog()"></div>
    </div>

  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import store from '../../../store/store.js'
import { goToShopPage } from "../../../util/tools.js";
let { shoppingCard, addSkuFollowShop ,addSkuDraw,storeGoodsPoint} = apis1;

export default {
     components: {
      store,
  },
  props: ["datas", "keyData", "styleData", "isTemplate"],
  data() {
    return {
        shoppingCard: [],
        shareNumName:'',
        shareUserId:'',//用户id取得
        show: true,
        title:'',
        followStoreFlag:true,
        shopName:'',
        shopId:'',
        addSkuFollowList:[],
        drawNull:false,

    };
  },
  mounted() {
      this.shoppingCard = [];

  },
  created() {
      document.querySelector("body").setAttribute("style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );
    this.initData();

  },
  methods: {
    initData() {
        this.title=='规则'
            var that = this;
            if(that.followStoreFlag == 1){
                 that.shareNumName = '关注店铺';
                    return;
             }
             this.zhuli();

             
      

    },
     closeDialog2(){
            document.querySelector("body").removeAttribute("style");
            this.submit();
            let shopId = store.state.shopId;
            storeGoodsPoint(4)
            goToShopPage(shopId);
    },

    
    closeDialog(){
         if(this.followStoreFlag == 1){
             this.$toast("请先关注店铺");
             return;
         }else{
            document.querySelector("body").removeAttribute("style");
            this.submit();
         }
    },
    followShopClick(){
         var that = this;
        addSkuFollowShop(that.shopId,data => {
        that.followStoreFlag =2;
        document.querySelector("body").removeAttribute("style");
        that.submit(that.followStoreFlag);
        this.zhuli();
        that.$toast("成功关注店铺");
        });
 
    },
    zhuli(){
        var that = this;
               if(that.shareNum == 1){
                   that.show = true;
                    that.shareNumName = '太热情啦';
                }else if(that.shareNum == 2){
                    that.show = true;
                    that.shareNumName = '助力已满';
                }else if(that.shareNum == 3){
                    that.show = true;
                    that.shareNumName = '助力成功';
                }else if(that.shareNum == 4){
                    that.show = true;
                    that.shareNumName = '助力失败';
                }
    }

  },
};
</script>

<style lang="scss" scoped>
.backiii {
  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: 25;
  
.shareNumStyle1{
    width:6.27rem;
    height:5.6rem;
    position: relative;
    margin:-.2rem auto 0;
    pointer-events: none;
}
.shareNumNametext{
    text-align: center;
    font-size: .3rem;
    color:#fff;
    margin:-1.4rem auto 0;
    width: 80%;
}

[v-cloak] {
    display: none;
}

::-webkit-scrollbar {
    display: none;
}

html {

}

#appC {
    width: 100vw;
    min-height: 100vh;
    background-image: linear-gradient(to bottom, #feb999, #fa9c77);
}


.banner-container .show-time {
    font-size: .26rem;
    color: #fcefae;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 1.41rem;
}


.banner-container .activity-time {
    font-size: .24rem;
    color: #fcefae;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 3.15rem;
}

.rule-btn {
    width: 1.15rem;
    height: .43rem;
    position: absolute;
    right: 0;
    top: .22rem;
}

.count-down-shop-container {
    background: url("https://img10.360buyimg.com/imgzone/jfs/t1/145600/38/9134/5178/5f6998a8Ed30863fe/0d1a626fbfa8f9ef.png") no-repeat;
    background-size: 100%;
    width: 7.27rem;
    height: 2.33rem;
    margin: -6.8rem auto 0;
    position: relative;
    z-index: 3;
    font-size: .22rem;
    color: #fff;
    padding: 0 .25rem;
    box-sizing: border-box;
}

.countdown-container {
    background: url("https://img10.360buyimg.com/imgzone/jfs/t1/99799/3/18828/514/5e99486fE0e7907db/e5b69b3f0a13866d.png") no-repeat;
    background-size: 100%;
    width: 100vw;
    height: .81rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .24rem;
    color: #d20a00;
}

.join-people {
    font-size: .22rem;
    color: #fef29d;
    width: 1.07rem;
    height: .95rem;
    position: absolute;
    top: 0;
    right: .58rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.countdown-style {
    color: #fef29d;
    font-size: .22rem;
}

.shop-info {
    display: flex;
    height: .97rem;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 .3rem;
    box-sizing: border-box;
    margin-top: .3rem;
}

.go-shop-btn {
    width: 1.44rem;
    height: .44rem;
    border: 1px #fff solid;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .24rem;
    border-radius: 40px;
}

.cart-step-container {
    background: url("https://img10.360buyimg.com/imgzone/jfs/t1/135177/8/10631/47018/5f69a1b6E34252095/00a8252e7d70397d.png") no-repeat;
    background-size: 100%;
    width: 6.93rem;
    height: 6rem;
    margin: 0 auto;
    position: relative;
    color: #fff;
    font-size: .22rem;
    text-align: center;
}

.cart-step-container .first {
    position: absolute;
    left: 0.8rem;
    top: 2.68rem;
}

.cart-step-container .second {
    position: absolute;
    left: 2.8rem;
    top: 2.68rem;
}

.cart-step-container .third {
    position: absolute;
    right: 0.8rem;
    top: 2.68rem;
}

.cart-info-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    top: 3.9rem;
}

.cart-info-container .text1 {
    font-size: .25rem;
    color: #0c2828;
    text-align: center;
}

.cart-info-container .text2 {
    font-size: .3rem;
    color: #fff;
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top:1.1rem;
}
.cart-goods-container {
    width: 6.95rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: .2rem auto 0;
}

.cart-goods-container .goods {
    width: 3.41rem;
    height: 4.21rem;
    background: #fff;
    border-radius: 10px;
    padding: .34rem 0;
    position: relative;
}

.cart-goods-container .goods:nth-child(2n+2) {
    margin-left: .1rem;
}

.cart-goods-container .goods:nth-child(n+3) {
    margin-top: .1rem;
}

.goods-image {
    width: 2.86rem;
    display: block;
    margin: 0 auto
}

.goods-describe {
    width: 2.86rem;
    font-size: .24rem;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;
    overflow: hidden;
    min-height: .66rem;
    margin: .1rem auto;
}

.goods-price-box {
    width: 2.86rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: .1rem auto;
}

.goods-price-box div:nth-child(1) {
    font-size: .3rem;
    color: #ff251e;
}

.goods-price-box div:nth-child(2) {
    font-size: .22rem;
    color: #999999;
    text-decoration: line-through;
    margin-left: .2rem;
}

.cart-status-btn {
    background: url("https://img10.360buyimg.com/imgzone/jfs/t1/116736/15/18353/498/5f69a6dcEac309948/c206968899335283.png") no-repeat;
    background-size: 100%;
    width: 2.1rem;
    height: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .26rem;
    color: #fff;
    margin: .2rem auto 0;
}

.page-dialog {
    background: url("https://img10.360buyimg.com/imgzone/jfs/t1/148949/7/9107/55364/5f69c5d8Efed549d9/fac692c72b40ed87.png") no-repeat;
    background-size: 100%;
    width: 6.37rem;
    height: 9.14rem;
    padding-top: 0.65rem;
    box-sizing: border-box;
    position: relative;
}
.page-dialog.other {
    background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/130342/8/10756/43135/5f6aaf92Eb22963af/e9b368725b832a8e.png");
    width: 6.6rem;
}

.close-btn-frdHelp {
    width: .66rem;
    height: .99rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
}

.page-dialog .title {
    font-size: .4rem;
    color: #caf5f9;
    text-shadow: 1px 1px 0px #00454d;
    text-align: center;
}

.rule-content {
    width: 3.98rem;
    height: 4.6rem;
    overflow-y: scroll;
    margin: 0.1rem auto 0;
    font-size: .26rem;
    color: #339b9a;
    text-align: justify;
}

.dialog-btn {
    width: 2.01rem;
    height: .79rem;
}

.my-friend-btn {
    width: 1.15rem;
    height: .43rem;
    position: absolute;
    right: 0rem;
    top: .8rem;
}

.my-friend-container {
    width: 4.21rem;
    height: 4.2rem;
    overflow-y: scroll;
    margin: .5rem 0 0 1.3rem;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
}

.show-drawResult-btn {
    width: .66rem;
    height: .68rem;
    position: absolute;
    right: 0.1rem;
    top: 4.3rem;
}

.lock-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.gray100 {
    filter: grayscale(100%);
}

.friend-headImage {
    width: .66rem;
    height: .66rem;
    border-radius: 50%;
    display: block;
}

.friend-headImage:nth-child(n+2) {
    margin-left: .22rem;
}

.friend-headImage:nth-child(5n+1) {
    margin-left: 0rem;
}

.friend-headImage:nth-child(n+6) {
    margin-top: .22rem;
}

.vcd-text-div {
    line-height: initial !important;
}

}

</style>
