<template>
	<view class="content">
		<!-- 账户余额 -->
		<view class="total" :style="'background-image: url(' + require('@/static/imgs/bonus_back.png') + ');'">
			<view class="total-left">
				<view class="total-value nowrap">{{total}}</view>
				<view class="total-text nowrap">账户余额</view>
			</view>
			<view class="total-btn">提现</view>
		</view>
		<!-- 账户记录 -->
		<view class="tabs">
			<u-tabs
				:list="tabs"
				:scrollable="false"
				:activeStyle="{color: '#906BFF', fontWeight: 'bold'}"
				lineColor="#8E6AFF"
				@click="onTabs"
			></u-tabs>
		</view>
		<view class="logs">
			<block v-if="list.length > 0">
				<view class="log-flex" v-for="(item, index) in list" :key="index">
					<view class="text">
						<view class="type nowrap">xxx奖金收益</view>
						<view class="time nowrap">2022-12-12 10:18</view>
					</view>
					<view class="price nowrap">+50000</view>
				</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 } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				tabs: [
					{ name: '奖金收益明细', value: '' },
					{ name: '提现记录', value: '' },
				],
				total	 : '0.00',
				list	 : [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow: false,
				status   : ''
			};
		},
		created() {
			this.getList()
		},
		methods: {
			onTabs(e){
				console.log(e)
				console.log('这里需要之后处理提现记录')
			},
			getList(){
				balance({
					page: this.page.current
				}).then(res => {
					let { balance, logs } = res;
					let atList   = logs.page.current == 1 ? [] : this.list
					this.total 		= balance
					this.list  		= atList.concat(logs.data)
					this.page  		= logs.page
					this.pagesShow 	= false
				})
			}
		},
		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;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.total-left{
			width: calc( 100% - 200rpx );
		}
		.total-value{
			font-weight: bold;
			font-size: 60rpx;
			font-family: Arial, Helvetica, sans-serif;
		}
		.total-text{
			font-size: 30rpx;
			opacity: .7;
			line-height: 40rpx;
			padding-top: 20rpx;
		}
		.total-btn{
			background: white;
			color: #8E6AFF;
			line-height: 80rpx;
			border-radius: 40rpx;
			width: 170rpx;
			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;
			}
			.type{
				font-weight: bold;
				font-size: 30rpx;
				color: #666666;
			}
			.time{
				font-size: 28rpx;
				color: gray;
			}
		}
	}
</style>
