<template>
	<view class="page">
		<u-navbar title="充值记录" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
        <view class="box">
        	<view class="list" @scrolltolower="onReachBottom" v-for="(item,index) in wateringList" :key="index">
        		<view class="list_val">
        			<view class="lt">
        				<view class="tit">{{item.deviceName}}</view>
						<view class="wz">地点：{{item.storeAddress == null ? '--' : item.storeAddress.length > 15 ? item.storeAddress.slice(0, 15) + '...' : item.storeAddress}}</view>
						<view class="wz">订单号：{{item.billNo}}</view>
						<view class="wz">消费时间：{{item.createTime}}</view>
        			</view>
					<view class="rt">
						<view class="top" v-if="item.status == 2">
							已支付 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="top" v-if="item.status == 1">
							未支付 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="top" v-if="item.status == 3">
							已退款 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="top" v-if="item.status == 4">
							已取消(用户) 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="top" v-if="item.status == 5">
							已取消(系统) 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="top" v-if="item.status == 6">
							支付中 
							<!-- <u-icon name="arrow-right" color="#808080" size="20" style="margin-left: 10rpx;"></u-icon> -->
						</view>
						<view class="je" style="text-align: right;">
							{{item.money}}元
						</view>
					</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",
				},
                pagenum: 1,
                wateringList: [],
                pagesize: 10, // 一页多少数据
                isLoading: false, // 是否正在加载数据  
                noMoreData: false, // 是否没有更多数据  
                total: 0,
				deviceId:'',
				showflag:false,
				jlflag:false
			}
		},
		onLoad(option) {
			this.deviceId = option.id
			this.getlist()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			getlist(){
				this.$u.get('/app/bill/rechargeListByDevice?deviceId='+this.deviceId+ '&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.wateringList = this.wateringList.concat(res.rows)
							this.pagenum++
						} else {
							// 没有更多数据  
							this.noMoreData = true
						}
						this.isLoading = false
					}
				})
			},
			onReachBottom() {
				let sum = this.total / this.pagesize
				if (this.pagenum-1 < sum) {
					this.getlist(); // 上拉加载更多  
				} else {
					this.jlflag = true
				}
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .u-icon__icon{
		padding-bottom: 22rpx;
	}
	page {
		background: #F4F5F7;
	}

	.page {
		width: 750rpx;
		.box{
			width: 750rpx;
			height:100%;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 22rpx;
			padding-bottom: 300rpx;
			.list{
				width: 680rpx;
				height: 252rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: auto;
				padding: 34rpx 28rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.list_val{
					display: flex;
					justify-content: space-between;
					.lt{
						.tit{
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;
						}
						.wz{
							font-size: 26rpx;
							color: #808080;
							margin-top: 16rpx;
						}
					}
					.rt{
						.top{
							font-size: 26rpx;
							color: #808080;
						}
						.je{
							font-weight: 600;
							font-size: 28rpx;
							color: #3D3D3D;
							margin-top: 66rpx;
						}
					}
				}
			}
		}
	}
</style>