<template>
    <view>
        <view class="balance">
            <image class="balanceBack" src="https://card.ysd-bs.com/storage/materials/2021/09/01/balance-back.png" mode="widthFix"></image>
            <view class="balanceCont">
                <view class="balanceCont-name">余额（积分）</view>
                <view class="balanceCont-number">
                    <text>￥</text>{{ number }}
                </view>
            </view>
            <navigator hover-class="none" url="/pages/account/myProfit" class="balanceUrl">我的收益<image src="/static/img/balance-icon-row.png" mode="aspectFill"></image></navigator>
        </view>
        
        <navigator hover-class="none" url="/pages/account/withdrawal_form" class="label">
            <view class="labelLeft">
                <image class="labelLeft-img" src="/static/img/balance-icon-00.png"></image>
                <view class="labelLeft-name">提现</view>
            </view>
            <image class="labelLeft-arrow" src="/static/icon/rightsArrow.png"></image>
        </navigator>
        
        <navigator hover-class="none" :url="'/pages/account/withdrawal_record?status=' + '' + '&idx=0'" class="label">
            <view class="labelLeft">
                <image class="labelLeft-img" src="/static/img/balance-icon-01.png"></image>
                <view class="labelLeft-name">提现记录</view>
            </view>
            <image class="labelLeft-arrow" src="/static/icon/rightsArrow.png"></image>
        </navigator>
        
        <!-- 收益订单列表 -->
        <view class="record">
            <view class="integra-cont-title">
                <view class="record-title">收益订单列表</view>
            </view>
            <block v-if="accounts.length > 0">
                <navigator hover-class="none" :url="'/pages/account/myBalance_list?id=' + item.order_id + '&type=' + item.order_type" class="record-list" v-for="(item, index) in accounts" :key="index">
                    <view class="accounts-title">{{ item.right }}</view>
                    <view class="accounts-user">
                        <image class="accounts-user-icon" src="/static/img/accountsIcon_00.png"></image>
                        <view class="accounts-user-name"><text>{{ item.user.nickname }}</text>{{ item.user.username }}</view>
                    </view>
                    <view class="accounts-user">
                        <image class="accounts-user-icon" src="/static/img/accountsIcon_01.png"></image>
                        <view class="accounts-user-name">{{ item.created_at }}</view>
                    </view>
                    <view class="accounts-more"><image src="/static/icon/arrow_tips.png"></image></view>
                </navigator>
                <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="recommend-hint" v-else>
                <image src="/static/img/null_icon.png"></image>
                <view>抱歉，目前暂无内容~</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { logs, profits } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                number      : '',           // 账户余额
                accounts    : '',           // 账户列表
                page: {
                    has_more: false
                },                          // 下一页
                lodingStats: false          // 数据加载完渲染
    		}
    	},
        onLoad() {
            // 获取余额数量
            logs({
                type    : 'balance',
                channel : '',
                page    : ''
            }).then(res=>{
                this.number = res.account.balance
            })
        },
        onShow() {
            // 获取账变记录
            this.accountInfo();
        },
        methods: {
            // 获取余额数量
            accountInfo(page) {
                profits({
                    page    : page
                }).then(res=>{
                    let newStores = this.accounts,
                        newData = []
                    if(page == 1 || page == undefined) newStores = []
                    newData = newStores.concat(res.data)
                    this.accounts    = newData
                    this.page        = res.page
                    this.lodingStats = false
                    uni.stopPullDownRefresh()
                })
            },
            // 上拉加载
            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>
    
    /* 背景 */
    .balance {
        position: relative;
    }
    
    .balanceBack {
        width: 100vw;
        display: block;
    }
    
    .balanceCont {
        position: absolute;
        width: 100%;
        left: 0;    
        top: 0;
        text-align: center;
        padding: 70rpx 0 0;
        box-sizing: border-box;
    }
    
    
    .balanceCont-name {
        color: #717171;
        margin-bottom: 20rpx;
    }
    
    .balanceCont-number {
        color: #ffd890;
        font-size: 80rpx;
        font-weight: 600;
    }
    
    .balanceCont-number text {
        font-size: 50rpx;
        padding-right: 10rpx;
    }
    
    .balanceUrl {
        position: absolute;
        right: 0;
        top: 30rpx;
        background-color: #37332d;
        font-size: 28rpx;
        border-radius: 40rpx 0 0 40rpx;
        line-height: 68rpx;
        border: 2rpx solid #887351;
        padding-left: 30rpx;
        color: #ead2a5;
        display: flex;
    }
    
    .balanceUrl image {
        width: 54rpx;
        height: 54rpx;
        margin-top: 9rpx;
    }
    
    /* 提现 */
    .label {
        background-color: white;
        margin-bottom: 30rpx;
        display: flex;
        height: 100rpx;
        line-height: 100rpx;
    }
    
    .labelLeft {
        display: flex;
        flex: 1;
    }
    
    .labelLeft-img {
        width: 54rpx;
        height: 54rpx;
        margin: 23rpx 20rpx;
    }
    
    .labelLeft-arrow {
        width: 44rpx;
        height: 44rpx;
        margin: 28rpx 0;
    }
    
    /* 账变记录 */
    .record-title {
        padding: 0 30rpx;
        box-sizing: border-box;
        color: #404040;
        font-weight: 600;
        font-size: 36rpx;
        line-height: 60prx;
        margin: 40rpx 0 30rpx;
        flex: 1;
    }
    
    .record-list {
        background-color: #ffffff;
        margin-bottom: 50rpx;
        padding: 0 30rpx 20rpx 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #e9e9e9;
        border-bottom: 2rpx solid #e9e9e9;
        position: relative;
    }
    
    .accounts-more {
        position: absolute;
        bottom: -20rpx;
        left: calc(50% - 40rpx);
        width: 80rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 10rpx;
        z-index: 9;
        background-color: #ffffff;
        border: #e9e9e9 2rpx solid;
    }
    
    .accounts-more image {
        width: 28rpx;
        height: 28rpx;
        margin: 8rpx 26rpx;
    }
    
    .accounts-title {
        position: relative;
        padding: 30rpx 0 30rpx 35rpx;
    }
    
    .accounts-title::after {
        position: absolute;
        content: '';
        left: 6rpx;
        top: 37%;
        width: 8rpx;
        height: 30%;
        background-color: #000000;
    }
    
    .accounts-user {
        color: #838383;
        display: flex;
        border-top: 2rpx solid #f5f5f5;
        padding: 30rpx 0;
    }
    
    .accounts-user text {
        display: block;
        margin-bottom: 20rpx;
    }
    
    .accounts-user-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
        margin-top: 4rpx;
    }
    
    
    /* 暂无内容 */
    .recommend-hint {
        text-align: center;
        color: #999;
        padding: 100rpx 0;
    }
    
    .recommend-hint image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
    }

</style>
