<template>
	<view v-if="isLoading" class="skeleton-container" style="padding: 10rpx 30rpx">
		<!-- 骨架屏记录项 -->
		<view class="skeleton-record-item" v-for="i in 3" :key="i">
			<!-- 标题骨架 -->
			<view class="skeleton-title"></view>

			<!-- 金额区域骨架 -->
			<view class="skeleton-amount-section">
				<view class="skeleton-amount-line"></view>
				<view class="skeleton-amount-value"></view>
			</view>

			<!-- 信息行骨架 -->
			<view class="skeleton-info-row">
				<view class="skeleton-info-label"></view>
				<view class="skeleton-info-value"></view>
			</view>

			<view class="skeleton-info-row">
				<view class="skeleton-info-label"></view>
				<view class="skeleton-info-value"></view>
			</view>

			<view class="skeleton-info-row">
				<view class="skeleton-info-label"></view>
				<view class="skeleton-info-value"></view>
			</view>
		</view>

		<!-- 加载更多骨架 -->
		<view class="skeleton-loadmore"></view>
	</view>
	<view v-else style="padding: 10rpx 30rpx;">
		<view class="" v-for="(item,index) in withdrowList" :key="index"
			style="margin-top: 20rpx; gap: 20rpx; background-color: #fff; border-radius: 20rpx;  padding: 30rpx;  ">
			<view class="" style=" display: flex; align-items: center; justify-content: space-between; font-weight: bold; border-bottom: 1rpx solid #f6f6f6; padding-bottom: 15rpx;">
				余额提现-{{ item.payway}}
				<view class=""  :style="{ 'color': item.status==0?'#1890FF':(item.status==1?'#52C41A':'#FF4D4F') }" >
					{{ item.status==0?'待审核':(item.status==1?'已通过':'已拒绝') }}
				</view>
			</view>
			<view class=""
				style="width: 100%; height: 200rpx; display: flex;flex-direction: column; justify-content: center; align-items: center; ">
				<view class="" style="">
					提现金额 {{ item.withAmount}} 元
				</view>
				<view class="" style="font-size: 32rpx; font-weight: bold; margin-top: 10rpx; ">
					实际到账 {{item.amount}} 元
				</view>
			</view>
			<view class="" style="display: flex; align-items: center;  gap: 30rpx; ">
				<view class="" style="width: 120rpx;">
					收款人
				</view>
				<view class="" style="">
					{{ item.name }}
				</view>
			</view>
			<view class="" style="display: flex; align-items: center;  gap: 30rpx; margin-top: 10rpx; ">
				<view class="" style="width: 120rpx;">
					提现账号
				</view>
				<view class="" style="">
					{{ item.account }}
				</view>
			</view>
			<view class="" style="display: flex; align-items: center;  gap: 30rpx;  margin-top: 10rpx;">
				<view class="" style="width: 120rpx;">
					提现时间
				</view>
				<view class="" style="">
					{{ Service.formatDate(item.addTime,1) }}
				</view>
			</view>
			<view v-if="item.reply  &&  item.status==-1" class="" style="display: flex; align-items: center;  gap: 30rpx;  margin-top: 10rpx;">
				<view class="" style="width: 120rpx;">
					拒绝通知
				</view>
				<view class="" style="">
					{{ item.reply }}
				</view>
			</view>
			
		</view>
		<up-loadmore :status="status" />
		<view class="" style="width: 100%; height: 20rpx;" >
			
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { Service } from '@/Service/Service';
	import { ref } from "vue";
	import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'

	let isLoading = ref(true)

	let withdrowList = ref<Array<any>>([])
	let status = ref('nomore')
	let page = ref(1)

	onLoad(() => {
		getData()
	});

	onShow(() => {

	});



	onReachBottom(() => {
		getList()
	})

	const getData = () => {
		status.value = 'loadmore'
		page.value = 1
		withdrowList.value = []
		getList()
	}


	//获取订单 
	const getList = () => {
		if (status.value == 'nomore' || status.value == 'loading') {
			return
		}
		status.value == 'loadmore'
		CNRiderOrderService.GetRiderWithList(page.value).then(res => {
			isLoading.value = false
			if (res.data) {
				withdrowList.value = [...withdrowList.value, ...res.data.list]
				status.value = res.data.list == 10 ? 'loadmore' : 'nomore'
				page.value++
			}
		})

	}
</script>

<style lang="scss">
	.icon-placeholder {
		width: 70rpx;
		height: 70rpx;
		background-color: #E6F7FF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 骨架屏样式 */
	.skeleton-record-item {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		gap: 20rpx;
	}

	.skeleton-title {
		width: 200rpx;
		height: 32rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		margin-bottom: 20rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-amount-section {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.skeleton-amount-line {
		width: 180rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		margin-bottom: 10rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-amount-value {
		width: 250rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-info-row {
		display: flex;
		align-items: center;
		gap: 30rpx;
		margin-top: 10rpx;
	}

	.skeleton-info-label {
		width: 120rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-info-value {
		width: 300rpx;
		height: 28rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	.skeleton-loadmore {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
		background-size: 200% 100%;
		border-radius: 4rpx;
		margin-top: 20rpx;
		animation: skeleton-loading 1.5s infinite ease-in-out;
	}

	/* 骨架屏动画 */
	@keyframes skeleton-loading {
		0% {
			background-position: -100% 0;
		}

		100% {
			background-position: 100% 0;
		}
	}
</style>