<template>
  <div class="fissionCouponList">
    <div
      class="fissionCouponListCouponBox"
      ref="fissionCouponList"
      @click.stop="styleClick('click', 'fissionCouponList')"
      @mousemove="styleClick('mousemove', 'fissionCouponList')"
      @mouseout="styleClick('mouseout')"
      :style="styleData.mainCoupon">
      <div class="listTitleDivAll"><img class="listTitleImgAll" src="//img10.360buyimg.com/imgzone/jfs/t1/182569/12/24349/3713/629dc0f4Ef273348e/35f98e943d3accdb.png" /></div>

      <div class="couponAllList" v-if="showCouponPage">
        <div :style="styleData.coupon" class="couponListDivAll" v-for="item in prizeInfoList">
          <div class="leftDivAll">
            <div class="couponPriceDivAll" :style="styleData.priceStyle">
              <span>¥</span>
              <span class="couponPriceSpan">{{ item.denomination }}</span>
            </div>

            <div class="couponDetailDivAll">
              <div class="prizeNameDiv">{{item.prizeName}}</div>
              <div class="conditionDiv">{{ item.condition }}</div>
              <div class="teamCntDiv">{{ item.teamCnt }}人团</div>
              <div class="progressDivAll">
                <div class="progressContainer">
                  <div class="van-progress">
                    <van-progress
                      :percentage="item.pinPercent"
                      v-if="!isNaN(parseInt(item.pinPercent))"
                      track-color="#ffb3a9"
                      pivot-text=""
                      text-color="#fff"
                      color="#f10400"
                      show-pivot
                      style="border-radius: 0 8px 11px 0"
                    />
                    <div class="pinPercentDiv">{{ item.pinPercent }}%</div>
                  </div>
                </div>
                <div class="dispKbnDiv">已拼{{ item.teamCnt - item.needPeopleCnt }}人</div>
              </div>
            </div>

            <div class="successDivAll">
              <img class="successImg" v-if="item.dispKbn == '9'" src="//img10.360buyimg.com/imgzone/jfs/t1/151531/38/23685/7386/629efd2fE80a1dc84/e7abc266fad5fd5e.png" />
              <img class="successImg" v-else-if="item.dispKbn == '4'" src="//img10.360buyimg.com/imgzone/jfs/t1/203351/5/23757/7455/629f08efE445c6cc7/3744a2ca02c172a3.png" />
            </div>
          </div>

          <div class="rightDiv">
            <div class="friendDivAll" @click="btnClick(4, item)">助力好友 ></div>
            <div class="couponBtnDivAll">
              <!-- 表示区分 1:立即抢券(未成团) 2:邀请好友（拼卷中）4:组队成功（发奖失败） 3:已抢完 9:去使用（已成团） -->
              <div class="couponBtn1" :style="styleData.couponBtn1" v-if="item.dispKbn == '1'" @click="btnClick(1, item)">立即拼券</div>
              <div class="couponBtn2" :style="styleData.couponBtn2" v-else-if="item.dispKbn == '9'" @click="btnClick(2, item)">去使用</div>
              <div class="couponBtn1" :style="styleData.couponBtn1" v-else-if="item.dispKbn == '2'" @click="btnClick(3, item)">邀请好友</div>
              <div class="couponBtn3" :style="styleData.couponBtn3" v-else-if="item.dispKbn == '4'">领券失败</div>
              <div class="couponBtn3" :style="styleData.couponBtn3" v-else-if="item.dispKbn == '3'">券已抢完</div>
            </div>

            <div class="couponStatusDivAll">
              <div class="couponStaus1" :style="styleData.couponStaus1" v-if="item.dispKbn == '1'">待拼券</div>
              <div class="couponStaus2" :style="styleData.couponStaus2" v-else-if="item.dispKbn == '9'">领取成功</div>
              <div class="couponStaus2" :style="styleData.couponStaus2" v-else-if="item.dispKbn == '3'">拼券结束</div>
              <div class="couponStaus2" :style="styleData.couponStaus2" v-else-if="item.dispKbn == '4'">领券失败</div>
              <div class="couponStaus3" :style="styleData.couponStaus3" v-else-if="item.dispKbn == '2'">拼券中...</div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="showCouponInvitePage" class="couponInvite" :style="styleData.couponInvite">
        <div class="topDivAll">
          <div class="leftDivAll leftDivAll1">
            <div class="couponPriceDivAll" :style="styleData.couponPriceDivAll">
              <span>¥</span>
              <span class="couponPriceSpan">{{ prizeDetailInfo.denomination }}</span>
            </div>

            <div class="couponDetailDivAll">
              <div class="prizeNameDiv">优惠券</div>
              <div class="conditionDiv">{{ prizeDetailInfo.condition }}</div>
              <div class="teamCntDiv">{{ prizeDetailInfo.teamCnt }}人团</div>
              <div class="progressDivAll">
                <div class="progressContainer">
                  <div class="van-progress">
                    <van-progress
                      :percentage="prizeDetailInfo.pinPercent"
                      v-if="!isNaN(parseInt(prizeDetailInfo.pinPercent))"
                      track-color="#ffb3a9"
                      pivot-text=""
                      text-color="#fff"
                      color="#f10400"
                      show-pivot
                      style="border-radius: 0 8px 11px 0"
                    />
                    <div class="pinPercentDiv">{{ prizeDetailInfo.pinPercent }}%</div>
                  </div>
                </div>
                <div class="dispKbnDiv">已拼{{ prizeDetailInfo.teamCnt - prizeDetailInfo.needPeopleCnt }}人</div>
              </div>
            </div>
          </div>
          <!--   // dispKbn: 1:立即抢券(未成团),2:邀请好友（拼卷中）,3:优惠券已抢完，4：跟其他队伍拼了券，5：队伍已满，6发奖失败,9:去使用 -->
          <div class="rightDiv2" v-if="prizeDetailInfo.dispKbn == '9'"><div>拼券结束</div></div>
          <div class="rightDiv1" v-else-if="prizeDetailInfo.dispKbn == '2' || prizeDetailInfo.dispKbn == '1'"><div>拼券中...</div></div>
          <div class="rightDiv2" v-else-if="prizeDetailInfo.dispKbn == '3' || prizeDetailInfo.dispKbn == '4' || prizeDetailInfo.dispKbn == '5' || prizeDetailInfo.dispKbn == '6'">
            <div>拼券结束</div>
          </div>
        </div>
        <div class="bottomDivAll">
          <div class="promptDiv1">
            <span class="promptDiv2" v-if="prizeDetailInfo.dispKbn == '2' || prizeDetailInfo.dispKbn == '1'">拼券成功后，所有成员均可获得优惠哦~</span>
            <span class="promptDiv3" v-else-if="prizeDetailInfo.dispKbn == '3'">抱歉，您晚到一步，优惠券已抢完！</span>
            <span class="promptDiv3" v-else-if="prizeDetailInfo.dispKbn == '9'">组队成功，恭喜获得优惠！</span>
            <span class="promptDiv3" v-else-if="prizeDetailInfo.dispKbn == '4'">该优惠您已经发起或参与过拼券啦！</span>
            <span class="promptDiv3" v-else-if="prizeDetailInfo.dispKbn == '5'">该队伍已经满员啦，赶紧看看其他优惠吧！</span>
            <span class="promptDiv3" v-else-if="prizeDetailInfo.dispKbn == '6'">抱歉，发奖失败！</span>
          </div>
          <div :class="[isWebClick ? 'friendListDivAll friendListDivAll1' : 'friendListDivAll']">
            <div class="friendItemDivAll" v-for="(items, index) in teamMemberList">
              <div class="friendDetailDivAll">
                <div class="userImgDiv"><img class="userImg" :src="items.userImg" /></div>
                <div class="nickNameDiv">{{ items.nickName }}</div>
              </div>
            </div>
          </div>
          <!--   // dispKbn: 1:立即抢券(未成团),2:邀请好友（拼卷中）,3:优惠券已抢完，4：跟其他队伍拼了券，5：队伍已满，6发奖失败,9:去使用 -->
          <div class="btnDivAll">
            <div class="bottomBtnDiv" :style="styleData.bottomBtnDiv" v-if="prizeDetailInfo.dispKbn == '1'" @click="joinTeam"><span id="invite-btn">参与拼券</span></div>
            <div class="bottomBtnDiv" :style="styleData.bottomBtnDiv" v-else-if="prizeDetailInfo.dispKbn == '9'" @click="btnClick(2, prizeDetailInfo)">
              <span id="invite-btn">去使用</span>
            </div>
            <div class="bottomBtnDiv" :style="styleData.bottomBtnDiv" v-else-if="prizeDetailInfo.dispKbn == '2'" @click="btnClick(3, prizeDetailInfo)">
              <span id="invite-btn">邀请好友</span>
            </div>

            <div
              class="bottomBtnDivRight"
              :style="styleData.bottomBtnDivRight"
              v-if="prizeDetailInfo.dispKbn == '1' || prizeDetailInfo.dispKbn == '2' || prizeDetailInfo.dispKbn == '9'"
            >
              <span id="invite-btn" @click="btnClick(5, prizeDetailInfo)">发现更多优惠</span>
            </div>
            <div class="bottomBtnDivRight1" :style="styleData.bottomBtnDivRight1" v-else><span id="invite-btn" @click="btnClick(5, prizeDetailInfo)">发现更多优惠</span></div>
          </div>

          <!-- <div class="bottomBtnDivGray" v-else><span id="invite-btn">立即参与拼券</span></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from '../../../util/apis1.js';
