<template>
  <div class="top" :style="styleData[keyData.top]" ref="organizeCom" @click="styleClick('click', 'organizeCom')"
    @mousemove="styleClick('mousemove', 'organizeCom')" @mouseout="styleClick('mouseout')">
    <div class="organizeComDiv" :style="styleData[keyData.organizeComDiv]">
      <div class="mycarUser" :style="styleData[keyData.mycarUser]" v-if="joinFlag == 5">
        <div v-for="(item, index) in 5" :key="index">
          <!-- 自己 -->
          <div v-if="index == 0" class="personItem gray60" :style="styleData[keyData.personItem]" v-lz-click="'2'">
            <div class="personicon" :style="styleData[keyData.personicon]">
              <div class="personiconinfo" :style="styleData[keyData.personiconinfo]">
                <img style="width: 100%; border-radius: 50%; height: 100%" :src="userImg" />
              </div>

            </div>
            <div class="leader 111"></div>
            <div class="persontag" :style="styleData[keyData.persontag]">
              {{ nickName | twostar }}
            </div>

          </div>
          <div v-else class="personItem" :style="styleData[keyData.personItem]" v-lz-click="'2'">
            <div class="personicon" :style="styleData[keyData.personicon]">
              <div class="personiconinfo" :style="styleData[keyData.personiconinfo]"
                :class="{ noperson1: !item.haspeople }">
                <!-- 待加入 -->
                <template>
                  <div @click="setShareButton" :style="styleData[keyData.nopersonimg]"></div>
                </template>
              </div>
            </div>
            <div class="addBtn 222"></div>
            <!-- 待加入 -->
            <template>
              <div class="personname" :style="styleData[keyData.personname]">
                待加入
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="mycarUser" :style="styleData[keyData.mycarUser]" v-else>
        <div v-for="(item, index) in captainPrize" :key="index">
          <!-- 自己 -->
          <div v-if="index == 0 && !item.haspeople" class="personItem gray60" :style="styleData[keyData.personItem]" v-lz-click="'2'">
            <div class="personicon" :style="styleData[keyData.personicon]">
              <div class="personiconinfo" :style="styleData[keyData.personiconinfo]">
                <img style="width: 100%; border-radius: 50%; height: 100%" :src="attrTouXiang" />
              </div>
            </div>
            <div class="leader"></div>
            <div class="persontag" :style="styleData[keyData.persontag]">{{ nickName | twostar }}</div>
          </div>
          <div class="personItem" :style="styleData[keyData.personItem]" v-else v-lz-click="'2'">
            <div class="personicon" :style="styleData[keyData.personicon]">
              <div class="personiconinfo" :style="styleData[keyData.personiconinfo]"
                :class="{ noperson1: !item.haspeople }">
                <!-- 已有的人 -->
                <template v-if="item.haspeople">
                  <img :src="item.userImg == ''
                    ? 'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg'
                    : item.userImg
                    " style="width: 100%; border-radius: 50%; height: 100%" />
                </template>
                <!-- 待加入 -->
                <template v-else>
                  <div @click="setShareButton" :style="styleData[keyData.nopersonimg]"></div>
                </template>
              </div>
            </div>
            <div class="leader" v-if="index == 0"></div>
            <div class="addBtn" v-else></div>
            <!-- 已有的人 -->
            <template v-if="item.haspeople">
              <div class="persontag" :style="styleData[keyData.persontag]">
                {{ item.nickName | twostar }}
              </div>
            </template>
            <!-- 待加入 -->
            <template v-else>
              <div class="personname" :style="styleData[keyData.personname]">
                待加入
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="mycarBtn" :style="styleData[keyData.mycarBtn]">
        <template v-if="joinFlag == 2 || joinFlag == 5">
          <span v-if="followStoreFlag == 0" class="mycarBtnText" :style="styleData[keyData.mycarBtnText]"
            @click="toBeCaptain()" v-lz-click="'25'">成为队长</span>
          <span v-else class="mycarBtnText" :style="styleData[keyData.mycarBtnText]"
            @click="toBeCaptain1()">关注店铺成为队长</span>
        </template>
        <template v-if="joinFlag == 4 || joinFlag == 3">
          <span v-if="followStoreFlag == 0" class="mycarBtnText" :style="styleData[keyData.mycarBtnText]"
            @click="setShareButton()" v-lz-click="'2'">邀请好友加入战队</span>
          <span v-else class="mycarBtnText" :style="styleData[keyData.mycarBtnText]"
            @click="setShareButton1()">关注店铺邀请好友加入战队</span>
        </template>
      </div>
      <!-- <div style="width:100%;height:100%;position:absolute;left:0rem;top:0rem;" v-show="actStatus!=1"></div> -->
    </div>
    <div v-if="joinFlag == 2 || joinFlag == 4" class="mymaster2" :style="styleData[keyData.mymaster2]">
      <div class="personItem captain" style="
          width: 6rem;
          position: absolute;
          top: -0.7rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          flex-shrink: 0;
        " v-lz-click="'2'">
        <div class="personicon1" :style="styleData[keyData.personicon1]">
          <div class="personiconinfo2" :style="styleData[keyData.personiconinfo2]">
            <img :src="shareImage == ''
              ? 'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg'
              : shareImage
              " style="width: 100%; height: 100%; border-radius: 50%" />
          </div>
        </div>
        <div class="persontag" :style="styleData[keyData.persontag]" style="width: 100%; margin-top: 0rem">
          {{ DuizhangNickName | twostar }}
        </div>
        <template v-if="sendStatus == 1">
          <div style="
              color: #f7316a;
              font-size: 0.28rem;
              width: 6rem;
              top: -0.7rem;
            ">
            成功瓜分
            <template v-if="prizeType == 1">京豆</template>
            <template v-if="prizeType == 4">积分</template>
          </div>
        </template>
        <template v-else>
          <!-- <%--<img style="width: 2rem;height: 0.3rem" src="https://img10.360buyimg.com/imgzone/jfs/t25387/132/2427695807/1347/afca95da/5be442f2Nb12c6a67.png">--%> -->
          <div class="divideUp1" :style="styleData[keyData.divideUp1]">
            等待瓜分<template v-if="prizeType == 1">京豆</template><template v-if="prizeType == 4">积分</template>
            <!-- ... -->
          </div>
        </template>
      </div>
    </div>
    <div>
      <div class="obtitlebg1" :style="styleData[keyData.obtitlebg1]" v-if="captainPrizeSuccess.length != 0"></div>
      <div class="mymasterList" :style="styleData[keyData.mymasterList]" v-if="captainPrizeSuccess.length != 0" style="
          justify-content: flex-start;
          padding-bottom: 0rem;
          margin-top: -0.2rem;
        ">
        <div v-for="(car, cindex) in captainPrizeSuccess" :key="cindex">
          <template v-if="car.sendStatus == 1">
            <!-- 已完成 -->
            <div class="newsuccar" :style="styleData[keyData.newsuccar]">
              <div class="newcararr" :style="styleData[keyData.newcararr]">
                <div v-for="(item, index) in car.teamList" :key="index">
                  <div class="personItem" :style="styleData[keyData.personItem]" :class="{ captain: index == 0 }"
                    v-lz-click="'2'">
                    <div class="personicon" :style="styleData[keyData.personicon]">
                      <div class="personiconinfo" :style="styleData[keyData.personiconinfo]">
                        <img :src="item.userImg == ''
                          ? 'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg'
                          : item.userImg
                          " style="width: 100%; height: 100%; border-radius: 50%" />
                      </div>
                    </div>
                    <div v-if="index == 0" class="leader"></div>
                    <div v-else class="others">
                    </div>
                    <div class="persontag" :style="styleData[keyData.persontag]">
                      {{ item.nickName | twostar }}
                    </div>
                    <div>
                      <span class="avePoint" :style="styleData[keyData.avePoint]" style="float: left">
                        <span v-if="prizeType == 4">
                          <img style="width: 0.18rem"
                            src="//img10.360buyimg.com/imgzone/jfs/t1/8033/11/14049/865/5c4fb95dEa8b1e3fa/05b2218f104fb4fc.png" />
                        </span>
                        <span v-if="prizeType == 1">
                          <img style="width: 0.18rem"
                            src="//img10.360buyimg.com/imgzone/jfs/t1/7534/8/13941/783/5c4fb95eEa71d323f/30dee458e8747468.png" />
                        </span>
                        {{ memberPrize }}
                        <span v-if="index == 0 && captain > 0" style="float: right">+{{ captain }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div :style="styleData[keyData.finish]">
              </div>
            </div>
          </template>
          <template v-else>
            <!-- 未发送 -->
            <div class="newsuccar" :style="styleData[keyData.newsuccar]"
              :class="{ height3: cindex == captainPrizeSuccess.length - 1 }">
              <div class="newcararr" :style="styleData[keyData.newcararr]">
                <div v-for="(item, index) in car.teamList" :key="index">
                  <div class="personItem" :style="styleData[keyData.personItem]" v-lz-click="'2'">
                    <div class="personicon" :style="styleData[keyData.personicon]">
                      <div class="personiconinfo" :style="styleData[keyData.personiconinfo]">
                        <img :src="item.userImg == ''
                          ? 'https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg'
                          : item.userImg
                          " style="width: 100%; border-radius: 50%; height: 100%" />
                      </div>
                    </div>
                    <div class="addBtn 5555"></div>
                    <div class="persontag" :style="styleData[keyData.persontag]">
                      {{ item.nickName | twostar }}
                    </div>
                  </div>
                </div>
              </div>
              <img style="
                  width: 5rem;
                  position: absolute;
                  left: 2.2rem;
                  bottom: 0rem;
                " v-if="cindex !== captainPrizeSuccess.length - 1"
                src="//img10.360buyimg.com/imgzone/jfs/t1/43503/18/1192/4465/5cc56470Ed6bc66d2/2498e0c80690d7a8.png" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
  HelpPopupComService,
  ActivityOverComService,
} from "../../../util/comCreate.js";
import store from "../../../store/store.js";
import apis1 from "../../../util/apis1.js";
let { followTeam, storeGoodsPoint } = apis1;
import { allShare } from "../../../js/share.js";
export default {
  components: {
    store,
  },
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      exposureList: [],
      exposureInfoList: [],
      captainList: [],
      captainPrize: [], // 未组成
      captainPrizeSuccess: [], // 组队成功
      prizeType: 0,
      nickName: "",
      attrTouXiang: "",
      sendStatus: 0,
      DuizhangNickName: "",
      userImg: "",
      shareFlag: 0,
      followStoreFlag: 0,
      captain: 0,
      memberPrize: 0,
      joinFlag: 0,
      shareUserId: "", //用户id取得
      shareImage: "",
      pointType:true
    };
  },
  mounted() { },
  created() {
    this.initData();
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        // this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.nickName = "待加入";
          this.memberPrize = datasAll.draw.membersPrize;
          this.captain = datasAll.draw.prizeList[0].captainPrize;
          this.DuizhangNickName = "待加入";
          this.exposureList.nickName = "待加入";
          this.prizeType = datasAll.draw.prizeList[0].prizeType;
          this.followStoreFlag = datasAll.organizeTeam.followStoreFlag;
          this.joinFlag = 5;
          this.userImg =
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
        } else {
          this.nickName = "待加入";
          this.memberPrize = 1;
          this.prizeType = "1";
          this.captain = 1;
          (this.followStoreFlag = "0"), (this.joinFlag = 5);
          this.DuizhangNickName = "待加入";
          this.exposureList.nickName = "待加入";
          this.userImg =
            "https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png";
        }
      } else {
        this.getGoodsList();
      }
    },
    getGoodsList() {
      let actStatus = sessionStorage.getItem("actStatus");
      console.log(actStatus, "asdasdasdasd");
      if (!this.isTemplate) {
        this.publicData.$emit("isKe", false);
        this.shareUserId = store.state.shareUserId;

        let goodsList = apis1[this.datas.goodsList];
        var shareUserId = this.shareUserId;
        goodsList(shareUserId, (data) => {
          console.log(data, "dataasdasdasdasd");
          var that = this;
          that.exposureList = data.data;
          if (!data.data.captain) {
            that.DuizhangNickName = data.data.shareNick;
          } else {
            that.DuizhangNickName = data.data.captain.nickName;
          }
          that.shareImage = data.data.shareImage;
          if (data.data.captain != undefined) {
            that.sendStatus = data.data.captain.sendStatus;
          } else {
            that.sendStatus = data.data.sendStatus;
          }
          that.shareFlag = data.data.shareFlag;
          that.followStoreFlag = data.data.followStoreFlag;
          that.captain = data.data.captainPrize;
          that.memberPrize = data.data.memberPrize;
          that.joinFlag = data.data.joinFlag;
          that.userImg = data.data.userImg;
          that.nickName = data.data.nickName;

          if (data.data.captain != undefined) {
            if (
              data.data.captain.userImg != "" ||
              data.data.captain.userImg != undefined
            ) {
              that.shareImage = data.data.captain.userImg;
            }
          }

          if (that.shareFlag == 1 && that.joinFlag != 4) {
            HelpPopupComService.create(
              this.exposureList,
              this.joinFlag,
              (submit) => {
                this.joinFlag = submit;
                HelpPopupComService.close();
              }
            );
          }

          if (data.data.captainList != undefined) {
            // 处理战队好友数据
            for (let index = 0; index < data.data.captainList.length; index++) {
              const element = data.data.captainList[index];
              if (element.memberCount < 5) {
                // 小于5 没有组成战队，加状态
                if (that.captainPrize.length == 0) {
                  that.captainPrize = that.captainPrize.concat(
                    element.teamList
                  );
                }
              } else {
                // 等于5， 组成功了
                that.captainPrizeSuccess =
                  that.captainPrizeSuccess.concat(element);
              }
            }
          }
          // 队长在后面， 颠倒数组
          that.captainPrizeSuccess.reverse();

          // 加状态
          for (let index1 = 0; index1 < 5; index1++) {
            if (index1 < that.captainPrize.length) {
              const element = that.captainPrize[index1];
              element.haspeople = true;
            } else {
              const noPeople = { haspeople: false };
              that.captainPrize.push(noPeople);
            }
          }

          this.prizeType = data.data.prizeType;
          this.captainList = data.data.captainList;
          if (data.data) {
            // 所有的值
            this.exposureList = data.data;
            if (
              this.exposureList.userImg != null &&
              this.exposureList.userImg != "" &&
              this.exposureList.userImg != "null"
            ) {
              this.attrTouXiang = this.exposureList.userImg;
            } else {
              this.attrTouXiang =
                "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg";
            }
          } else {
            this.exposureList = {};
            this.attrTouXiang =
              "https://img10.360buyimg.com/imgzone/jfs/t1/21383/2/6633/3879/5c5138d8E0967ccf2/91da57c5e2166005.jpg";
          }
        });
        if (actStatus == 2) {
          // ActivityOverComService.create((submit) => {
          //   ActivityOverComService.close();
          // });
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },

    toBeCaptain() {
      let actStatus = sessionStorage.getItem("actStatus");
      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          if (this.pointType) {
            this.pointType = false
            let getCaptainList = apis1[this.datas.getCaptainList];
          getCaptainList((data) => {
            this.followStoreFlag = 0;
            if (this.joinFlag == 2) {
              this.joinFlag = 4;
            }
            if (this.joinFlag == 5) {
              this.joinFlag = 3;
            }
            this.pointType = true
            this.publicData.$emit("isKe", false);
          });
          }
          
        }
      } else {
        if (this.isWebClick) {
          return
        }
        this.$toast("活动预览，仅供查看");
      }
    },

    toBeCaptain1() {
      let actStatus = sessionStorage.getItem("actStatus");
      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          if (this.pointType){
            this.pointType = false
            //如果需要关注
          followTeam((initdatas) => { });
          let getCaptainList = apis1[this.datas.getCaptainList];
          getCaptainList((data) => {
            this.publicData.$emit("isKe", false);
            this.followStoreFlag = 2;
            if (this.joinFlag == 2) {
              this.joinFlag = 4;
            }
            if (this.joinFlag == 5) {
              this.joinFlag = 3;
            }
            this.pointType = true
          });
          }
          
        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },
    //分享
    setShareButton1(index) {
      if (this.joinFlag == 3 || this.joinFlag == 4) {
        //如果需要关注
        followTeam((initdatas) => { });
        let actStatus = sessionStorage.getItem("actStatus");
        if (!this.isTemplate) {
          if (actStatus == 2) {
            // Toast
            this.$toast("活动已结束");
            return;
          }
          if (actStatus == 1) {
            this.$toast("活动尚未开始");
            // Toast('活动尚未开始');
            return;
          }
          if (actStatus == 3) {
            // Toast('活动正在惊醒中');
            // this.share = 1
            allShare(this.isTemplate, this, (callBackData) => {
              console.log(callBackData, "callBackData");
            });
          }
        } else {
          this.$toast("活动预览，仅供查看");
        }
      } else {
        if (!this.isWebClick) {
          this.$toast("成为队长才可以邀请好友哦~");
        }

        return;
      }
    },

    //分享
    setShareButton(index) {
      let actStatus = sessionStorage.getItem("actStatus");
      if (this.joinFlag == 3 || this.joinFlag == 4) {
        if (!this.isTemplate) {
          if (actStatus == 2) {
            // Toast
            this.$toast("活动已结束");
            return;
          }
          if (actStatus == 1) {
            this.$toast("活动尚未开始");
            // Toast('活动尚未开始');
            return;
          }
          if (actStatus == 3) {
            // Toast('活动正在惊醒中');
            // this.share = 1
            allShare(this.isTemplate, this, (callBackData) => {
              console.log(callBackData, "callBackData");
            });
          }
        } else {
          this.$toast("活动预览，仅供查看");
        }
      } else {
        if (!this.isTemplate) {
          if (actStatus == 2) {
            // Toast
            this.$toast("活动已结束");
            return;
          }
          if (actStatus == 1) {
            this.$toast("活动尚未开始");
            // Toast('活动尚未开始');
            return;
          }
        }
        if (this.isWebClick) {
          return
        }
        this.$toast("成为队长才可以邀请好友哦~");
        return;
      }
    },
    goToBuy(sku) {
      storeGoodsPoint(5)
    },
  },

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

