<template>
	<view class="content">
		<u-list @scrolltolower="scrolltolower">
			<view class="myBalance">
				<view class="myBalanceTopModel">
					<view class="myBalanceNum">
						{{userInfo.total_revenue}}
					</view>
					<view class="myBalanceTitle">
						总佣金
					</view>
				</view>
				<view class="myBalanceTopModel">
					<view class="myBalanceNum">
						{{userInfo.balance}}
					</view>
					<view class="myBalanceTitle">
						冻结中
					</view>
				</view>
				<view class="myBalanceTopModel">
					<view class="myBalanceNum">
						{{userInfo.cashout}}
					</view>
					<view class="myBalanceTitle">
						已提现
					</view>
				</view>
			</view>
			<!-- 	<view class="withdrawalBtn" @click="applyWithdrawal">
				申请提现
			</view> -->
			<view class="pageList">
				<view class="myBalanceTabList">
					<view class="myBalanceTab" :class="[tabActive === 0 ? 'active' : '']"
						@click="changemyBalanceTab(0)">
						佣金变更明细
					</view>
					<!-- 	<view class="myBalanceTab" :class="[tabActive === 1 ? 'active' : '']"
						@click="changemyBalanceTab(1)">
						提现明细
					</view> -->
				</view>
				<u-list-item v-for="(item, index) in pageList" :key="index">
					<view class="myBalanceInit">
						<view class="myBalanceInitInfo">
							<view class="myBalanceInitInfoTop">
								<view class="myBalanceInitInfoTop-name">
									{{item.title}}
								</view>
								<view class="myBalanceInitInfoTop-num">
									+{{item.divide_price||item.amount}}
								</view>
							</view>
							<view class="myBalanceInitInfoBottom">
								{{item.created_at}}
							</view>
						</view>
					</view>
				</u-list-item>
				<u-empty :show="pageList.length == 0" mode="history"
					icon="http://cdn.uviewui.com/uview/empty/history.png"></u-empty>
			</view>
		</u-list>
	</view>
</template>

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