<template>
    <view>
        <block v-if="publicData.length > 0">
            <view class="record-list" v-for="(item, index) in publicData" :key="index">
                <view class="record-top">
                    <view class="record-way">{{ item.name }}</view>
                    <view class="record-label-status">￥{{ item.bonus }}</view>
                </view>
                <view class="record-cont">
                    <view class="record-label">
                        <view class="record-label-name">时间</view>
                        <view class="record-label-time">{{ item.created_at }}</view>
                    </view>
                    <view class="record-label">
                        <view class="record-label-name">状态</view>
                        <view class="record-label-time">{{ item.order.status }}</view>
                    </view>
                </view>
                <view class="record-source">
                    <view class="record-source-name">收益来源</view>
                    <view class="record-source-cont">
                        <image class="record-source-img" :src="item.source.avatar" mode="aspectFill"></image>
                        <view class="record-source-info">
                            <view class="record-source-nickname">{{ item.source.nickname }}</view>
                            <view class="record-source-tel">{{ item.source.username }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="pagesLoding" v-if="lodingStats">
                <block v-if="page.has_more">
                    <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
                </block>
                <block v-else>
                    没有更多了~
                </block>
            </view>
        </block>
        <!-- 暂无内容 -->
        <view class="pack-center pages-hint" v-else>
            <image src="/static/img/legal_tips.png"></image>
            <view>抱歉，目前暂无记录~</view>
        </view>
    </view>
</template>

<script>
    import { profitLogs } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                name        : '',    //权益名
                publicData  : [],    //权益列表
                page        : {},    //下一页
                lodingStats : false ,//加载状态
            }
    	},
        onLoad(options) {
            this.name = options.name
            
            // 获取收益列表
            this.profitInfo();
        },
        methods: {
            // 收益列表
            profitInfo(page) {
                profitLogs({
                    name: this.name,
                    page: page
                }).then(res=>{
                    let listArr = this.publicData,
                        newData = []
                    if(page == 1 || page == undefined) listArr = []
                    newData = listArr.concat(res.data)
                   this.publicData  = newData
                   this.page        = res.page
                   this.lodingStats = false
                   uni.stopPullDownRefresh()
                }).catch(err=>{})
            },
        
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.profitInfo(pageNumber)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 记录列表 */
    .record-list {
        background-color: #fff;
        border-radius: 10rpx;
        margin: 30rpx;
    }
    
    .record-top {
        display: flex;
        padding: 30rpx;
        box-sizing: border-box;
    }
    
    .record-way {
        flex: 1;
    }
    
    .record-take {
        font-weight: 600;
    }
    
    .record-cont {
        padding: 0 30rpx;
        box-sizing: border-box;
        color: #999;
        font-size: 28rpx;
    }
    
    .record-label {
        display: flex;
        line-height: 70rpx;
    }
    
    .record-label-name {
        flex: 1;
    }
    
    .record-label-status {
        color: red;
    }
    
    .record-source {
        border-top: 10rpx solid #f7f7f7;
        margin-top: 20rpx;
    }
    
    .record-source-name {
        background: #f7f7f7;
        color: #000;
        width: 140rpx;
        text-align: center;
        line-height: 60rpx;
        margin: 0 auto;
        font-size: 28rpx;
    }
    
    .record-source-cont {
        position: relative;
        padding: 40rpx 30rpx 20rpx;
        box-sizing: border-box;
    }
    
    .record-source-img {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
    }
    
    .record-source-info {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 40rpx 30rpx 20rpx 120rpx;
        box-sizing: border-box;
        line-height: 70rpx;
        display: flex;
    }
    
    .record-source-nickname {
        flex: 1;
    }
</style>
