<template>
  <div class="backiii" v-if="show">
    <!-- <%--    弹窗--%> -->
    <div class="page-dialog">
      <template>
        <img src="https://img10.360buyimg.com/imgzone/jfs/t1/139423/10/9155/6361/5f6ab18dE31b66569/91483ad4a1211567.png"
             alt="" style="width: 2.86rem;height: .91rem;display: block;margin: 1rem auto 0;">
        <template>
          <div class="my-friend-container" v-if="helpFriendList.length>0">
            <img class="friend-headImage" :src="it.userImg" alt="" v-for="(it,index) in helpFriendList" :key="index">
          </div>
          <div v-if="helpFriendListFlag" style="font-size: .4rem;color:#339b9a;text-align: center;line-height: 5rem;">暂无助力好友哦</div>
        </template>
      </template>
      <div style="width: 1rem;height: 1rem;margin: auto;margin-top:0.7rem;" @click="closeDialog()"></div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import store from '../../../store/store.js'

let {addSkuHelpFriend} = apis1;

export default {
  components: {
    store,
  },
  props: ["datas", "keyData", "styleData", "isTemplate"],
  data() {
    return {
      helpFriendList: [],
      show: true,
      helpFriendListFlag:false
    };
  },
  mounted() {

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

  },
  methods: {
    initData() {


      addSkuHelpFriend(data => {
        var that = this;

        that.helpFriendList = data.data;

        if(that.helpFriendList.length > 0){

          that.helpFriendListFlag = false;
        }else{

          that.helpFriendListFlag = true;
        }

      });


    },

    closeDialog() {
      document.querySelector("body").removeAttribute("style");
      this.submit();

    },


  },
};
</script>

<style lang="scss" scoped="scoped">
::-webkit-scrollbar {
  display: none;
}

html {

}

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

.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;
  }

  .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
  }

  .page-dialog.other {
    background-image: url("https://img10.360buyimg.com/imgzone/jfs/t1/130342/8/10756/43135/5f6aaf92Eb22963af/e9b368725b832a8e.png");
    width: 6.6rem;
  }
  .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.2rem;
    height: 3.4rem;
    overflow-y: scroll;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 1.1rem;
    margin-top: 0.2rem;
    margin-bottom: 2rem;
  }

  .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>
