<template>
   <view class="pageBgImg">
     <view class="img img1">
       <image mode="widthFix" src="../../static/img/ranking/img1.jpg" />
     </view>
     <view class="img img2">
       <image mode="widthFix" src="../../static/img/ranking/img2.jpg" />
       <view class="table">
         <view class="row-table">
           <view>
             <text>{{myRank?myRank.inviterTotal:0}}</text>
             <view>共邀请</view>
           </view>
           <view>
             <text>{{myRank?myRank.orderTotal:0}}</text>
             <view>有效好友</view>
           </view>
           <view>
             <text>{{myRank?myRank.rownum:'暂无'}}</text>
             <view>邀请总排行</view>
           </view>
         </view>
         <view class="note-tabel">
           你离大奖就只差一个分享的距离了，赶快行动起来吧！
         </view>
       </view>
     </view>
     <view class="img img3">
       <image mode="widthFix" src="../../static/img/ranking/img3.jpg" />
       <view class="rank-table">
         <view class="rank-head rank-row">
           <view>排名</view><view class="md">用户</view><view>邀请有效人数</view>
         </view>
         <view class="rank-body">
           <view class="rank-row" v-for="item in list" :key="item.rownum">
             <view>{{item.rownum}}</view><view class="md">{{item.mobile}}</view><view>{{item.orderTotal}}</view>
           </view>
         </view>
       </view>
     </view>
     <view class="img img4">
       <image mode="widthFix" src="../../static/img/ranking/img4.jpg" />
     </view>
     <view class="buttons">
       <view @click="toPage">马上邀请</view>
     </view>
   </view>
</template>
<script>
import { battleReport } from '@/api/api.js'
export default {
  name: 'rankingList',
  data() {
    return {
      list: [],
      myRank: null,
      userId: null
    }
  },
  methods: {
    toPage (){
      wx.navigateTo({ url: '/pages/creatShareImage/main' });
    },
    fiterMobile (arr){
      arr.map(item => {
        let a = item.mobile.split('')
        a.splice(3,4,'****')
        item.mobile = a.join('')
      })
      //console.log(arr,'arr')
      return arr
    },
    getData (){
      //this.userId = '10004'
      battleReport({inviterId: this.userId}).then(res => {
        console.log(res,'222')
        if(res.status == 200){
          this.list = this.fiterMobile(res.data.slice(0,10))
          this.myRank = res.data[10]
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const _this = this;
    _this.userId = wx.getStorageSync('userId');
    if(this.userId){
      _this.getData()
    }else{
      wx.navigateTo({
        url: `/pages/login/main?lanuch=false&path=` + encodeURIComponent(`/pages/rankingList/main`)
      });
    }
  },
  onShareAppMessage: function () {

  }
};
</script>

<style lang="stylus">
.pageBgImg{
  width: 100%;
  background :#c31b3f;
  margin :0;
  padding :0;
  .img{
    overflow:hidden;
    position:relative;
    image{
      width: 100%;
      float:left;
    }
  }

  .table{
    position: absolute;
    left:50%;
    top: 160rpx;
    font-size: 12px;
    margin-left: -40%;
    width: 80%;
    .row-table{
      display: flex;
      > view{
        width:33%;
        flex-grow:1;
        text-align:center;
        text{
          font-size:24px;
          color: darkgoldenrod;
          margin-bottom : 10rpx;
        }
      }
    }
    .note-tabel{
      padding: 6px 0;
      border: 1px solid #f2914a;
      margin-top : 60rpx;
      border-radius : 100rpx;
      font-size: 10px;
      width:100%;
      text-align : center;
    }
  }

  .rank-table{
    position: absolute;
    left:50%;
    top: 120rpx;
    font-size: 12px;
    margin-left: -38%;
    width: 76%;
    .rank-head{
      color : #333;
    }
    .rank-body{
      height:230rpx;
      overflow : auto;
      color : darkgoldenrod;
      .rank-row{
        border-bottom : 1px solid #eee;
        > view{
          border-right: 1px solid #eee;
        }
        > view:last-child{
          border:0;
        }
      }
    }
    .rank-row{
      display : flex;
      padding : 10rpx 0;
      text-align :center;
      > view:first-child{
        width: 20%;
      }
      > view:last-child{
        width: 40%;
      }
      > view.md{
        flex-grow : 1;
      }
    }
  }

  .buttons{
    background: #c31b3f;
    padding : 30rpx 100rpx 45rpx;
    > view{
      padding : 15rpx 0;
      border-radius : 50rpx;
      background : #f2914a;
      color : #ffffff;
      text-align: center;
    }
  }
}
</style>
