<template>
  <div
    class="fissionCouponList"
    ref="fissionCouponList"
    @click="styleClick('click', 'fissionCouponList')"
    @mousemove="styleClick('mousemove', 'fissionCouponList')"
    @mouseout="styleClick('mouseout')"
  >
    <div
      class="fissionCouponListCouponBox"
      v-show="this.showCouponPage"
      :style="styleData.mainCoupon"
    >
      <div :style="styleData.coupon" v-for="item in prizeInfoList">
        <div class="coupon-image">
          <img :src="item.prizeImg" alt="" style="width: 100%; height: 100%" />
        </div>
        <div style="margin-left: 0.2rem">
          <div
            style="
              width: 3rem;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <div :style="styleData.groupNumber">{{ item.teamCnt }}人团</div>
            <div :style="styleData.couponName" style="width: 1.7rem">
              {{ item.prizeName }}
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              align-items: flex-end;
              margin-top: 0.9rem;
            "
          >
            <div :style="styleData.couponDenomination">
              <span style="font-size: 0.36rem">¥</span>{{ item.denomination }}
            </div>
            <div :style="styleData.couponQuota">{{ item.condition }}</div>
          </div>
        </div>
        <div
          v-if="item.dispKbn == 1"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 0.4rem;
          "
        >
          <div class="circle-rate">
            <div class="van-circle" style="width: 1rem; height: 1rem">
              <van-circle
                v-model="currentRate"
                color="red"
                fill="#fff"
                size="1rem"
                layer-color="#ebedf0"
                :text="text"
                :rate="item.robbedPercent"
                :speed="100"
                :clockwise="false"
                :stroke-width="40"
              />
              <div class="van-circle__text">已抢{{ item.robbedPercent }}%</div>
            </div>
          </div>
          <div
            :style="styleData.teamBtn"
            @click="flight(item)"
            style="margin: 0.1rem auto 0px"
          >
            立即拼券
          </div>
        </div>
        <div
          v-else-if="item.dispKbn == 2"
          class="team-status"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div>
            <div :style="styleData.teamBtn" @click="flight(item)" style="">邀请好友</div>
            <div class="remain-num">
              还差
              <span style="color: rgb(255, 0, 42)">{{
                item.needPeopleCnt
              }}</span>
              人
            </div>
          </div>
        </div>
        <div
          v-if="item.dispKbn == 9"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 0.5rem;
          "
        >
          <div class="circle-rate" style="margin-top: 0rem">
            <div
              class="van-circle"
              style="width: 1rem; height: 1rem; margin-top: 0rem"
            >
              <van-circle
                v-model="currentRate"
                color="red"
                fill="#fff"
                size="50"
                layer-color="#ebedf0"
                :text="text"
                rate="100"
                :speed="100"
                :clockwise="false"
                :stroke-width="40"
              />
              <div class="van-circle__text">已成团</div>
            </div>
          </div>
          <div
            v-if="item.dispKbn == 9"
            :style="styleData.teamBtn"
            @click="gotoUse()"
            style="margin: 0.1rem auto 0px"
          >
            去使用
          </div>
          <div
            v-else
            :style="styleData.teamBtn"
            @click="flight(item)"
            style="margin: 0.1rem auto 0px"
          >
            立即拼券
          </div>
          <div
            v-if="item.dispKbn == 9"
            @click="seeTeam(item)"
            style="margin: 0.1rem auto 0px; font-size: 12px"
          >
            查看队伍
          </div>
        </div>
        <div
          v-if="item.dispKbn == 3"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div class="team-status-qiangwan">已抢完</div>
        </div>
      </div>
    </div>
    <div
      class="start-spell-coupon"
      v-show="this.showCouponInvitePage"
      style="background-color: white; width: 100%; height: 11rem"
    >
      <div class="coupon-single">
        <div class="coupon-image">
          <img
            :src="this.prizeDetailInfo.prizeImg"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
        <div style="margin-left: 0.2rem">
          <div
            style="
              width: 3.4rem;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <div :style="styleData.groupNumber">
              {{ this.prizeDetailInfo.teamCnt }}人团
            </div>
            <div :style="styleData.couponName" style="width: 2rem">
              {{ this.prizeDetailInfo.prizeName }}
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-start;
              align-items: flex-end;
              margin-top: 0.6rem;
            "
          >
            <div :style="styleData.couponDenomination">
              <span style="font-size: 0.36rem">¥</span>
              {{ this.prizeDetailInfo.denomination }}
            </div>
            <div :style="styleData.couponQuota">{{ prizeDetailInfo.condition }}</div>
          </div>
          <div class="progress-container">
            <div class="van-progress">
              <van-progress
                :percentage="prizeDetailInfo.robbedPercent"
                v-if="!isNaN(parseInt(prizeDetailInfo.robbedPercent))"
                :stroke-width="18"
                track-color="white"
                pivot-text=""
                text-color="#ffc15a"
                color="#f10400"
                show-pivot
                style="border-radius: 0 8px 11px 0"
              />
              <div
                style="position: absolute; left: 0.1rem; top: 0; width: 100%"
              >
                已抢 {{ prizeDetailInfo.robbedPercent }}%
              </div>
            </div>
          </div>
        </div>
        <div class="team-status-pinquan">拼券中</div>
      </div>
      <div
        v-if="statusCoupon == 0"
        style="
          font-size: 0.28rem;
          color: rgb(55, 55, 55);
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        还差
        <span style="color: rgb(241, 3, 0)">{{
          this.prizeDetailInfo.needPeopleCnt
        }}</span
        >人即可获得神券哦
      </div>
      <div
        v-else-if="statusCoupon == 50024"
        style="
          font-size: 0.28rem;
          color: #373737;
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        <span style="color: #f10300">该团不存在</span>
      </div>
      <div
        v-else-if="statusCoupon == 50025"
        style="
          font-size: 0.28rem;
          color: #373737;
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        <span style="color: #f10300">该团人数已满</span>
      </div>
      <div
        v-else-if="statusCoupon == 50028"
        style="
          font-size: 0.28rem;
          color: #373737;
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        <span style="color: #f10300">优惠已抢完，试试其他优惠吧</span>
      </div>
      <div
        v-else-if="statusCoupon == 50027"
        style="
          font-size: 0.28rem;
          color: #373737;
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        <span style="color: #f10300"
          >该优惠您已经发起或参与过拼券了，试试其他优惠吧</span
        >
      </div>
      <div
        v-else-if="statusCoupon == 50026"
        style="
          font-size: 0.28rem;
          color: #373737;
          text-align: center;
          margin-top: 0.3rem;
        "
      >
        <span style="color: #f10300">优惠已失效，试试其他优惠吧</span>
      </div>
      <div
        style="font-size: 0.28rem; color: rgb(55, 55, 55); text-align: center"
      >
        拼团成功，所有成员均可获得优惠哦
      </div>
      <div class="team-member">
        <div class="team-list">
          <div class="member" v-for="member in teamMemberList">
            <img :src="member.userImg" alt="" />
            <div>{{ member.nickName | twostar }}</div>
          </div>
          <div v-show="showAddBtn" v-for="i in this.addBtnNum" class="member">
            <img
              src="https://img10.360buyimg.com/imgzone/jfs/t1/91064/28/12795/1998/5e4fb5fdE4a9e0d39/350913ed037c8a6c.png"
              @click="shareButton"
              alt=""
            />
            <div>待邀请</div>
          </div>
        </div>
      </div>
      <div
        class="team-member others"
        style="height: initial; margin: 0.1rem auto 0px; display: none"
      >
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            width: 100%;
            flex-wrap: wrap;
          "
        ></div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 0.3rem;
        "
      >
        <div
          v-if="type == 1"
          class="invite-btn"
          v-show="this.showInviteBtn"
          @click="shareButton"
        >
          邀请好友
        </div>
        <div
          v-else-if="type == 0 && pinTuanFlag"
          class="invite-btn"
          v-show="this.showInviteBtn"
          @click="joinTeam"
          id="invite-btn"
        >
          参与拼团
        </div>
        <div
          class="return-couponListPage-btn"
          :class="{ returnCouponListPageBtn1: showInviteBtn && pinTuanFlag }"
          @click="discoverMore"
        >
          发现更多优惠
        </div>
      </div>
    </div>
    <div class="van-overlay" v-show="showAlert" style="z-index: 2006">
      <div
        class="van-popup van-popup--center van-popup--safe-area-inset-bottom"
        style="background-color: transparent; z-index: 2007"
      >
        <div class="team-detailCoupon-dialog">
          <img
            :src="prizeDetailInfo.prizeImg"
            alt=""
            style="
              width: 1.5rem;
              height: 1.5rem;
              border-radius: 0.75rem;
              display: block;
              margin: 0.4rem auto 0px;
            "
          />
          <div class="alertText" style="margin-top: 0.5rem">
            组队完成，恭喜获得一张优惠券
          </div>
          <div
            class="alert-btn"
            @click="gotoUse"
            style="
              margin-top: 1.5rem;
              width: 2rem;
              height: 0.5rem;
              background: red;
              color: white;
              display: block;
              margin: 0.8rem auto 0px;
              border-radius: 0.1rem;
              font-size: 0.33rem;
            "
          >
            去使用
          </div>
        </div>
        <img
          src="https://img10.360buyimg.com/imgzone/jfs/t1/87643/39/12919/1447/5e4f3c7dEc11db3a6/3c76fe7463b75d7f.png"
          @click="closeClick"
          alt=""
          style="
            width: 0.6rem;
            height: 0.6rem;
            display: block;
            margin: 0.4rem auto 0px;
          "
        />
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import store from "../../../store/store";
import Vue from "vue";
import { Progress, Circle } from "vant";
import { getUrlQueryValueByKey, goToShopPage } from "../../../util/tools.js";
import { callShare4MiniProgram } from "../../../util/share";
import {
  BargainMemberPopComService1,
  ConpouTeamPopService,
  joinVipService1,
} from "../../../util/comCreate.js";
import ButtomBtn from "../buttomBtn/buttomBtn";
import dateUtil from "../../../util/dateUtil";
import { teamShare } from "../../../js/share.js";

