<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="cards" v-for="(item,index) in list" :key="index" @click="btntx(item.billId)" @scrolltolower="onReachBottom">
			<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 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=""></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,
			}
		},
		onLoad() {
			this.getDeviceList()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			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;
	}

	.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: 154rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			margin: 18rpx auto;
			border-radius: 30rpx;
			.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>