<template>
	<view class="container">
		<u-empty
		v-if="moneyList.length<1"
				width="300"
		        mode="history"
		        icon="http://cdn.uviewui.com/uview/empty/history.png"
				text="No History~"
		>
		</u-empty>
		<view class="box_" v-for="(item, index) in moneyList">
			<view class="b_tu"  v-if="item.type == 1">
				<image src="../../static/imgs/set1.png" mode=""></image>
				<view class="">{{item.startName}}</view>
			</view>
			<view class="b_tu" v-if="item.type == 1" >
				<image src="../../static/imgs/set2.png" mode="" style="width: 16px;margin-right: 19px;"></image>
				<view class="">{{item.endName}}</view>
			</view>
			<view class="bottom_box">
				<view
					style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0 10px;">
					<view class="b_tu">
						<image src="../../static/imgs/set3.png" mode=""></image>
						<view style="font-size: 16px;color: #242E42;font-weight: bold;"><text class="num_red" v-if="item.type == 1"  >-￥{{item.amount || 0}}</text> <text  class="num_lv" v-else>+￥{{item.amount || 0}}</text> </view>
					</view>
					<view class="color1">{{item.rechargeTime}}</view>
				</view>

			</view>


		</view>
	<!-- 	<view class="moneybox" v-for="(item,index) in moneyList" :key="index">
			<view class="d_s">
				<image src="../../static/imgs/set3.png" mode=""></image>
				<view class="">{{item.rechargeTime}}</view>
			</view>

			<view class="num_red" v-if="item.type == 1">-${{item.amount/100 || 0}}</view>
			<view class="num_lv" v-else>+${{item.amount/100 || 0}}</view>
		</view> -->

	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
	import request from '../../utils/request'

	export default {
		data() {
			return {

				msg: "3",
				List: [],
				moneyList:[],
				show: false,
				status: 'loading',
				total:0,
				param: {
					pageNum: 1,
					pageSize: 30,
					orderByColumn:"recharge_time"
				},
			}
		},
		onShow() {
			this.listByUser()
		},
		onPullDownRefresh() {
			console.log("刷新");
			this.pageNum = 1
			this.listByUser()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.moneyList.length < this.total) {
				this.param.pageNum++;
				this.listByUser()
			}
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},

		components: {

			tabbar
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			async listByUser() {

				let res = await request({
					url: 'system/taxiRrecords/listByUser',
					method: 'get',
						params: this.param
				})
				if (res.code == 200) {
					if (this.param.pageNum == 1) {
						this.moneyList = res.rows
					} else {
						this.moneyList = this.moneyList.concat(res.rows)
					}
					this.total = res.total
					// this.moneyList = res.rows
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		background: #f8f8f8;
		box-sizing: border-box;
		padding-top: 1px;
	}

	.box_ {
		width: 90%;
		border-radius: 6px;
		background: #fff;
		box-sizing: border-box;
		padding: 1px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		margin: 15px auto;

	}

	.b_tu {
		width: 95%;
		margin: 15px auto;
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 16px;
		color: #333333;

		image {
			width: 20px;
			margin-right: 15px;
			height: 20px;
		}
	}

	.bottom_box {
		width: 100%;
		border-top: 1px solid #f8f8f8;
	}

	.color1 {
		width: 30%;
		font-weight: 500;
		font-size: 14px;
		color: #c3c3c3;
	}

	.color2 {
		font-weight: 500;
		font-size: 14px;
		color: #32714F;
	}

	.color3 {
		font-weight: 500;
		font-size: 14px;
		color: #999999;
	}
	.moneybox{
		width: 90%;
		border-radius: 6px;
		background: #fff;
		box-sizing: border-box;
		padding: 15px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		margin: 15px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image {
			width: 20px;
			margin-right: 15px;
			height: 20px;
		}
	}
	.num_lv{
		font-weight: bold;
		color: #1e8303;
	}
	.num_red{
		font-weight: bold;
		color: #cb0000;
	}
	.d_s{
		display: flex;
		align-items: center;
	}
</style>
