<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="充值记录"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			
			<view class="wrapper">
				
				<view class="list-wrap">
					
					<view class="list-box" v-for="(item,index) in list">
						<view class="top">
							<view>订单号：{{ item.order_no }}</view>
						</view>
						<view class="content">
							<view>
								<text>充值金额：</text>
								<text>{{ item.pay_price }}</text>
							</view>
							<view>
								<text>赠送金额：</text>
								<text>{{ item.gift_money }}</text>
							</view>
							<view>
								<text>充值时间：</text>
								<text>{{ item.create_time }}</text>
							</view>
						</view>
						<view class="bottom">
							<text v-if="item.pay_status == 1">未支付</text>
							<text v-if="item.pay_status == 2">已支付</text>
							<text v-if="item.pay_status == 3">支付失败</text>
						</view>
					</view>
					
				</view>
				
			</view>
			
		</el-refresh>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	
	const refreshRef  = ref();
	const navTop 	  = ref(0);
	
	onLoad(()=>{
		nextTick(()=>{
			init();
		})
	});
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value);
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => {
				uni.$http.get("ucenter.recharge/log",{ page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 20rpx;
		.list-wrap {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			font-size: 28rpx;
			.list-box {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 20rpx;
				padding-top: 0;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 2rpx solid #eee;
					height: 70rpx;
					line-height: 70rpx;
				}
				.content {
					padding: 20rpx 0;
					border-bottom: 2rpx solid #eee;
					display: flex;
					flex-direction: column;
					view {
						padding: 5rpx 0;
						display: flex;
						justify-content: space-between;
						
					}
				}
				.bottom {
					padding-top: 20rpx;
					text-align: right;
				}
			}
		}
	}
</style>