<template>
	<view class="pages">
		<u-navbar title="财务明细" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
			title-size='36' height='44'></u-navbar>

		<!-- 余额 -->
		<view class="yue">
			<!-- 背景图 -->
			<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uXaoTV3GIW6q0QHcM4De" mode=""></image>

			<view class="zhye">
				账户余额（元）
			</view>
			<view class="yuan">
				{{infoobj.balance == undefined ? '' : infoobj.balance}}
			</view>
			<view class="leiji">
				<view class="one">
					累计提现：{{infoobj.withDrawlAmount == undefined ? '' : infoobj.withDrawlAmount}}
				</view>
				<view class="two" @click="btntx">
					立即提现
				</view>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="pricemx">
			<view class="tit">
				金额明细
			</view>
			<view class="tab">
				<view :class="activeindex == 1 ? 'active' : ''" @click="btntab(1)">全部</view>
				<view :class="activeindex == 2 ? 'active' : ''" @click="btntab(2)">收入</view>
				<view :class="activeindex == 3 ? 'active' : ''" @click="btntab(3)">提现</view>
			</view>
			<scroll-view class="list" scroll-y="true" @scrolltolower="onScrollToLower" style="height: 900rpx;">
				<view class="list_item" v-for="(item,index) in wateringList" :key="index" @click="btntxdeta(item.bstId,item.bstType)">
					<view class="top">
						<view v-if="item.bstType == 1">充值订单</view>
						<view v-if="item.bstType == 2">订单退款</view>
						<view v-if="item.bstType == 3">提现申请</view>
						<view style="color: #f9693c;" v-if="item.amount < 0">￥{{item.amount}}</view>
						<view style="color: #8883f0;" v-else>￥{{item.amount}}</view>
					</view>
					<view class="yiy">
						<view>{{item.createTime}}</view>
						<view>余额￥{{item.afterBalance}}</view>
					</view>
					<view class="yiy">
						<view>变动原因：{{item.reason.length > 15 ? item.reason.substring(0,15) + '...' : item.reason}}</view>
						<view style="color: #8883F0;">查看详情</view>
					</view>
				</view>
				<view class="" style="width: 100%;text-align: center;color: #ccc;margin-top: 50rpx;">
					-已经到底了-
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					// backgroundColor: "#8883f0",
				},
				activeindex: 1,
				infoobj: {},
				pagenum: 1,
				pagesize: 10,
                wateringList:[],
				bstType:''
			}
		},
		onLoad() {
			
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创亿康',
				path: '/pages/index/index'
			}
		},
		onShow() {
			this.pagenum = 1
			this.wateringList = []
			this.getinfo()
			this.getlist()
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创亿康',
				query: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			// 获取当前用户信息
			getinfo() {
				this.$u.get(`/app/user/userInfo`).then(res => {
					if (res.code == 200) {
						this.infoobj = res.data
					}
				})
			},
			// 获取财务明细
			getlist() {
				this.$u.get('/app/recordBalance/list?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize + '&bstType=' + this.bstType).then(res => {
					if (res.code == 200) {
						this.total = res.total
						if (res.rows.length > 0) { 
							// 有数据，追加到列表  
							this.wateringList = this.wateringList.concat(res.rows)
							this.pagenum++
						}
					}
				})
			},
			// 滚动到底部
			onScrollToLower() {
				if (this.total > this.wateringList.length) {
					this.getlist() // 上拉加载更多  
				} else {
			        
				}
			},


			// 跳转到提现详情
			btntxdeta(id,type) {
				if(type == 1 || type == 2){
					uni.navigateTo({
						url:'/page_user/orderdetail?billId=' + id
					})
				}else{
					uni.navigateTo({
						url: '/page_user/caiwudetail?id=' + id
					})
				}
			},
			// 跳转到提现
			btntx() {
				uni.navigateTo({
					url: '/page_user/tixian'
				})
			},
			// 切换tab
			btntab(num) {
				this.activeindex = num
				if(num == 1){
					this.bstType = ''
					this.pagenum = 1
					this.wateringList = []
					this.getlist()
				}else if(num == 2) {
					this.bstType = 1
					this.pagenum = 1
					this.wateringList = []
					this.getlist()
				}else if(num == 3){
					this.bstType = 3
					this.pagenum = 1
					this.wateringList = []
					this.getlist()
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title {
		padding-bottom: 15rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 15rpx;
	}

	.active {
		border-bottom: 6rpx solid #8883F0;
	}

	.pages {
		height: 100vh;
		width: 100%;
		overflow: hidden;

		.pricemx {
			width: 658rpx;
			margin: auto;
			box-sizing: border-box;
			margin-top: 56rpx;

			.list {
				margin-top: 28rpx;
				width: 658rpx;
				// height: 900rpx;
				background-color: #fff;
				border-radius: 20rpx;
				// overflow: scroll;
				padding-bottom: 70rpx;
				box-sizing: border-box;
				padding-top: 8rpx;
				padding-left: 36rpx;
				padding-right: 36rpx;
				box-sizing: border-box;

				.list_item {
					border-bottom: 1px solid #D8D8D8;
					padding-bottom: 26rpx;
					box-sizing: border-box;
					margin-top: 20rpx;

					.top {
						display: flex;
						justify-content: space-between;
						font-size: 32rpx;
						color: #3D3D3D;
						font-weight: 600;
					}

					.yiy {
						display: flex;
						justify-content: space-between;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}

			.tit {
				font-size: 40rpx;
				color: #3D3D3D;
				font-weight: 600;
			}

			.tab {
				margin-top: 28rpx;
				display: flex;
				font-size: 32rpx;
				color: #3D3D3D;
				font-weight: 600;
				padding-left: 28rpx;
				box-sizing: border-box;

				view {
					margin-right: 60rpx;
					padding-bottom: 10rpx;
					box-sizing: border-box;
				}
			}
		}

		.yue {
			position: relative;
			width: 658rpx;
			height: 334rpx;
			margin: auto;
			margin-top: 30rpx;
			padding-top: 34rpx;
			padding-left: 38rpx;
			padding-right: 38rpx;
			box-sizing: border-box;

			.zhye {
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.yuan {
				font-size: 66rpx;
				color: #FFFFFF;
				font-weight: 600;
				margin-top: 14rpx;
			}

			.leiji {
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 56rpx;
				display: flex;
				justify-content: space-between;

				.one {
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.two {
					width: 182rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 35rpx 35rpx 35rpx 35rpx;
					font-size: 32rpx;
					color: #8883F0;
					text-align: center;
					line-height: 64rpx;
					border-radius: 30rpx;
				}
			}

			.bj {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: -1;
			}
		}
	}
</style>