import store from '../../../store/store';
import Vue from 'vue';
import { Progress } from 'vant';
import { getUrlQueryValueByKey, goToShopPage, goUseCoupon, moreCoupon } from '../../../util/tools.js';
import { callShare4MiniProgram } from '../../../util/share';
import { BargainMemberPopComService1, ConpouTeamPopService, joinVipService1 } from '../../../util/comCreate.js';
import { hdzxtFailPopService, hdzxtSuccessPopService, hdzxtCouponPopPopService, hdzxtCouponFriendPopPopService } from '../../../util/hdzxtcomCreate.js';
import ButtomBtn from '../buttomBtn/buttomBtn';
import dateUtil from '../../../util/dateUtil';
import { teamShare } from '../../../js/share.js';

Vue.use(Progress);

let { setShare, fissionCoupon, fissionCouponFight, fissionCouponTeamMember, fissionCouponShare, fissionJoinCoupon, getCanJumpInLine, getJoinTeam } = apis1;

export default {
  components: { ButtomBtn },
  props: ['datas', 'keyData', 'styleData', 'isTemplate', 'templateData', 'isWebClick', 'modifyContent', 'typeNameValue'],
  data() {
    return {
      showCouponPage: false, // 是否显示列表页面 true 表示 false 不表示
      showCouponInvitePage: false, // 是否显示优惠券详情页面 true 表示 false 不表示
      shopName: '', // 店铺名
      teamMemberList: [], // 队伍成员列表
      prizeInfoList: [], // 优惠券列表
      prizeDetailInfo: [], // 优惠券详情
      prizeDetailInfo1: [],
      currentRate: 0, // 当前比例
      type: '', // 类型 1 主端 0 客端
      showAddBtn: '', // 是否显示待邀请用户的头像框 true 表示 false 不表示
      addBtnNum: '', // 显示待邀请用户数
      shopId: '', // 店铺ID
      showInviteBtn: '', // 是否显示[邀请好友], [参与拼团]的标识 true 表示 false 不表示
      teamId: '', // 队伍ID
      autoWidth: {
        width: ''
      }, // 队伍列表的宽度

      alertCouponPrize: '', // 显示面额,
      text: '',
      pinTuanFlag: true,
      statusCoupon: 0,
      styleDataOld: {}
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();

    //是否是被邀请者
    this.shareUserId = store.state.shareUserId;
  },

  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() {
      // console.log(location.origin, 'location.origin ');
      // this.publicData.$emit('isKe', false);
      var datasAll = this.templateData;
      // console.log(this.typeNameValue, 'typeNameValue');
      if (this.isTemplate == true) {
        if (!this.isWebClick) {
          this.$toast('活动预览，仅供查看');
        } else {
          if (this.typeNameValue == 3) {
            console.log(this.isWebClick,'zxcccccccx1111111');
            this.styleClick('click', 'fissionCouponList');
            //客端
            this.showCouponPage = false;
            this.showCouponInvitePage = true;
            var shareData = {
              data: {
                prizeInfoList: [
                  {
                    prizeInfoId: '1588376287786209282',
                    teamId: '1588377062930575361',
                    prizeName: '21',
                    prizeImg: '//img10.360buyimg.com/imgzone/jfs/t1/215393/22/4731/33329/61946651E535ea01f/5cee5951d6bd1612.png',
                    needPeopleCnt: 2,
                    teamCnt: 2,
                    denomination: 5,
                    condition: '满20元使用',
                    robbedPercent: '0',
                    dispKbn: '2',
                    prizeFlag: false,
                    pinPercent:0
                  }
                ],
                status: 0,
                joinFlag: false
              },
              resp_code: 0,
              resp_msg: ''
            };
            var prizeInfoList0 = shareData.data.prizeInfoList[0];
            this.prizeDetailInfo = prizeInfoList0;
            this.teamMemberList = [
              {
                userImg: '//img10.360buyimg.com/imgzone/jfs/t1/196696/8/24987/3708/629f0f7eE25a07978/81a99534baeeea16.png'
              },
              {
                userImg: '//img10.360buyimg.com/imgzone/jfs/t1/196696/8/24987/3708/629f0f7eE25a07978/81a99534baeeea16.png'
              }
            ];
          } else if (this.typeNameValue == 0) {
            this.prizeInfoList = [];
            this.showCouponInvitePage = false;
            this.showCouponPage = true;
            // 没有模板的数据-创建之前
            this.prizeInfoList = [
              {
                condition: '满10元使用', // 优惠券名称
                denomination: 4.9, // 面额
                dispKbn: '1',
                needPeopleCnt: 2, // 需要人数
                prizeImg: '//img10.360buyimg.com/imgzone/jfs/t1/172683/6/10554/3757/60a4cb50E92a2c1d0/f535f17696ddf14c.png', // 图片
                prizeName: '优惠券1',
                robbedPercent: '0', // 已抢百分比
                teamCnt: 2,
                pinPercent: 0
              },
              {
                condition: '满10元使用', // 优惠券名称
                denomination: 19.9, // 面额
                dispKbn: '3',
                needPeopleCnt: 3, // 需要人数
                prizeImg: '//img10.360buyimg.com/imgzone/jfs/t1/172683/6/10554/3757/60a4cb50E92a2c1d0/f535f17696ddf14c.png', // 图片
                prizeName: '优惠券2',
                robbedPercent: '0', // 已抢百分比
                teamCnt: 3,
                pinPercent: 0
              },
              {
                condition: '满10元使用', // 优惠券名称
                denomination: 9.9, // 面额
                dispKbn: '9',
                needPeopleCnt: 4, // 需要人数
                prizeImg: '//img10.360buyimg.com/imgzone/jfs/t1/172683/6/10554/3757/60a4cb50E92a2c1d0/f535f17696ddf14c.png', // 图片
                prizeName: '优惠券3',
                robbedPercent: '0', // 已抢百分比
                teamCnt: 4,
                pinPercent: 0
              }
            ];
          }
          return;
        }
        console.log(datasAll, 'datasAll');

        if (datasAll) {
          let fissionCouponPrizeList = datasAll.fissionCoupon.draw.prizeList;
          // 没有模板的数据-创建之后
          for (let index = 0; index < fissionCouponPrizeList.length; index++) {
            const element = fissionCouponPrizeList[index];
            // console.log(element, 'elementelement');
            var condition = '';
            if (element.prizeJson) {
              // 编辑
              let prizeJson = JSON.parse(element.prizeJson);
              condition = element.fullPriceInfo;
            } else if (element.couponData) {
              // 新增
              condition = element.fullPriceInfo;
            }
            const prizeCoupon = {
              condition: '满' + condition + '元使用', // 优惠券名称
              denomination: element.priceInfo, // 面额
              dispKbn: '1',
              needPeopleCnt: element.cotinueSignDay, // 需要人数
              prizeImg: element.showImg, // 图片
              prizeName: element.prizeName,
              robbedPercent: '0', // 已抢百分比
              teamCnt: element.cotinueSignDay,
              pinPercent: 0
            };
            this.prizeInfoList.push(prizeCoupon);
            this.showCouponPage = true;
          }
        } else {
          // 没有模板的数据-创建之前
          for (let index = 0; index < 4; index++) {
            const prizeCoupon = {
              condition: '满10元使用', // 优惠券名称
              denomination: 9.9, // 面额
              dispKbn: '1',
              needPeopleCnt: index + 2, // 需要人数
              prizeImg: '//img10.360buyimg.com/imgzone/jfs/t1/172683/6/10554/3757/60a4cb50E92a2c1d0/f535f17696ddf14c.png', // 图片
              prizeName: '优惠券' + (index + 1),
              robbedPercent: '0', // 已抢百分比
              teamCnt: index + 2,
              pinPercent: 0
            };
            this.prizeInfoList.push(prizeCoupon);
            if (!this.isWebClick) {
              this.showCouponPage = true;
            }
          }
        }
      } else {
        this.type = store.state.shareUserId ? '0' : '1'; // 1 主端 0 客端
        this.teamId = store.state.teamId;
        fissionCoupon(1, fission => {
          // this.publicData.$emit('isKe', false);
          if (fission.data.isMemberOk == 1) {
            joinVipService1.create(fission.data, submit => {
              joinVipService1.close();
              return;
            });
          } else if (fission.data.isMemberOk == 2) {
            BargainMemberPopComService1.create(submit => {
              BargainMemberPopComService1.close();
              return;
            });
          }
          for (var i = 0; i < fission.data.prizeInfoList.length; i++) {
            fission.data.prizeInfoList[i].pinPercent = parseInt(
              (parseInt(fission.data.prizeInfoList[i].teamCnt - fission.data.prizeInfoList[i].needPeopleCnt) / parseInt(fission.data.prizeInfoList[i].teamCnt)) * 100
            );
          }
          this.prizeInfoList = fission.data.prizeInfoList;

          this.shopName = fission.data.shopName;
          if (this.type == 0) {
            this.showCouponPage = false;
            this.showCouponInvitePage = true;
            this.setPrizeDetail(fission);
          } else {
            this.showCouponPage = true;
            this.showCouponInvitePage = false;
          }
        });
      }
      this.publicData.$emit('isDrawRolled', true, this.isTemplate);
    },
    //立即拼券 2去使用 3 邀请 4 查看助力好友 5 查看更多优惠
    btnClick(flag, couponItemData) {
      let actStatus = sessionStorage.getItem('actStatus');
      console.log(couponItemData, 'couponItemData');
      if (this.isTemplate == true) {
        if (!this.isWebClick) {
          this.$toast('活动预览，仅供查看');
        }
        return;
      }
      if (actStatus == 2) {
        this.$toast('活动已结束');
        return;
      }
      if (actStatus == 1) {
        this.$toast('活动尚未开始');
        return;
      }

      switch (flag) {
        case 1:
          console.log('立即拼券');
          getCanJumpInLine(couponItemData.prizeInfoId, getCanJumpInLineData => {
            console.log(getCanJumpInLineData, 'getCanJumpInLineData');
            if (getCanJumpInLineData.data.length == 0) {
              //没有可插队的团则直接发起拼团
              this.fissionCouponFightData(couponItemData);
            } else {
              //又可插队的则显示插队弹框
              getCanJumpInLineData.pinCouponData = couponItemData;
              hdzxtCouponPopPopService.create(getCanJumpInLineData, this.isTemplate, this.styleDataOld, callBackData => {
                hdzxtCouponPopPopService.close();
                console.log(callBackData, 'callBackData');
                if (callBackData) {
                  let flag = callBackData.flag;
                  if (flag == 1) {
                    //发起拼券
                    this.fissionCouponFightData(callBackData.couponItemData);
                  } else if (flag == 2) {
                    //插队
                    this.getJoinTeamData(callBackData.couponItemData);
                  }
                }
              });
            }
          });

          break;
        case 2:
          let shopId = store.state.shopId;
          goUseCoupon();
          break;
        case 3:
          teamShare(this.isTemplate, couponItemData.teamId, this, callBackData => {
            // console.log(callBackData, 'callBackData');
          });
          break;
        case 4:
          fissionCouponTeamMember(couponItemData.prizeInfoId, couponItemData.teamId, data => {
            // this.teamMemberList = data.data.teamMemberList;
            hdzxtCouponFriendPopPopService.create(data.data, this.isTemplate, this.styleDataOld, () => {
              hdzxtCouponFriendPopPopService.close();
            });
          });

          break;
        case 5:
          moreCoupon(this, () => {});
          break;
      }
    },
    //拼券
    fissionCouponFightData(couponItemData) {
      //没有可插队的团则直接发起拼团
      fissionCouponFight(couponItemData.prizeInfoId, data => {
        if (data.data.joinFlag) {
          data.data.essmsg = '该优惠您已经参加过啦，同一优惠活动期间只能参与一次';
          data.data.essmsgTitle = '拼券失败';
          data.data.btnText = '发现更多优惠';
          hdzxtFailPopService.create(data.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          return;
        }
        this.prizeDetailInfo = data.data.prizeDetailInfo;
        this.teamMemberList = data.data.teamMemberList;
        this.teamId = this.prizeDetailInfo.teamId;
        // <!-- 表示区分 1:立即抢券(未成团) 2:邀请好友（拼卷中） 3:已抢完 9:去使用（已成团） -->
        if (data.data.prizeDetailInfo.dispKbn == 9) {
          //拼券成功重新请求接口
          let prizeDetailInfo = data.data.prizeDetailInfo;
          hdzxtSuccessPopService.create(prizeDetailInfo, this.isTemplate, this.styleDataOld, () => {
            hdzxtSuccessPopService.close();
          });
          this.initData();
        }
        if (data.data.prizeDetailInfo.dispKbn == 3) {
          //拼券成功重新请求接口
          data.data.essmsg = '优惠券已经抢完';
          data.data.essmsgTitle = '拼券失败';
          data.data.btnText = '发现更多优惠';
          hdzxtFailPopService.create(data.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });

          this.initData();
        } else if (data.data.prizeDetailInfo.dispKbn == 2) {
          //参团成功 0 组队成功 TODO
          data.data.btnText = '邀请好友';
          data.data.essmsg = '还差' + data.data.prizeDetailInfo.needPeopleCnt + '人即有机会获得优惠，赶紧邀请好友加速组队~';
          data.data.essmsgTitle = '成功加入拼券！';
          this.styleDataOld.failPopBackground.backgroundImage = "url('//img10.360buyimg.com/imgzone/jfs/t1/188173/16/25257/46736/62a046e8E90e553d3/79fc981eaecbfae3.png')";

          hdzxtFailPopService.create(data.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          this.initData();
        }
      });
    },
    //去插队
    getJoinTeamData(couponItemData) {
      getJoinTeam(couponItemData.prizeInfoId, couponItemData.teamId, joinTeamData => {
        console.log(joinTeamData, '插队信息');
        //TODO 奖品信息缺少
        //返回值:1:插队成功,2:已经参与过该优惠券活动，3：晚到一步，队伍已满，4：优惠券已发完，5：发奖失败
        if (joinTeamData.data.status == 1) {
          //参团成功 0 组队成功
          joinTeamData.data.btnText = '邀请好友';
          joinTeamData.data.essmsg = '还差' + joinTeamData.data.needPeopleCnt + '人即有机会获得优惠，赶紧邀请好友加速组队~';
          joinTeamData.data.essmsgTitle = '插队成功！';
          joinTeamData.data.prizeDetailInfo = couponItemData;
          this.styleDataOld.failPopBackground.backgroundImage = "url('//img10.360buyimg.com/imgzone/jfs/t1/188173/16/25257/46736/62a046e8E90e553d3/79fc981eaecbfae3.png')";

          hdzxtFailPopService.create(joinTeamData.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (joinTeamData.data.status == 2) {
          joinTeamData.essmsg = '该优惠您已经发起或参与过拼券啦';
          joinTeamData.essmsgTitle = '插队失败';
          joinTeamData.btnText = '发现更多优惠';
          hdzxtFailPopService.create(joinTeamData, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (joinTeamData.data.status == 3) {
          joinTeamData.essmsg = '该队伍已经满员啦，赶紧看看其他优惠吧';
          joinTeamData.essmsgTitle = '插队失败';
          joinTeamData.btnText = '发现更多优惠';
          hdzxtFailPopService.create(joinTeamData, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (joinTeamData.data.status == 4) {
          joinTeamData.essmsg = '优惠券已经抢完';
          joinTeamData.essmsgTitle = '插队失败';
          joinTeamData.btnText = '发现更多优惠';
          hdzxtFailPopService.create(joinTeamData, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (joinTeamData.data.status == 5) {
          joinTeamData.essmsg = '发奖失败';
          joinTeamData.essmsgTitle = '插队失败';
          joinTeamData.btnText = '发现更多优惠';
          hdzxtFailPopService.create(joinTeamData, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (joinTeamData.data.status == 6) {
          let prizeDetailInfo = joinTeamData.data.fissionPrizeInfoVO;
          hdzxtSuccessPopService.create(prizeDetailInfo, this.isTemplate, this.styleDataOld, () => {
            hdzxtSuccessPopService.close();
          });
        }
        this.initData();
      });
    },

    //被邀请者
    setPrizeDetail(data) {
      //被邀请人进入调用接口
      fissionCouponShare(shareData => {
        var prizeInfoList0 = shareData.data.prizeInfoList[0];
        prizeInfoList0.pinPercent = parseInt((parseInt(prizeInfoList0.teamCnt - prizeInfoList0.needPeopleCnt) / parseInt(prizeInfoList0.teamCnt)) * 100);
        for (var i = 0; i < prizeInfoList0.teamCnt; i++) {
          var obj = {
            userImg: '//img10.360buyimg.com/imgzone/jfs/t1/196696/8/24987/3708/629f0f7eE25a07978/81a99534baeeea16.png'
          };
          this.teamMemberList = this.teamMemberList.concat(obj);
        }
        this.prizeDetailInfo = prizeInfoList0;
        this.statusCoupon = shareData.data.status;

        fissionCouponTeamMember(this.prizeDetailInfo.prizeInfoId, store.state.teamId, data => {
          let teamMemberList = data.data.teamMemberList;
          for (var i = 0; i < teamMemberList.length; i++) {
            teamMemberList[i].nickName = teamMemberList[i].nickName.substr(0, 1) + '**' + teamMemberList[i].nickName.substr(-1, 1);

            this.teamMemberList[i] = teamMemberList[i];
          }
          this.$forceUpdate();

          if (this.teamMemberList.length >= this.prizeDetailInfo.teamCnt) {
            this.pinTuanFlag = false;
          } else {
            this.pinTuanFlag = true;
          }
          this.teamId = store.state.teamId;
          this.showCouponPage = false;
          this.showCouponInvitePage = true;
          if (this.prizeDetailInfo.dispKbn == '9') {
            this.showInviteBtn = false;
          } else {
            this.showInviteBtn = true;
          }
          if (this.prizeDetailInfo.needPeopleCnt > 0) {
            this.showAddBtn = true;
          } else {
            this.showAddBtn = false;
          }
          this.addBtnNum = this.prizeDetailInfo.needPeopleCnt;
          this.alertCouponPrize = this.prizeDetailInfo.denomination;
          // if (this.statusCoupon == 50027) {
          //   shareData.data.essmsg = '该优惠您已经参加过啦，同一优惠 活动期间只能参与一次';
          //   shareData.data.essmsgTitle = '拼券失败';
          //   shareData.data.btnText = '发现更多优惠';
          //   hdzxtFailPopService.create(shareData.data, this.isTemplate, this.styleDataOld, submit => {
          //     hdzxtFailPopService.close();
          //   });
          // }
        });
      });
    },

    // 被邀请者参与拼团
    joinTeam() {
      // var obj = document.getElementById("index");
      document.getElementById('invite-btn').disabled = true;
      fissionJoinCoupon(fission => {
        if (fission.data.status == 50024) {
          // this.$toast('此团不存在');
          fission.data.essmsg = '此团不存在';
          fission.data.essmsgTitle = '拼券失败';
          fission.data.btnText = '发现更多优惠';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });

          return;
        } else if (fission.data.status == 50025) {
          // this.$toast('该队伍已经满员啦，赶紧看看其他优惠吧');
          fission.data.essmsg = '该队伍已经满员啦，赶紧看看其他优惠吧';
          fission.data.essmsgTitle = '拼券失败';
          fission.data.btnText = '发现更多优惠';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          return;
        } else if (fission.data.status == 50026) {
          // this.$toast('优惠券不存在');
          fission.data.essmsg = '优惠券不存在';
          fission.data.essmsgTitle = '拼券失败';
          fission.data.btnText = '发现更多优惠';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          return;
        } else if (fission.data.status == 50027) {
          // this.$toast('该优惠您已经发起或参与过拼券啦');
          fission.data.essmsg = '该优惠您已经发起或参与过拼券啦';
          fission.data.essmsgTitle = '拼券失败';
          fission.data.btnText = '发现更多优惠';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          return;
        } else if (fission.data.status == 50028) {
          // this.$toast('优惠券已经抢完');
          fission.data.essmsg = '优惠券已经抢完';
          fission.data.essmsgTitle = '拼券失败';
          fission.data.btnText = '发现更多优惠';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
          return;
        } else if (fission.data.status == 1) {
          //参团成功 0 组队成功
          fission.data.btnText = '邀请好友';
          fission.data.essmsg = '还差' + fission.data.prizeInfoList[0].needPeopleCnt + '人即有机会获得优惠，赶紧邀请好友 加速组队~';
          fission.data.essmsgTitle = '成功加入拼券！';
          fission.data.prizeDetailInfo = fission.data.prizeInfoList[0];
          this.styleDataOld.failPopBackground.backgroundImage = "url('//img10.360buyimg.com/imgzone/jfs/t1/188173/16/25257/46736/62a046e8E90e553d3/79fc981eaecbfae3.png')";
          hdzxtFailPopService.create(fission.data, this.isTemplate, this.styleDataOld, () => {
            hdzxtFailPopService.close();
          });
        } else if (fission.data.status == 0) {
          //参团成功 0 组队成功
          let prizeDetailInfo = fission.data.prizeDetailInfo;
          hdzxtSuccessPopService.create(prizeDetailInfo, this.isTemplate, this.styleDataOld, () => {
            hdzxtSuccessPopService.close();
          });
        }

        this.showCouponPage = false;
        this.showCouponInvitePage = true;

        // for (var i = 0; i < fission.data.prizeInfoList.length; i++) {
        fission.data.prizeInfoList[0].pinPercent = parseInt(
          (parseInt(fission.data.prizeInfoList[0].teamCnt - fission.data.prizeInfoList[0].needPeopleCnt) / parseInt(fission.data.prizeInfoList[0].teamCnt)) * 100
        );
        // }
        this.prizeDetailInfo = fission.data.prizeInfoList[0];

        let teamMemberList = fission.data.teamMemberList;
        for (var i = 0; i < teamMemberList.length; i++) {
          teamMemberList[i].nickName = teamMemberList[i].nickName.substr(0, 1) + '**' + teamMemberList[i].nickName.substr(-1, 1);

          this.teamMemberList[i] = teamMemberList[i];
        }
        this.$forceUpdate();

        // if (this.prizeDetailInfo.dispKbn == '9') {
        //   this.showInviteBtn = false;
        // } else {
        //   this.showInviteBtn = true;
        // }

        document.getElementById('invite-btn').disabled = false;
      });
    }
  },
  filters: {
    //时间转换
    dateTime(val) {
      if (val) {
        return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
      }
      return val;
    },
    twostar: function(value) {
      if (!value) {
        return '';
      }
      return value.substr(0, 1) + '**' + value.substr(-1, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.listTitleDivAll {
  display: flex;
  justify-content: center;
  .listTitleImgAll {
    width: 2.03rem;
    height: 0.34rem;
    margin: 0.2rem 0 0.28rem 0;
  }
}
.couponListDivAll,
.couponInvite {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .leftDivAll {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding-left: 0.3rem;
    .couponPriceDivAll {
      font-size: 0.3rem;
      color: #f2270c;
      width: 1.5rem;
      font-weight: bold;
      .couponPriceSpan {
        font-size: 0.48rem;
        line-height: 0.48rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f2270c;
      }
    }
    .couponDetailDivAll {
      margin-left: 0.3rem;
      display: flex;
      flex-direction: column;
      text-align: initial;
      .prizeNameDiv {
        font-size: 0.36rem;
        color: #262626;
        font-weight: bold;
        line-height: 0.36rem;
      }
      .conditionDiv {
        font-size: 0.24rem;
        color: #262626;
        line-height: 0.24rem;
        margin-top: 0.08rem;
        margin-bottom: 0.18rem;
      }
      .teamCntDiv {
        font-size: 0.24rem;
        color: #f2270c;
        line-height: 0.24rem;
        font-weight: bold;
      }
      .progressDivAll {
        display: flex;
        align-items: center;
        margin-top: 0.12rem;
        .progressContainer {
          width: 1.5rem;
          height: 0.26rem;
          border: 2px solid #f10400;
          border-radius: 20px;
          font-size: 0.17rem;
          color: #ffc15a;

          overflow: hidden;
          position: relative;
          line-height: 0.2rem;
          .van-progress {
            width: 100%;
            height: 100%;
            .pinPercentDiv {
              position: absolute;
              left: 0.1rem;
              top: 0;
              width: 100%;
              color: #ffffff;
            }
          }
        }
        .dispKbnDiv {
          color: #8c8c8c;
          font-size: 0.2rem;
          line-height: 0.2rem;
          margin-left: 0.14rem;
        }
      }
    }
    .successDivAll {
      position: absolute;
      right: -0.6rem;
      top: -0.1rem;
      .successImg {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
  }
  .rightDiv {
    display: flex;
    flex-direction: column;
    // padding-right: 0.3rem;
    .friendDivAll {
      font-size: 0.24rem;
      line-height: 0.24rem;
      color: #3399ff;
    }
    .couponBtnDivAll {
      margin: 0.2rem 0;
      .couponBtn1 {
        padding: 0.24rem 0rem;
        color: #ffffff;
        background: linear-gradient(to right, #f2270c, #fe621f);
        border-radius: 0.34rem;
        font-size: 0.24rem;
        line-height: 0.24rem;
        width: 1.5rem;
      }
      .couponBtn2 {
        padding: 0.24rem 0rem;
        color: #ffffff;
        background: linear-gradient(to right, #ff9900, #ff9900);
        border-radius: 0.34rem;
        font-size: 0.24rem;
        line-height: 0.24rem;
        width: 1.5rem;
      }
      .couponBtn3 {
        padding: 0.24rem 0rem;
        color: #ffffff;
        background: linear-gradient(to right, #bfbfbf, #bfbfbf);
        border-radius: 0.34rem;
        font-size: 0.24rem;
        line-height: 0.24rem;
        width: 1.5rem;
      }
    }
    .couponStatusDivAll {
      .couponStaus1 {
        font-size: 0.24rem;
        line-height: 0.24rem;
        color: #c;
      }
      .couponStaus2 {
        font-size: 0.24rem;
        line-height: 0.24rem;
        color: #00bb66;
      }
      .couponStaus3 {
        font-size: 0.24rem;
        line-height: 0.24rem;
        color: #ff9900;
      }
    }
  }
  .leftDivAll1 {
    height: 2.02rem;
  }
  .rightDiv1 {
    height: 2.02rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff9900;
    font-size: 0.24rem;
    line-height: 0.24rem;
    margin-right: 0.26rem;
  }
  .rightDiv2 {
    height: 2.02rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c4c4c4;
    font-size: 0.24rem;
    line-height: 0.24rem;
    margin-right: 0.26rem;
  }
  .topDivAll {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .bottomDivAll {
    margin-top: 0.52rem;
    .promptDiv1 {
      font-size: 0.28rem;
      left: 0.28rem;
      color: #262626;
    }

    .friendListDivAll {
      display: flex;
      flex-direction: row;
      margin-top: 0.45rem;
      overflow-x: scroll;
      padding: 0 0.1rem;
      .friendItemDivAll {
        width: 1rem;
        // height: 1rem;
        margin-right: 0.26rem;
        .friendDetailDivAll {
          display: flex;
          flex-direction: column;
          width: 1rem;

          .userImgDiv {
            .userImg {
              width: 1rem;
              height: 1rem;
              border-radius: 50%;
            }
          }
          .nickNameDiv {
            font-size: 0.18rem;
            left: 0.18rem;
            color: #262626;
          }
        }
      }
    }
    .friendListDivAll1 {
      overflow-x: hidden;
    }
    .bottomBtnDiv {
      width: 6rem;
      color: #ffffff;
      font-size: 0.34rem;
      line-height: 0.34rem;
      background: linear-gradient(to right, #f2270d, #fe631f);
      padding: 0.28rem 0;
      text-align: center;
      border-radius: 0.45rem;
      margin-top: 0.34rem;
      margin-right: 0.1rem;
    }
    .bottomBtnDivRight {
      width: 6rem;
      color: #ffffff;
      font-size: 0.34rem;
      line-height: 0.34rem;
      background: linear-gradient(to right, #ff9900, #ff9900);
      padding: 0.28rem 0;
      text-align: center;
      border-radius: 0.45rem;
      margin-top: 0.34rem;
      // border: 2px solid #f2270d;
      margin-left: 0.1rem;
    }
    .bottomBtnDivRight1 {
      // width: 6rem;
      width: 100%;
      color: #ffffff;
      font-size: 0.34rem;
      line-height: 0.34rem;
      background: linear-gradient(to right, #ff9900, #ff9900);
      padding: 0.28rem 0.45rem;
      text-align: center;
      border-radius: 0.45rem;
      margin-top: 0.34rem;
    }
    .bottomBtnDivGray {
      width: 6rem;
      color: #ffffff;
      font-size: 0.34rem;
      line-height: 0.34rem;
      background: linear-gradient(to right, #bfbfbf, #bfbfbf);
      padding: 0.28rem 0;
      text-align: center;
      border-radius: 0.45rem;
      margin-top: 0.34rem;
    }
  }
  .btnDivAll {
    display: flex;
    padding: 0 0.15rem;
  }
}
.couponInvite {
  display: flex;
  flex-direction: column;
  justify-content: inherit;
}
</style>
