<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" :key="index">
						<view class="top">
							<view>提现至{{ item.pay_name || '' }}</view>
							<view>{{ item.price }}元</view>
						</view>
						<view class="content">
							<view class="field-box">
								<view class="label">帐户信息</view>
								<view class="value">{{ item.account }}</view>
							</view>
							<view class="field-box">
								<view class="label">提现单号</view>
								<view class="value">{{ item.order_no }}</view>
							</view>
							<view class="field-box">
								<view class="label">申请状态</view>
								<view class="value">{{ item.status }}</view>
							</view>
							<view class="field-box">
								<view class="label">手续费</view>
								<view class="value">{{ item.pay_fee }}</view>
							</view>
							<view class="field-box">
								<view class="label">申请时间</view>
								<view class="value">{{ item.create_time }}</view>
							</view>
						</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.withdraw/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;
					view {
						&:nth-child(2){
							color: red;
						}
					}
				}
				.content {
					padding: 10rpx 0rpx;
					display: flex;
					flex-direction: column;
					.field-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 8rpx 0;
					}
				}
			}
		}
	}
</style>