<template>
  <div v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
     <div class="reduceDiv">
        <div class="topMsg">
            当前难度：成绩
            <span style="color:red">{{initDatas.canDrawTimes}}</span>
            在之间，<br>
            即可参与抽奖
        </div>

        <div class="shareFriend">            
            <div>邀请{{inviteNumList[0].member}}名好友，降一级难度：与目标时间相差0.2s内可参与抽奖</div>
            <div v-if="inviteNumList.length > 1">邀请{{inviteNumList[1].member}}名好友，降二级难度：与目标时间相差0.3s内可参与抽奖</div>
        </div>

        <div class="helpFriend">
            <div class="helpTop">
                <span>用户昵称</span>
                <span>助力时间</span>
            </div>
            <div v-if="firendList.length > 0" style="height: 5.1rem;overflow-y: scroll;">
                <div class="friendItem" v-for="(item,index) in firendList" :key="index">
                    <span>{{item.nickName}}</span>
                    <span>{{item.createTime}}</span>
                </div>
            </div>

            <div v-if="firendList.length == 0" class="noFriend">暂无好友助力记录哦~</div>
        </div>

        <div class="shareBtn" @click="shareFun">立即邀请好友 降低游戏难度</div>

       
     </div>
    </basicPop>
  </div>
</template>

<script>
import basicPop from "./hdzxtbasicPop.vue";
import apis1 from "../../../util/apis1.js";
import dateUtil from "../../../util/dateUtil.js";
import { allShare } from '../../../js/share.js';
let { bargainFriends } = apis1;
export default {
  props: [],
  components: {
    basicPop,
  },
  data() {
    return {
        firendList:[],
      pop:{
          title:'降低游戏难度',
          titlepop:''
      },
      inviteNumList:[]
    };
  },
  created() {
    this.initData()
    this.pop.titlepop = this.styleData.titlepop ? this.styleData.titlepop : {"backgroundImage":"url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)"}
    // console.log(this.titlepop,"lplplplplp");
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "position:#fixed;top:0;height:100%;overflow:hidden"
      );
      console.log(this.initDatas);
      this.inviteNumList = this.initDatas.inviteNum
  },
  methods: {
    initData() {
         bargainFriends((data) => {
        this.firendList = data.data.friends;
        for (var i = 0; i < this.firendList.length; i++) {
          this.firendList[i].createTime = dateUtil.dateChangeYYYY(
            this.firendList[i].createTime,
            1
          );
        }
      });
    },
    shareFun(){
        allShare(this.isTemplate, this, callBackData => {
          console.log(callBackData, 'callBackData');
        });
    },
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
      // this.$emit('closeClick');
    },
  },
};
</script>

<style lang="scss">
.reduceDiv{
        position: relative;
    z-index: 300;
    margin-top: 0.32rem;
    height: 9.6rem;
    overflow-y: scroll;
    .topMsg{
        width: 100%;
        text-align: center;
        font-size: .3rem;
        font-weight: bold;
    }
    .shareFriend{
        font-size: .2rem;
        color: #FF9900;
        background: #FFF5E5;
        padding: .25rem;
        width: 6.9rem;
        margin-left: calc(50% - 6.9rem/2);
        margin-top: .2rem;
        margin-bottom: .2rem;
    }
    .helpFriend{
         width: 6.9rem;
        margin-left: calc(50% - 6.9rem/2);
        height: 6.2rem;
        background: white;
        padding: .2rem;
        .helpTop{
            width: 6.5rem;
            height: .7rem;
            background: #FFF5E5;
            font-size: .24rem;
            display: flex;
            align-items: center;
            
            span{
                width: 50%;
                display: block;
                padding-left: .15rem;
            }
        }
        .friendItem{
             width: 6.5rem;
            height: 1.06rem;
            font-size: .24rem;
            display: flex;
            align-items: center;
             span{
                width: 50%;
                display: block;
                padding-left: .15rem;
            }
        }
        .noFriend{
            color: #8C8C8C;
            font-size: .24rem;
            width: 100%;
            text-align: center;
            margin-top: 1.75rem;
        }
    }
    .shareBtn{
        width: 100%;
        height: 1rem;
        background: #F2270C;
        font-size: .36rem;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
