<template>
	<view class="content">
		<!-- 账户余额 -->
		<view class="total" :style="'background-image: url(' + require('@/static/imgs/bonus_back.png') + ');'">
			<view class="total-item-1">
			    <view class="total-left">
			    	<view class="total-value nowrap">{{total}}</view>
			    	<view class="total-text nowrap">{{ type === 'balance' ? '账户余额': '已提现总金额'}}</view>
			    </view>
			    <view class="total-btn" @click="$Router.push({name: 'Withdraws'})">提现</view>
			</view>
           <view class="total-item-2">
               <view>已发放 :￥<span>{{sended}}</span></view>
               <view>待发放 :￥<span>{{frozen}}</span></view>
           </view>
		</view>
		<!-- 账户记录 -->
		<view class="tabs">
			<u-tabs
				:list="tabs"
				:scrollable="false"
				:activeStyle="{color: '#906BFF', fontWeight: 'bold'}"
				lineColor="#8E6AFF"
				@click="onTabs"
			/>
		</view>
		<view class="logs">
			<block v-if="list.length > 0">
				<view class="log-flex" v-for="(item, index) in list" :key="index">
					<block v-if="type === 'balance'">
						<view class="text">
							<view class="type nowrap">
                                {{item.remark || '-'}} 
                                <span :class="item.frozen.value == 0 ? '' : 'active'">{{item.frozen.text}}</span>
                            </view>
							<view class="time nowrap">{{item.created_at}}</view>
						</view>
						<view class="price nowrap"> 
                            <span :class="item.frozen.value == 0 ? '' : 'active'">{{item.amount}}</span>
                        </view>
					</block>
					<block v-if="type === 'withdraws'">
						<view class="text">
							<view class="withdraws-type nowrap"><span>{{item.status.status_text}}</span>{{item.title || '-'}}</view>
							<view class="remark nowrap" v-if="item.remark != null">{{item.remark || '-'}}</view>
							<view class="time nowrap">{{item.created_at}}</view>
						</view>
						<view class="price nowrap">{{item.amount}}</view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="list-null">
					<u-empty
						mode="history"
						icon="http://cdn.uviewui.com/uview/empty/history.png"
						text="暂无相关记录"
					>
					</u-empty>
				</view>
			</block>
		</view>
		<u-loadmore v-if="pagesShow" :status="status" />
	</view>
</template>

<script>
	import { balance, withdrawsLog } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				type: 'balance',
				tabs: [
					{ name: '奖金收益明细', value: 'balance' },
					{ name: '提现记录', value: 'withdraws' },
				],
				total	 : '0.00',
				sended	 : '0.00',
				frozen	 : '0.00',
				list	 : [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow: false,
				status   : ''
			};
		},
		onShow() {
			this.page = {
				current	: 1,
				has_more: false,
			}
			this.getList()
		},
		methods: {
			onTabs(e){
				if(e.value === this.type) return
				this.type  = e.value
				this.page  = {
					current	: 1,
					has_more: false,
				}
				this.list  = []
				this.total = '0.00'
                this.sended = '0.00'
                this.frozen = '0.00'
				this.getList()
			},
			// 获取账户余额
			getList(){
				uni.showLoading({
					title:'加载中...',
					mask : true
				})
				if(this.type === 'balance') this.getBalance()
				if(this.type === 'withdraws')this.getWithdraws()
			},
			// 获取账户余额
			getBalance(){
				balance({
					page: this.page.current
				}).then(res => {
					let { balance, logs ,sended,frozen } = res;
					let atList   	= logs.page.current == 1 ? [] : this.list
					this.total 		= balance
					this.sended 	= sended
					this.frozen 	= frozen
					this.list  		= atList.concat(logs.data)
					this.page  		= logs.page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {	
					this.errMsg(err)
				})
			},
			// 获取提现记录
			getWithdraws(){
				withdrawsLog({
					page: this.page.current
				}).then(res => {
					let { all, lists } = res;
					let atList = lists.page.current == 1 ? [] : this.list
					this.total 		= all;
					this.list  		= atList.concat(lists.data)
					this.page  		= lists.page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {
					this.errMsg(err)
				})
			},
			// 错误提示
			errMsg(err){
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	// tabs
	.tabs{
		border-radius: 20rpx 20rpx 0 0;
		padding: 5px 0;
		margin: -54px 30rpx 0;
		background: white;
		position: relative;
		z-index: 1;
		border-bottom: solid 1rpx #F6F6F6;
	}
	// 账户余额
	.total{
		background-size: cover;
		background-position: top center;
		padding: 50rpx 30rpx 170rpx;
		color: white;
        .total-item-1{
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
        }
        .total-item-2{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            // margin-top: $margin;
            position: relative;
            top: $margin ;
            padding-bottom: 20rpx;
            font-size: 30rpx;
            view{
                opacity: 0.9;
                font-size: 26rpx;
            }
            span{
                font-size:32rpx;
            }
        }
		.total-left{
			width: calc( 100% - 200rpx );
		}
		.total-value{
			font-weight: bold;
			font-size: 60rpx;
			font-family: Arial, Helvetica, sans-serif;
		}
		.total-text{
			font-size: 26rpx;
			opacity: .9;
			line-height: 40rpx;
			padding-top: 20rpx;
		}
		.total-btn{
			background: white;
			color: #8E6AFF;
			line-height: 70rpx;
			border-radius: 40rpx;
			width: 200rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	// 记录空
	.list-null{
		height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// 记录
	.logs{
		box-sizing: border-box;
		background-color: white;
		margin: 0 30rpx;
		padding: 0 30rpx;
		border-radius: 0 0 20rpx 20rpx;
		.log-flex{
			padding: 25rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: #666666;
			border-top: solid 1rpx #F6F6F6;
			&:first-child{
				border-top: none;
			}
			.text{
				width: calc(100% - 200rpx);
			}
			.price{
				width: 200rpx;
				text-align: right;
				font-weight: bold;
				color: #9675FF;
                .active{
                    color: #d90017;
                }
			}
			.type{
				font-weight: bold;
				font-size: 30rpx;
				color: #666666;
				// text{
				// 	font-weight: normal;
				// 	padding-right: 10rpx;
				// 	color: $main-color;
				// }
                span{
                   font-size: 22rpx;
                   font-weight: normal;
                   background-color: rgba(#8E6AFF, 0.4); 
                   padding: 2rpx 20rpx;
                   border-radius: 40rpx;
                   color: #fff;
                   position: relative;
                   left: 20rpx;
                   top: -6rpx;
                }
                .active{
                    background-color: rgba(#d90017, 0.4); 
                }
			}
			.withdraws-type{
				font-weight: bold;
				font-size: 30rpx;
				color: #666666;
				span{
				   font-size: 22rpx;
				   font-weight: normal;
				   background-color: rgba(#8E6AFF, 0.4); 
				   padding: 2rpx 20rpx;
				   border-radius: 40rpx;
				   color: #fff;
				   margin-right: 20rpx;
				}
			}
			.remark{
				font-size: 28rpx;
			}
			.time{
				font-size: 28rpx;
				color: gray;
			}
		}
	}
</style>
