<template>
  <div class="couponClassName" v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <div>
        <div class="listDivAll">
          <div class="itemDivAll" v-for="(item, index) in teamList">
            <div class="headDiv">
              <div class="headItemDiv" v-for="(items, index1) in item.fissionTeamVOList" :key='index1'>

                <img class="headImg" :src="items.userImg" />
                <div class="headShenFenDiv" v-if="items.captainKbn == 0">团长</div>
              </div>
            </div>
            <div class="teamDivAll">
              <div class="goChaTeamSpan" @click="goClick(2, item)">去插队</div>
              <div class="needPeopleDiv">还差{{ item.num }}人成团</div>
            </div>
          </div>
        </div>

        <div class="promptdiv">仅显示10个可插队队伍</div>
        <div class="btnDiv" @click="goClick(1, datas.pinCouponData)">立即开团</div>
      </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from './hdzxtbasicPop.vue';
import Vue from 'vue';
import apis1 from '../../../util/apis1.js';

export default {
  props: [],
  components: {
    basicPop
  },
  data() {
    return {
      pop: {
        title: '插队可快速成团',
        titlepop: ''
      },
      teamList: []
    };
  },

  created() {
    // console.log(this.styleData,'shenm')
    this.pop.titlepop = this.styleData.titlepop
      ? this.styleData.titlepop
      : { backgroundImage: 'url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)' };
    this.pop.leftLineDiv = this.styleData.leftLineDiv;
    this.pop.rightLineDiv = this.styleData.rightLineDiv;
    this.teamList = this.datas.data;
  },

  methods: {
    closeClick() {
      this.submit(null);
    },
    //发起拼券 1 发起拼券 2 去插队
    goClick(flag, itemData) {
      switch (flag) {
        case 1:
          var datas = {
            flag: 1,
            couponItemData: itemData
          };
          this.submit(datas);
          break;
        case 2:
          var datas = {
            flag: 2,
            couponItemData: itemData
          };
          this.submit(datas);
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.listDivAll {
  height: 4.8rem;
  margin-top: 0.28rem;
  overflow-y: scroll;
}
.itemDivAll {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ffffff;
  margin: 0 0.3rem 0.1rem 0.3rem;
  border-radius: 0.04rem;
  padding: 0.26rem;
  align-items: center;
  .headDiv {
    display: flex;
    align-items: center;
    // justify-content: center;
    max-width: 4rem;
    overflow-x: scroll;
    position: relative;
    .headItemDiv{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 0.12rem;
      align-items: center;
      margin-left: -0.17rem;
    }
    .headItemDiv:first-child{
      margin-left: 0;
    }
    .headShenFenDiv{
      font-size: 0.24rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #F2270C;
      // margin-top: -0.12rem;
      text-align: center;
      bottom: 0rem;
      position: absolute;
    }
    .headImg {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      margin-left: -0.12rem;
      border: 0.04rem solid #FFFFFF;
    }
    .headImg:first-child {
      margin-left: 0rem;
    }
  }
  .teamDivAll {
    font-size: 0.28rem;
    line-height: 0.28rem;
    color: #f33117;
    text-align: center;
    .goChaTeamSpan {
      padding: 0.18rem 0.38rem;
      border: 0.02rem solid #f33117;
      border-radius: 0.36rem;
    }
    .goChaTeamSpanGray {
      padding: 0.18rem 0.38rem;
      border: 0.02rem solid #f33117;
      border-radius: 0.36rem;
      background: gray;
      color: #FFFFFF;
    }

    .needPeopleDiv {
      font-size: 0.22rem;
      line-height: 0.22rem;
      color: #262626;
      margin-top: 0.16rem;
    }
  }
}
.promptdiv {
  font-size: 0.24rem;
  line-height: 0.24rem;
  color: #8c8c8c;
  text-align: center;
  margin-bottom: 0.28rem;
}
.btnDiv {
  font-size: 0.34rem;
  line-height: 0.34rem;
  color: #ffffff;
  background: linear-gradient(to right, #f2280c, #ff631f);
  margin: 0 0.3rem;
  padding: 0.28rem 0;
  text-align: center;
  border-radius: 0.04rem;
}
</style>