Vue.use(Circle);
Vue.use(Progress);
let {
  setShare,
  fissionCoupon,
  fissionCouponFight,
  fissionCouponTeamMember,
  fissionCouponShare,
  fissionJoinCoupon,
  storeGoodsPoint
} = apis1;

export default {
  components: { ButtomBtn },
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  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: "",
      }, // 队伍列表的宽度
      showAlert: false, // 是否组队完成 true 表示 false 不表示
      alertCouponPrize: "", // 显示面额,
      text: "",
      pinTuanFlag: true,
      statusCoupon: 0,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  mounted() {
    this.publicData.$emit('isKe', false);
  },

  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);
      }
    },
    getHeight() {
      this.autoWidth.width =
        (this.addBtnNum + 1 + this.teamMemberList.length) * 1.3 + "rem";
    },
    initData() {
      this.publicData.$emit('isKe', false);
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          // 没有模板的数据-创建之后
          for (let index = 0; index < datasAll.draw.prizeList.length; index++) {
            const element = datasAll.draw.prizeList[index];
            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.teamCnt, // 需要人数
              prizeImg: element.showImg, // 图片
              prizeName: element.prizeName,
              robbedPercent: "0", // 已抢百分比
              teamCnt: element.teamCnt,
            };
            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,
            };
            this.prizeInfoList.push(prizeCoupon);
            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;
            });
          }
          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);
    },
    // 立即拼券
    flight(coupon) {
      if (this.isTemplate) {
        // 活动预览
        this.$toast("活动预览，仅供查看");
        return;
      }
      if (coupon.dispKbn == 9) {
        this.showInviteBtn = false;
      } else {
        this.showInviteBtn = true;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      fissionCouponFight(coupon.prizeInfoId, (data) => {
        if (data.data.joinFlag) {
          this.$toast("该优惠您已经参与过啦，同一优惠，活动期间只能参与一次！");
          return;
        }
        this.prizeDetailInfo = data.data.prizeDetailInfo;
        this.teamMemberList = data.data.teamMemberList;
        this.teamId = this.prizeDetailInfo.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;
        this.getHeight();
      });
    },
    setPrizeDetail(data) {
      fissionCouponShare((data) => {
        this.prizeDetailInfo = data.data.prizeInfoList[0];
        this.statusCoupon = data.data.status;
        fissionCouponTeamMember(
          this.prizeDetailInfo.prizeInfoId,
          store.state.teamId,
          (data) => {
            this.teamMemberList = data.data.teamMemberList;

            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;
          }
        );
      });
    },
    // 去使用
    gotoUse() {
      let shopId = store.state.shopId;
      storeGoodsPoint(4)
      goToShopPage(shopId);
    },
    // 查看队伍
    seeTeam(coupon) {
      fissionCouponTeamMember(coupon.prizeInfoId, coupon.teamId, (data) => {
        this.teamMemberList = data.data.teamMemberList;
        ConpouTeamPopService.create(
          this.teamMemberList,
          this.isTemplate,
          (prizeRecordDetilClick) => {
            ConpouTeamPopService.close();
          }
        );
      });
    },
    // 发现更多优惠
    discoverMore() {
      this.statusCoupon = 0;
      this.type = 1;
      fissionCoupon(1, (fission) => {
        console.log(fission.data);
        this.prizeInfoList = fission.data.prizeInfoList;
        this.shopName = fission.data.shopName;
        this.showCouponPage = true;
        this.showCouponInvitePage = false;
      });
    },
    // 参与拼团
    joinTeam() {
      // var obj = document.getElementById("index");
      document.getElementById("invite-btn").disabled = true;
      fissionJoinCoupon((fission) => {
        if (fission.data.status == 50024) {
          this.$toast("此团不存在");
          return;
        } else if (fission.data.status == 50025) {
          this.$toast("该队伍已经满员啦，赶紧看看其他优惠吧");
          return;
        } else if (fission.data.status == 50026) {
          this.$toast("优惠券不存在");
          return;
        } else if (fission.data.status == 50027) {
          this.$toast("该优惠您已经发起或参与过拼券啦");
          return;
        } else if (fission.data.status == 50028) {
          this.$toast("优惠券已经抢完");
          return;
        } else if (fission.data.status == 0) {
          this.showAlert = true;
        }
        this.prizeDetailInfo = fission.data.prizeInfoList[0];
        this.showCouponPage = false;
        this.showCouponInvitePage = true;
        this.teamMemberList = fission.data.teamMemberList;

        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;
        document.getElementById("invite-btn").disabled = false;
      });
    },
    closeClick() {
      this.showAlert = false;
    },
    // 邀请好友
    shareButton() {
      teamShare(this.isTemplate,this.teamId, this,(callBackData)=>{
        console.log(callBackData,'callBackData');
      });      
    },
  },
  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>
