<template>
  <div class="dailyTeamAll">
    <div class="title"></div>
    <div class="dailyTeamText">每日组队成功即可获得{{ teamScore }}{{scoreName}}，每日最多{{ teamNum }}次</div>
    <div class="friend" v-for="(itemList, index) in shareTeamList" :key="index">
      <div class="team">
        <div class="teamUl" v-for="(item, index) in itemList.userList" :key="index">
          <div class="teamLi">
            <img
              v-if="
                index == itemList.userList.length - 1 && item.userImg == 'https://img10.360buyimg.com/imgzone/jfs/t1/185238/19/1091/2993/60877cfcEda09700f/739d5c3050818527.png'
              "
              class="shareImage"
              :src="item.userImg ? item.userImg : 'https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png'"
              @click="setShareButton(index)"
              v-lz-click="'25'"
            />
            <img v-else class="shareImage" :src="item.userImg ? item.userImg : 'https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png'" />
            <span class="nickName">{{item.nickName}}</span>
          </div>
        </div>
      </div>
      <button @click="setShareButton()" v-lz-click="'25'"></button>
    </div>
  </div>
</template>
<script>
import apis1 from '../../../util/apis1.js';
import { getUrlQueryValueByKey } from '../../../util/tools.js';
import { callShare4MiniProgram } from '../../../util/share';
import { allShare } from '../../../js/share.js';

let { setShare } = apis1;
import store from '../../../store/store';
export default {
  props: ['styleData', 'datas', 'keyData', 'isTemplate', 'templateData', 'shopId'],
  data() {
    return {
      shareTeamList: [],
      teamScore: '', //组队获得进度
      scoreName:'',//游戏分值名称
      teamNum: '', //每日组队数量
      people: 0 //每日组队人数限制
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.isTemplate) {
        var dataAll = this.templateData;
        console.log(dataAll,"dataAlldataAll")
        if(dataAll){
          this.scoreName = dataAll.group.score.scoreName;
          for(var i = 0;i<dataAll.basicTask.taskList.length;i++){
            if(dataAll.basicTask.taskList[i].rule.dayGroupRule){
              this.teamNum = dataAll.basicTask.taskList[i].rule.dayGroupRule.groupLimit
              this.teamScore = dataAll.basicTask.taskList[i].rule.dayGroupRule.sendNum
            }
          }
          this.shareTeamList = [{ userList: [{userImg:'https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png',nickName:"lzkj"},{ userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/185238/19/1091/2993/60877cfcEda09700f/739d5c3050818527.png' }] }];
        }else{
          this.scoreName = "进度"
          this.teamNum = 1
          this.teamScore = 1
           this.people = 1;
        var templateData = this.templateData;
        this.shareTeamList = [{ userList: [{userImg:'https://img10.360buyimg.com/imgzone/jfs/t20782/85/568972117/2758/78eafc28/5b0fd507Ne2b074cc.png',nickName:"lzkj"},{ userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/185238/19/1091/2993/60877cfcEda09700f/739d5c3050818527.png' }] }];
        }
       
      }else{
         this.publicData.$on('dailyTeam', res => {
        console.log(res)
        this.shareTeamList = [];

        this.shareTeamList = res.shareUser;
        this.scoreName = res.scoreName
        this.teamScore = res.groupScore;
        this.teamNum = res.team;
        this.people = res.people; //每日组队人数限制

        for (var i = 0; i < this.shareTeamList.length; i++) {
          var obj = {
            userImg: 'https://img10.360buyimg.com/imgzone/jfs/t1/185238/19/1091/2993/60877cfcEda09700f/739d5c3050818527.png'
          };

          var userList = [];
          var obj1 = {
            userImg: res.userImg,
            nickName: res.nickName
          };
          if (this.shareTeamList[i].userList) {
            //向数组头部添加个人对象
            let aa = this.shareTeamList[i].userList.length;
            let cc = [];
            cc[0] = obj1;
            for (var j = 1; j <= aa; j++) {
              cc[j] = this.shareTeamList[i].userList[j - 1];
            }
            this.shareTeamList[i].userList = cc;
          } else {
            var userList1 = [];
            userList1 = userList.concat(obj1);
            var obj2 = {
              userList: userList1
            };
            userList = userList.concat(obj2);
            this.shareTeamList[i] = obj2;
          }
          // this.people

          if (this.people + 1 > this.shareTeamList[i].userList.length) {
            //向数组尾部添加加号对象
            this.shareTeamList[i].userList = this.shareTeamList[i].userList.concat(obj);
          }
          console.log(this.shareTeamList, '********************');
          // console.log(JSON.stringify(this.shareTeamList));
        }
      });
      }

     
    },
    //分享
    setShareButton(index) {
      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('活动预览，仅供查看');
      }
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.dailyTeamAll {
  display: flex;
  align-items: center;
  flex-direction: column;
  .title {
    width: 4.07rem;
    height: 0.74rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/165753/11/20976/19614/608779acEfeb9cb75/7cb418c011de8346.png');
    background-size: 100%;
  }
  .dailyTeamText {
    font-size: 0.2rem;
    color: white;
  }
  .friend {
    width: 6.81rem;
    height: 3.37rem;
    background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/163711/40/21808/2902/60877a28E6c6bfe9a/4610dfe1b2ffe706.png');
    background-size: 100%;
    position: relative;
    margin-top: 0.5rem;
    button {
      width: 3.19rem;
      height: 1.09rem;
      background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/168714/9/20941/24792/60877a28E500a8f2e/3a3e3e9b23d1b493.png');
      background-size: 100%;
      position: absolute;
      left: calc(50% - 3.19rem / 2);
      top: 2rem;
    }
  }

  .team {
    width: 6.81rem;
    height: 1.3rem;
    display: flex;
    // flex-direction: row;
    // justify-content: flex-start;
    margin-top: 0.3rem;
     overflow-x: scroll;
     overflow-y: hidden;
    .teamUl{
      width: 1rem;
      height: 1rem;
       margin-left: 0.31rem;
    }
    .teamLi{
      width: 1rem;
      height: 1.5rem;
    }
    .shareImage {
      width: 0.82rem;
      height: 0.82rem;
      border-radius: 50%;
    }
  }

  .nickName {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px;
    color: #ffc97d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
}
</style>