<style lang="scss">
#appC {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/48337/27/3367/160379/5d108f89E7fbbfa81/2c5498be59f274b8.png);
  background-repeat: no-repeat;
  background-color: #43158c;
  background-size: 100%;
  min-height: 100%;
}

html {
  // background-color: #43158c;
}

.divideUp {
  color: #ccc;
  font-size: 0.26rem;
  width: 6rem;
  top: -0.7rem
}

.height3 {
  height: 3.53rem;
}


.top {
  width: 100%;
  top: 2.2rem;
}
.leader{
  width: 1.01rem;
  height: 0.34rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/73403/20/25097/2860/65a8d03fFc943734c/9068407dc09d9295.png);
  background-size: 100%;
  position: absolute;
  margin-top:0.9rem;
}
.others{
  width: 1.01rem;
  height: 0.33rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/240297/26/3324/2592/65aa5a11F99b6daba/ddd9aa6e9ab72bb4.png);
  background-size: 100%;
  position: absolute;
  margin-top:0.9rem;
}
.addBtn{
  width: 1.01rem;
  height: 0.34rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/237621/36/12392/1863/65aa5a10Fc28edc8e/ed9df0feee7a5fa6.png);
  background-size: 100%;
  position: absolute;
  margin-top:0.9rem;
}
</style>
