<template>
	<view class="withdraw-list-page">
		<view class="withdraw-list">
			<view class="list-header">
				<text class="list-title">提现记录</text>
			</view>

			<view v-if="withdrawList.length > 0" class="withdraw-item" v-for="(item, index) in withdrawList"
				:key="index">
				<view class="item-left">
					<view class="user-info">
						<text class="user-name">{{ item.name }}</text>
					</view>
					<view class="account-info">
						<text class="account-label">提现银行：</text>
						<text class="account-value">{{ item.bankName }}</text>
					</view>
					<view class="account-info">
						<text class="account-label">提现账户：</text>
						<text class="account-value">{{ item.account }}</text>
					</view>
					<view class="time-info">
						<text v-if="item.service" class="fee-info">手续费: ¥{{ item.service }}</text>
						<text v-if="item.refuse" class="fee-info" style="color: red;">拒绝原因:{{ item.refuse }}</text>
						<text class="withdraw-time">提现时间: {{ Service.formatDate(item.addTime, 1) }}</text>
					</view>
				</view>
				<view class="item-right">
					<text class="amount">¥{{ item.withAmount }}</text>
					<view class="status-tag" :class="getStatusClass(item.state)">
						{{ getStatusText(item.state) }}
					</view>
				</view>
			</view>

			<view v-else class="empty-state">
				<text class="empty-text">暂无提现记录</text>
			</view>
		</view>

		<up-loadmore v-if="withdrawList.length > 0" :status="status" />
	</view>
</template>

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

	const withdrawList = ref<Array<any>>([]);
	let page = ref(1);
	let status = ref('nomore');
	let accType = ref('moneyAcc');

	onLoad((data : any) => {
		getData()
	});

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

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

	const getList = () => {
		if (status.value == 'loading' || status.value == 'nomore') {
			return;
		}
		status.value = 'loading';
		UserService.GetUserWithList('', page.value).then(res => {
			if (res.code == 0) {
				withdrawList.value = [...withdrawList.value, ...res.data.list];
				status.value = res.data.list.length == 10 ? 'loadmore' : 'nomore';
				page.value++;
			} else {
				Service.Msg(res.msg);
			}
		});
	};

	const getStatusText = (state : number) => {
		const stateMap : { [key : number] : string } = {
			0: '审核中',
			1: '已打款',
			2: '拒绝提现',
		};
		return stateMap[state] || '未知';
	};

	const getStatusClass = (state : number) => {
		const classMap : { [key : number] : string } = {
			0: 'pending',
			1: 'processing',
			2: 'success',
			3: 'failed'
		};
		return classMap[state] || '';
	};
</script>

<style scoped lang="scss">
	.withdraw-list-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.list-header {
		margin-bottom: 20rpx;
	}

	.list-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.withdraw-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
	}

	.item-left {
		flex: 1;
	}

	.user-info {
		margin-bottom: 12rpx;
	}

	.user-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.account-info {
		margin-bottom: 8rpx;
		display: flex;
		align-items: center;
	}

	.account-label {
		font-size: 24rpx;
		color: #999;
	}

	.account-value {
		font-size: 24rpx;
		color: #666;
		font-weight: 500;
	}

	.time-info {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.withdraw-time {
		font-size: 24rpx;
		color: #999;
	}

	.fee-info {
		font-size: 24rpx;
		color: #666;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 12rpx;
	}

	.amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #F97316;
	}

	.status-tag {
		font-size: 22rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;

		&.pending {
			background-color: #FFF7ED;
			color: #F97316;
		}

		&.processing {
			background-color: #EFF6FF;
			color: #3B82F6;
		}

		&.success {
			background-color: #ECFDF5;
			color: #10B981;
		}

		&.failed {
			background-color: #FEF2F2;
			color: #EF4444;
		}
	}

	.empty-state {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 80rpx 30rpx;
		text-align: center;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>