.item {
  display: inline-block;
  min-width: 0.33rem;
  height: 0.33rem;
  line-height: 0.361rem;
  text-align: center;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 0rem;
}

.btn-bg {
  width: 1.54rem;
  height: 0.6rem;
  background: rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
}

.count-down-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 195px;
  left: 0;
  font-size: 0.24rem;
  color: #373737;
}

.rule-btn {
  position: absolute;
  top: 0.4rem;
  right: 0;
  font-size: 0.28rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fissionCouponListCouponBox {
  box-sizing: border-box;
  margin-top: 0rem;
}

// .coupon {
//   background: url(https://img10.360buyimg.com/imgzone/jfs/t1/101766/5/12780/1602/5e4df9efE51adfe5f/e8c268a1e3f8f6cf.png)
//     no-repeat;
//   background-size: 100%;
//   width: 7.19rem;
//   height: 2.58rem;
//   margin: 0 auto;
//   display: flex;
//   justify-content: flex-start;
//   align-items: center;
//   margin-top: 8px;
// }

// .group-number {
//   padding: 0.03rem;
//   border: 2px solid #f10300;
//   border-radius: 5px;
//   font-size: 0.2rem;
//   line-height: 0.2rem;
//   top: 0.6rem;
//   color: #f10300;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// .coupon-name {
//   font-size: 0.28rem;
//   color: #373737;
//   margin-left: 0.1rem;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 1;
//   overflow: hidden;
// }

// .coupon-denomination {
//   font-size: 0.64rem;
//   color: #f10300;
//   line-height: 0.44rem;
// }

// .coupon-quota {
//   font-size: 0.25rem;
//   color: #2f2f2f;
//   margin-left: 0.1rem;
// }

.circle-rate {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/101134/10/12625/3262/5e4e36ecE40ce33e2/36145802ebe71525.png)
    no-repeat;
  background-size: 100%;
  width: 1rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.van-circle {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  text-align: center;
}

.van-circle__text {
  font-size: 11px;
}

// .team-btn {
//   width: 1.36rem;
//   height: 0.59rem;
//   background-image: linear-gradient(to right, #f10401, #ff4d18);
//   border-radius: 40px;
//   font-size: 0.23rem;
//   color: #fff;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   margin: 0.1rem auto 0px;
// }

.remain-num {
  font-size: 0.24rem;
  color: #373737;
  text-align: center;
  margin-top: 0.1rem;
}

.start-spell-coupon {
  background: #ffffff;
  box-sizing: border-box;
  height: 100%;
  bottom: 0;
}

.coupon-single {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/93453/5/12850/5394/5e4f7d6dE8dcaf2f0/11f32b9bceb1c26e.png)
    no-repeat;
  background-size: 100%;
  width: 7.5rem;
  height: 2.98rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 0.2rem;
  box-sizing: border-box;
  position: relative;
}

