<template>
  <div class="showMaskBlack" v-if="show && shareFlag == 1">
    <div class="atm-join">
      <div class="invite">
        <img style="width: 1.7rem;     height: 1.7rem; border-radius: 50%;border: 2px solid #fbd079;margin-left: 0.2rem"
             :src="userImg==''?'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg':userImg"/>
      </div>
      <div
        style="height:0.5rem;color:#ffcc7c;text-align: center;margin-top:0.8rem;line-height:0.5rem;font-size: 0.3rem;">
        你被邀请加入{{ nickName| twostar }}战队
      </div>
      <div style="display: flex;margin-top:0.1rem;">
        <div style="flex: 1;text-align: center;" v-if="joinFlag == 5 && this.exposureInfoList == false">
          <img @click="joinCar()" style="height:0.61rem;float: left;margin-top: 0.45rem;margin-left: 0.8rem;"
               src="//img10.360buyimg.com/imgzone/jfs/t1/66437/31/2852/13569/5d109d16Eb975033d/aa8a3c9e3cc3e179.png"/>
          <img @click="createNewCar()" style="height:0.61rem;float: left;margin-top: 0.45rem;margin-left: 0.3rem;"
               src="//img10.360buyimg.com/imgzone/jfs/t1/35533/20/13069/13544/5d109d16Ea4236a8c/1f09bb62a33f354f.png"/>
        </div>
        <div style="flex: 1;text-align: center;" v-if="joinFlag == 2">
          <img @click="createNewCar2()" style="height:0.61rem;margin-top:0.45rem"
               src="//img10.360buyimg.com/imgzone/jfs/t1/35533/20/13069/13544/5d109d16Ea4236a8c/1f09bb62a33f354f.png"/>
        </div>
        <div style="flex: 1;text-align: center;" v-if="joinFlag == 5 && this.exposureInfoList == true">
          <img @click="createNewCar3()" style="height:0.61rem;margin-top:0.45rem"
               src="//img10.360buyimg.com/imgzone/jfs/t1/35533/20/13069/13544/5d109d16Ea4236a8c/1f09bb62a33f354f.png"/>
        </div>
        <div style="flex: 1;text-align: center;" v-if="joinFlag == 3">
          <img @click="joinCar2()" style="height:0.61rem;margin-top:0.45rem"
               src="//img10.360buyimg.com/imgzone/jfs/t1/66437/31/2852/13569/5d109d16Eb975033d/aa8a3c9e3cc3e179.png"/>
        </div>
      </div>

    </div>
    <div v-if="joinFlag == 4" class="closeBtn" @click="closeBtn()"></div>
  </div>
</template>

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

let {getTeamIdList, skuInfoList, getCaptainList,storeGoodsPoint} = apis1;

export default {
  components: {
    store,
  },
  props: ["datas", "keyData", "styleData", "isTemplate"],
  data() {
    return {
      exposureList: [],
      exposureInfoList: [],
      userImg: "",
      nickName: "",
      sendStatus: 1,
      prizeType: 0,
      joinFlag: 0,
      teamId: '',
      show: true,
      shareFlag: 0,
    };
  },
  mounted() {
    this.exposureList = [];
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.shareUserId = store.state.shareUserId;
      var shareUserId = this.shareUserId;
      skuInfoList(this.shareUserId, data => {
        this.exposureList = data.data;
        this.userImg = data.data.shareImage;
        if (data.data.captainList != undefined) {
          this.sendStatus = data.data.captainList[0].sendStatus;
        } else {
          this.sendStatus = data.data.sendStatus;

        }
        this.teamId = data.data.shareTeamId;
        this.nickName = data.data.shareNick;
        this.prizeType = data.data.prizeType;
        this.joinFlag = data.data.joinFlag;
        this.shareFlag = data.data.shareFlag;
      });
    },
    goToBuy(sku) {
      storeGoodsPoint(5)
    },

    joinCar() {
      this.joinFlag = 2;
      getTeamIdList(this.teamId, this.shareUserId, data => {
        this.exposureInfoList = data.data;
        if(this.exposureInfoList == true){
           this.$toast('您的好友战队人数已达上限');
           this.joinFlag = 5;
          // Toast('活动尚未开始');
          return;
        }
        // this.exposureList = data.data.skuInfoList;
        document.querySelector("body").removeAttribute("style");
        this.submit(this.joinFlag);
      });

    },
    closeBtn(){
      this.joinFlag = 4;
      this.shareFlag = 0;
      document.querySelector("body").removeAttribute("style");
      this.submit(this.joinFlag,this.shareFlag);
    },

    createNewCar() {
      this.joinFlag = 3;
      getCaptainList(data => {
        document.querySelector("body").removeAttribute("style");
        this.submit(this.joinFlag);
      });

    },
    createNewCar2() {
      if(this.joinFlag==5){
        this.joinFlag = 3;
      }else{
        this.joinFlag = 4;
      }
      this.shareFlag = 0;
      getCaptainList(data => {
        document.querySelector("body").removeAttribute("style");
        this.submit(this.joinFlag,this.shareFlag);
      });

    },
     createNewCar3() {
        this.joinFlag = 3;
      this.shareFlag = 0;
      getCaptainList(data => {
        document.querySelector("body").removeAttribute("style");
        this.submit(this.joinFlag,this.shareFlag);
      });

    },
    joinCar2() {
      this.joinFlag = 4;
      this.shareFlag = 0;
      getTeamIdList(this.teamId, this.shareUserId, data => {
        this.exposureInfoList = data.data;
        if(this.exposureInfoList == true){
           this.$toast('您的好友战队人数已达上限');
           this.joinFlag = 3;
          // Toast('活动尚未开始');
          return;
        }
        // this.exposureList = data.data.skuInfoList;
        document.querySelector("body").removeAttribute("style");
        this.submit(this.joinFlag,this.shareFlag);
      });

    },
  },
  filters: {
    twostar: function (value) {
      if (!value) {
        return ""
      }
      return value.substr(0, 1) + "**" + value.substr(-1, 1)
    }
  }
};
</script>

<style lang="scss" scoped>
.showMaskBlack {
  background: rgba(0, 0, 0, .7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  -webkit-box-align: center;
  z-index: 22;
  align-items: center
}

.atm-join {
  width: 7.22rem;
  height: 3.53rem;
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/69039/24/2785/48185/5d109e59E4a3d9099/d0ab87e93d3bec25.png) no-repeat;
  background-size: 100%;
  position: relative;
  color: #480a16;
  line-height: 2.11rem
}

.invite {
  width: 100%;
  height: 1.22rem;
  text-align: center;
  margin-top: .1rem
}
.closeBtn{
width: 0.6rem;
    height: 0.6rem;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/163826/3/11992/1794/604834a7Eb0a9d45f/a3860189d98f0d46.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 3.5rem;
    top: 11rem;

}

</style>
