<template>
	<view class="content">
		<view class="myBalance">
			<view class="myBalanceTopModel">
				<view class="myBalanceNum">
					{{userInfo.balance}}
				</view>
				<view class="myBalanceTitle">
					总积分
				</view>
			</view>
			<view class="myBalanceTopModel">
				<view class="myBalanceNum">
					{{userInfo.frozen_balance}}
				</view>
				<view class="myBalanceTitle">
					冻结中
				</view>
			</view>
			<view class="myBalanceTopModel">
				<view class="myBalanceNum">
					{{userInfo.thawing_balance}}
				</view>
				<view class="myBalanceTitle">
					解冻中
				</view>
			</view>
		</view>
		<view class="pageList">
			<view class="myBalanceInit" v-for="(item, index) in pageList" :key="index">
				<view class="myBalanceInitInfo">
					<view class="myBalanceInitInfoTop">
						<view class="myBalanceInitInfoTop-name">
							{{item.source}}
						</view>
						<view class="myBalanceInitInfoTop-num">
							{{item.change_type?"+":"-"}}{{item.point_amount}}
						</view>
					</view>
					<view class="myBalanceInitInfoBottom">
						{{item.created_at}}
					</view>
				</view>
			</view>
			<u-empty :show="pageList.length == 0" mode="history"
				icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageList: [],
				tabActive: 0,
				userInfo: {},
				pageNum: 1,
			}
		},
		onShow() {
			this.getUserInfo();
			this.pageList = [];
			this.pageNum = 1;
			this.tabActive = 0;
			this.getBalanceList(1);
		},
		methods: {
			//获取用户信息
			getUserInfo() {
				this.$request('/user-info', 'GET', {}).then(res => {
					console.log('请求成功');
					this.userInfo = res.data;
				}).catch(err => {})
			},
			scrolltolower() {
				console.log('+10')
				this.pageNum += 1;
				if (this.tabActive == 0) {
					this.getBalanceList(1);
				} else if (this.tabActive == 1) {
					this.getBalanceList(2);
				} else if (this.tabActive == 2) {
					this.getWithdrawalList();
				}
			},
			changemyBalanceTab(e) {
				this.tabActive = e;
				this.pageList = [];
				this.pageNum = 1;
				if (e == 0) {
					this.getBalanceList(1);
				} else if (e == 1) {
					this.getBalanceList(2);
				} else if (e == 2) {
					this.getWithdrawalList();
				}
			},
			//申请提现
			applyWithdrawal() {
				uni.navigateTo({
					url: '/pageSub-pc/pages/withdrawal/withdrawal'
				})
			},
			//获取直推/间推明细
			getBalanceList(e) {
				this.$request('/get-user-point-list', 'GET', {}).then(res => {
					console.log(res.data)
					this.pageList = [...this.pageList, ...res.data.list];
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//获取提现明细
			getWithdrawalList() {
				this.$request('/income-list', 'GET', {
					type: '1',
					page: this.pageNum
				}).then(res => {
					console.log(res.data)
					this.pageList = [...this.pageList, ...res.data.list];
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #f3d4d7, #ffffff, #ffffff);
	}

	.myBalance {
		width: 100%;
		height: 126rpx;
		padding-top: 78rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		padding-bottom: 30rpx;

		.myBalanceTopModel {
			width: calc(100% / 3);

			.myBalanceNum {
				line-height: 88rpx;
				font-size: 56rpx;
				color: #D3195E;
				font-weight: 500;
				font-style: normal;
			}

			.myBalanceTitle {
				line-height: 38rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}

	}

	.withdrawalBtn {
		width: 168rpx;
		height: 64rpx;
		margin: 60rpx auto;
		border-radius: 64rpx;
		color: #D3195E;
		font-size: 24rpx;
		background-color: #ffffff;
		text-align: center;
		line-height: 64rpx;
	}

	.pageList {
		width: 100%;
		padding-top: 40rpx;
		height: auto;
		overflow-y: scroll;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
	}

	.myBalanceTabList {
		width: calc(100% - 100rpx);
		padding: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.myBalanceTab {
			width: 180rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.myBalanceTab.active {
			color: #333333;
			font-weight: 600;
		}
	}

	.myBalanceInit {
		width: calc(100% - 100rpx);
		padding: 20rpx 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 30rpx;

		.myBalanceImg {
			height: 92rpx;
			width: 92rpx;
			background-color: #666666;
			border-radius: 92rpx;
		}

		.myBalanceInitInfo {
			flex: 1;
			height: 92rpx;

			.myBalanceInitInfoTop {
				height: 54rpx;
				line-height: 54rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.myBalanceInitInfoTop-name {
					width: 40%;
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
				}

				.myBalanceInitInfoTop-num {
					width: 60%;
					font-size: 24rpx;
					color: #333333;
					font-weight: 600;
					display: flex;
					flex-direction: row-reverse;
				}
			}

			.myBalanceInitInfoBottom {
				height: 38rpx;
				line-height: 38rpx;
				width: 100%;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.initDataActive {
		color: #F6588D;
	}
</style>