// .group-number {
//   padding: 0.05rem;
//   border: 2px solid #f10300;
//   border-radius: 5px;
//   font-size: 0.2rem;
//   line-height: 0.2rem;
//   color: #f10300;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// .coupon-name {
//   font-size: 0.28rem;
//   color: #373737;
//   margin-left: 0.1rem;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 1;
//   overflow: hidden;
// }

// .coupon-denomination {
//   font-size: 0.64rem;
//   color: #f10300;
//   line-height: 0.44rem;
// }

// .coupon-quota {
//   font-size: 0.25rem;
//   color: #2f2f2f;
//   margin-left: 0.1rem;
// }

  .progress-container {
    width: 3.2rem;
    height: 0.26rem;
    border: 2px solid #f10400;
    border-radius: 20px;
    font-size: 0.17rem;
    color: #ffc15a;
    margin-top: 0.1rem;
    overflow: hidden;
    position: relative;
    line-height: 0.2rem;
  }

.progress {
  height: 100%;
  border-radius: 20px;
  background: #f10400;
  display: flex;
  align-items: center;
  padding-left: 3rem;
  box-sizing: border-box;
}

.team-status {
  font-size: 0.45rem;
  color: #d9d9d9;
  margin-left: 0.5rem;
}
.team-status-pinquan {
  font-size: 0.45rem;
  color: #d9d9d9;
  margin-left: 0.3rem;
}
.team-status-qiangwan {
  font-size: 0.45rem;
  color: #d9d9d9;
  margin-left: 0.3rem;
}
.team-member {
  width: 5.32rem;
  height: 1.35rem;
  margin: 0.1rem auto 0;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-x: scroll;
}

