<template>
    <view>
        <!-- 收益订单列表 -->
        <view class="record" v-if="accounts.length > 0">
            <view class="record-list" v-for="(item, index) in accounts" :key="index">
                <view class="record-list-cont">
                    <image class="record-list-img" src="/static/img/balance-icon-02.png"></image>
                    <view class="record-list-top">
                        <view class="record-list-left">
                            <view class="record-list-name">
                                {{ item.rule.title }}
                            </view>
                            <view class="record-list-time">
                                {{ item.created_at }}
                            </view>
                        </view>
                        <view class="record-list-right">
                            {{ item.bonus > 0 ? '+' : '' }}{{ item.bonus }}
                        </view>
                    </view>
                </view>
                <view class="record-list-remark">
                    {{ item.remark }}
                </view>
            </view>
        </view>
        <!-- 暂无内容 -->
        <view class="recommend-hint" v-else>
            <image src="/static/img/null_icon.png"></image>
            <view>抱歉，目前暂无内容~</view>
        </view>
    </view>
</template>

<script>
    import { profitsNext } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                number      : '',           // 账户余额
                accounts    : '',           // 账户列表
                page: {
                    has_more: false
                },                          // 下一页
                lodingStats: false          // 数据加载完渲染
    		}
    	},
        onLoad(options) {
            // 获取账变记录
            this.accountInfo(options.type, options.id);
        },
        methods: {
            // 账变记录
            accountInfo(type, id, page) {
                profitsNext({
                    order_type: type,
                    order_id: id,
                    page: page
                }).then(res=>{
                    this.accounts = res          
                }).catch(err => {});
            },
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.page = pageNumber
                    this.storesInfo('', pageNumber)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 记录列表 */
    .record-list {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 25rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
    }
    
    .record-list-img {
        width: 50rpx;
        height: 50rpx;
        margin-top: 6rpx;
    }
    
    .record-list-cont {
        display: flex;
        width: 100%;
    }
    
    .record-list-top {
        display: flex;
        padding-left: 30rpx;
        width: 100%;
        box-sizing: border-box;
    }
    
    .record-list-left {
        flex: 1;
        margin-right: 20rpx;
    }
    
    .record-list-time {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #999;
    }
    
    .record-list-right {
        color: red;
    }
    
    .record-list-remark {
        color: #333;
        font-size: 28rpx;
        margin: 30rpx 0 0;
        background-color: #f5f5f5;
        padding: 10rpx 15rpx;
        display: inline-block;
        border-radius: 4rpx;
        position: relative;
        box-sizing: border-box;
        &::after {
            position: absolute;
            left: 20rpx;
            top: -14rpx;
            content: '';
            width: 0;
            height: 0;
            border-left: 14rpx solid transparent;
            border-right: 14rpx solid transparent;
            border-bottom: 14rpx solid #f5f5f5;
        }
    }
    
    /* 暂无内容 */
    .recommend-hint {
        text-align: center;
        color: #999;
        padding: 100rpx 0;
        image {
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
            margin-bottom: 20rpx;
        }
    }
</style>
