<template>
	<view class="pages">
		<u-navbar title="提现记录" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff' title-size='36'
			height='50'></u-navbar>
		<view class="bj"></view>
		<view class="zongji">
			<view class="lt">
				<view class="top">
					累计提现（元）
				</view>
				<view class="qian">
					{{userinfo.withDrawlAmount == null ? '--' : userinfo.withDrawlAmount}}
				</view>
			</view>
			<view class="lt">
				<view class="top">
					账户余额（元）
				</view>
				<view class="qian">
					{{userinfo.balance == null ? '--' : userinfo.balance}}
				</view>
			</view>
		</view>
		<view class="cards" v-for="(item,index) in list" :key="index" @click="btntx(item.billId)" @scrolltolower="onReachBottom">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="card_left">
					<view class="top">提现
					  <text style="color: rgb(233, 178, 116);" v-if="item.status == 11">(审核中)</text>
					  <text style="color: rgb(109, 195, 68);" v-if="item.status == 12">(审核通过)</text>
					  <text style="color: rgb(246, 111, 116);" v-if="item.status == 13">(已拒绝)</text>
					  <text style="color: rgb(109, 195, 68);" v-if="item.status == 14">(已打款)</text>
					  <text style="color: rgb(246, 111, 116);" v-if="item.status == 15">(打款失败)</text>
					  <text style="color: rgb(177, 168, 246);" v-if="item.status == 16">(打款中)</text>
					</view>
					<view class="bot">
						{{item.createTime}}
					</view>
				</view>
				<view class="card_right">
					<view class="top">-{{item.money}}元</view>
					<view class="bot">
						剩余金额 {{item.afterBalance}}
					</view>
				</view>
			</view>
			<view class="sq">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uaTO9blEuCXVhY93HHiH" mode=""></image> 申请时间
				</view>
				<view class="rt">
					{{item.createTime == null ? '--' : item.createTime}}
				</view>
			</view>
		</view>
		<view v-if="jlflag" class="" style="font-size: 28rpx;color: red;margin-top: 30rpx;width: 100%;text-align: center;">-没有更多记录了-</view>
		<view class="" v-if="showflag" style="width: 100%;height: 200rpx;margin: auto;margin-top: 170rpx;text-align: center;">
			<image style="width: 200rpx;height: 200rpx;"
				src="https://api.ccttiot.com/smartmeter/img/static/uZFUpcz0YZZ4f4RjvGg2" mode="aspectFit"></image>
			<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂无更多提现记录...</view>
		</view>
	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883f0",
				},
				list:[],
				jlflag:false,
				pagenum: 1,
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				showflag: false,
				userinfo:{}
			}
		},
		onLoad() {
			this.getDeviceList()
			this.getuserinfo()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			getuserinfo() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
					  this.userinfo=res.data
					}
				})
			},
			onReachBottom() {
				if (this.list.length < this.total) {
					this.getDeviceList(); // 上拉加载更多  
				} else {
					this.jlflag = true
				}
			},
			btntx(billId){
				uni.navigateTo({
					url:'/page_user/mapditu/withdraw_xq?billId=' + billId
				})
			},
            getDeviceList(){
            	this.$u.get(`/app/bill/withdrawList?$pageNum=${this.pagenum}&pageSize=${this.pagesize}`).then((res) => {
            	if (res.code == 200) {
            	   this.total = res.total
            	   if (this.total > 0) {
            	   	this.showflag = false
            	   } else {
            	   	this.showflag = true
            	   }
            	   if (res.rows.length > 0) {
            	   	// 有数据，追加到列表  
            	   	 this.list =  this.list.concat(res.rows)
            	   	this.pagenum++
            	   } else {
            	   	// 没有更多数据  
            	   	this.noMoreData = true;
            	   }
            	   this.isLoading = false;
            	}
            	});
            	
            },
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .u-icon__icon{
		padding-bottom: 22rpx;
	}
	page {
		background-color: #F7FAFE;
	}
    .bj{
	  width: 100%;
	  height: 130rpx;
	  background-color: #8883F0;
	  margin-bottom: 140rpx;
	}
	.zongji{
		width: 684rpx;
		max-height: 230rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		padding: 50rpx 80rpx;
		box-sizing: border-box;
		.lt{
			text-align: center;
			.top{
				font-size: 30rpx;
				color: #6C6A6A;
			}
			.qian{
				font-weight: 600;
				font-size: 48rpx;
				color: #3D3D3D;
				margin-top: 20rpx;
			}
		}
	}
	.pages {
		width: 750rpx;
        padding-bottom: 100rpx;
		box-sizing: border-box;
		.tops {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.tit {
				margin-left: 36rpx;
				font-size: 48rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #262B37;
			}

			.more {
				margin-right: 36rpx;
				font-size: 28rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #8883F0;
			}
		}

		.cards {
			// display: flex;
			// flex-wrap: nowrap;
			// align-items: center;
			// justify-content: space-between;
			width: 672rpx;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			margin: 18rpx auto;
			border-radius: 30rpx;
			padding: 20rpx 0rpx;
			box-sizing: border-box;
			.sq{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				.lt{
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
					font-size: 30rpx;
					color: #6C6A6A;
				}
				.rt{
					font-size: 30rpx;
					color: #6C6A6A;
				}
			}
			.card_left {
				margin-left: 50rpx;

				.top {
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #262B37;
				}

				.bot {
					margin-top: 12rpx;
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}

			.card_right {
				margin-right: 24rpx;
				text-align: right;

				.top {
					// margin-top: 12rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #8883F0
				}

				.bot {
					margin-top: 12rpx;
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}
		}
		.btn{
			margin-left: 116rpx;
			margin-top: 124rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 520rpx;
			height: 104rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			
			font-size: 32rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	
	}
</style>