.member {
  align-items: center;
  flex-direction: column;
  display: inline-block;
}

.member > img {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.member > div {
  font-size: 0.2rem;
  color: #373737;
  margin-top: 0.1rem;
}

.member:nth-child(n + 2) {
  margin-left: 0.32rem;
}

.team-member-container {
  width: 5.32rem;
  height: 1.25rem;
  margin: 0.4rem auto 0;
  overflow-x: scroll;
}

.invite-btn {
  width: 3rem;
  height: 0.68rem;
  background: linear-gradient(to right, #f10400, #ff4d18);
  border-radius: 40px;
  font-size: 0.3rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.return-couponListPage-btn {
  width: 3rem;
  height: 0.68rem;
  border: 1px solid #f10400;
  border-radius: 40px;
  font-size: 0.3rem;
  color: #f10400;
  display: flex;
  justify-content: center;
  align-items: center;
}
.returnCouponListPageBtn1 {
  width: 3rem;
  height: 0.68rem;
  border: 1px solid #f10400;
  border-radius: 40px;
  font-size: 0.3rem;
  color: #f10400;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.6rem;
}
.coupon-image {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.25rem;
}

.floatBtnCjwx {
  display: none;
  font-size: 0;
  width: 60px;
  height: 63px;
  background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/170021/31/11556/41701/604896aeEe05ec549/14a6f6a0f67af7c9.gif");
  background-size: 100% 100%;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(0, 60vh);
}

// .coupon-name {
//   font-size: 0.28rem;
//   color: #373737;
//   margin-left: 0.1rem;
//   display: -webkit-box;
//   -webkit-box-orient: vertical;
//   -webkit-line-clamp: 1;
//   overflow: hidden;
// }

// .coupon-denomination {
//   font-size: 0.64rem;
//   color: #f10300;
//   line-height: 0.44rem;
// }

// .coupon-quota {
//   font-size: 0.25rem;
//   color: #2f2f2f;
//   margin-left: 0.1rem;
// }

// .team-btn {
//   width: 1.36rem;
//   height: 0.58rem;
//   background-image: linear-gradient(to right, #f10401, #ff4d18);
//   border-radius: 40px;
//   font-size: 0.23rem;
//   color: #fff;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

.remain-num {
  font-size: 0.24rem;
  color: #373737;
  text-align: center;
  margin-top: 0.1rem;
}

.van-progress {
  width: 100%;
  height: 100%;
}

.team-list {
  width: 4.5rem;
  overflow: scroll;
  white-space: nowrap;
}

.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.team-detailCoupon-dialog {
  background: url(https://img10.360buyimg.com/imgzone/jfs/t1/106450/38/12861/30053/5e538d54Ed73475c5/0cebfa352f53d651.png)
    no-repeat;
  background-size: 100%;
  width: 5.8rem;
  height: 7.6rem;
  padding-top: 1.4rem;
  box-sizing: border-box;
}

.van-popup--center {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
}

.team-detail-content-ul {
  position: relative;
  top: 0.25rem;
  width: 5.8rem;
}

.ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-detail-content-li {
  width: 1.4rem;
  float: left;
  text-align: center;
  font-size: 12px;
}

.king {
  background: url(http://img10.360buyimg.com/imgzone/jfs/t1/116081/9/2191/1668/5ea02114E5248bc97/4bdf07fc604f1f6b.png)
    no-repeat;
  background-size: 100%;
  width: 0.37rem;
  height: 0.36rem;
  position: absolute;
  top: -0.14rem;
  left: 0.1rem;
}

.van-image--round {
  overflow: hidden;
  border-radius: 50%;
}

.van-image {
  position: relative;
  display: inline-block;
}

.team-l-text {
  background: url(http://img10.360buyimg.com/imgzone/jfs/t1/92016/5/19519/1782/5ea0211dEed248c72/a6dc44f7bed44a29.png)
    no-repeat;
  background-size: 100%;
  width: 0.62rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.27rem;
  color: #8e2e00;
  font-size: 0.17rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.8rem;
}

.team-l {
  width: 0.8rem;
  position: absolute;
  top: 0.8rem;
  left: 0.3rem;
}

.team-detail-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-detail-content-li {
  width: 1.4rem;
  float: left;
  text-align: center;
}
</style>
