<template>
	<view class="withdraw-page">
		<view class="withdraw-container">
			<view class="withdraw-header">
				<text class="page-title">申请提现</text>
				<text class="page-subtitle">请填写账户信息</text>
			</view>

			<view class="withdraw-form">
				<!-- 姓名 -->
				<view class="input-item">
					<up-icon name="account" size="20" color="#999"></up-icon>
					<input v-model="withdrawForm.name" class="input-field" type="text" placeholder="请输入姓名" />
				</view>
				<!-- 银行卡号 -->
				<view class="input-item">
					<image :src="Service.GetIconImg('/static/icon/userFunc/userBank.png')"
						style="width: 30rpx; height: 30rpx;" />
					<input v-model="withdrawForm.bankName" class="input-field" maxlength="19" placeholder="请输入所属银行" />
				</view>

				<!-- 银行卡号 -->
				<view class="input-item">
					<image :src="Service.GetIconImg('/static/icon/userFunc/bank.png')"
						style="width: 30rpx; height: 30rpx;"  />
					<input v-model="withdrawForm.bankCard" class="input-field" type="number" maxlength="19"
						placeholder="请输入银行卡号" />
				</view>

				<!-- 金额 -->
				<view class="input-item">
					<up-icon name="rmb-circle" size="20" color="#999"></up-icon>
					<input v-model="withdrawForm.amount" class="input-field" type="text" placeholder="请输入提现金额" />
				</view>

				<!-- 余额显示 -->
				<view class="balance-info">
					<view class="balance-row">
						<text class="balance-label">可提现余额：</text>
						<text class="balance-value">¥{{ currentBalance || '0.00' }}</text>
					</view>
					<!-- <view class="balance-row">
						<text class="quota-label">可提现额度：</text>
						<text class="balance-value">¥{{ withdrawQuota || '0.00' }}</text>
					</view> -->
				</view>
			</view>

			<view class="button-group">
				<button class="withdraw-btn" @click="handleWithdraw">
					确认提现
				</button>
			</view>
		</view>

		<!-- 支付密码弹窗 -->
		<up-popup :show="showPasswordPopup" mode="center" @close="closePasswordPopup" :closeable="true" :round="10"
			:closeOnClickOverlay="true">
			<view class="password-popup">
				<view class="password-popup-header">
					<text class="password-popup-title">输入支付密码</text>
				</view>
				<view class="password-popup-content">
					<view class="pay-amount">
						<text class="amount-label">提现金额</text>
						<text class="amount-value">¥{{ withdrawForm.amount || '0.00' }}</text>
					</view>
					<view class="password-input-wrapper">
						<view class="password-dots">
							<view v-for="(dot, index) in 6" :key="index" class="password-dot"
								:class="{ filled: index < payPassword.length }">
							</view>
						</view>
						<input v-model="payPassword" class="hidden-password-input" type="number" maxlength="6"
							:focus="showPasswordPopup" @input="handlePasswordInput" />
					</view>
					<view class="password-actions">
						<text class="forgot-password" @click="handleForgotPassword">忘记支付密码？</text>
					</view>
				</view>
				<view class="password-popup-footer">
					<button class="cancel-btn" @click="closePasswordPopup">取消</button>
					<button class="confirm-btn" @click="confirmWithdraw"
						:disabled="payPassword.length < 6">确认提现</button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

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

	const withdrawForm = ref({
		name: '',
		bankCard: '',
		amount: '',
		bankName: ''
	});

	const accountType = ref('user');
	const currentBalance = ref('0.00');
	const withdrawQuota = ref('0.00');
	const accInfo = ref<any>({});

	const showPasswordPopup = ref(false);
	const payPassword = ref('');


	let accType = ref('')
	onLoad((data : any) => {
		if (data.accType) {
			accType.value = data.accType;
		}
		getAccInfo();
	});

	const getAccInfo = () => {
		UserService.GetUserAccInfo().then(res => {
			if (res.code == 0) {
				accInfo.value = res.data.accInfo;
				currentBalance.value = accInfo.value.account;

			} else {
				Service.Msg(res.msg);
			}
		});
	};



	const handleWithdraw = () => {
		if (!withdrawForm.value.name) {
			Service.Msg('请输入姓名');
			return;
		}

		if (!withdrawForm.value.bankName) {
			Service.Msg('请输入所属银行');
			return;
		}


		if (!withdrawForm.value.bankCard) {
			Service.Msg('请输入银行卡号');
			return;
		}

		if (!withdrawForm.value.amount) {
			Service.Msg('请输入提现金额');
			return;
		}

		const amount = parseFloat(withdrawForm.value.amount);
		const balance = parseFloat(currentBalance.value);
		const quota = parseFloat(withdrawQuota.value);

		if (amount <= 0) {
			Service.Msg('提现金额必须大于0');
			return;
		}

		if (amount > balance) {
			Service.Msg('提现金额不能超过可提现余额');
			return;
		}

		showPasswordPopup.value = true;
		payPassword.value = '';
	};

	const handleTransfer = () => {
		Service.Msg('转账功能开发中');
	};

	const handlePasswordInput = () => {
	};

	const closePasswordPopup = () => {
		showPasswordPopup.value = false;
		payPassword.value = '';
	};

	const handleForgotPassword = () => {
		Service.GoPage('/pages/userFunc/setPaypwd');
	};

	const confirmWithdraw = () => {
		if (payPassword.value.length < 6) {
			Service.Msg('请输入完整的支付密码');
			return;
		}

		Service.LoadIng('提现申请中...');
		let data={
			amount:withdrawForm.value.amount,
			name:withdrawForm.value.name,
			account: withdrawForm.value.bankCard,
			pwd:payPassword.value,
			bankName:withdrawForm.value.bankName
		}
		
		UserService.UserWithAcc(data).then(res => {
			if (res.code == 0) {
				Service.LoadClose();
				Service.Msg('提现申请已提交，请等待审核');
				closePasswordPopup();
				setTimeout(() => {
					Service.GoPageBack();
				}, 1500);
			} else {
				Service.Msg(res.msg)
			}
		})

	};
</script>

<style scoped lang="scss">
	page {
		background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
	}

	.withdraw-page {

		padding: 40rpx;
	}

	.withdraw-container {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.1);
	}

	.withdraw-header {
		margin-bottom: 50rpx;
	}

	.page-title {
		display: block;
		font-size: 44rpx;
		font-weight: bold;
		color: #1F2937;
		margin-bottom: 10rpx;
	}

	.page-subtitle {
		font-size: 28rpx;
		color: #6B7280;
	}

	.withdraw-form {
		margin-bottom: 40rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		background-color: #F9FAFB;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		margin-bottom: 28rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s;

		&:focus-within {
			border-color: #F97316;
			background-color: #FFF;
		}
	}

	.input-field {
		flex: 1;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #1F2937;
	}

	.balance-info {
		display: flex;
		justify-content: space-around;
		gap: 16rpx;
		padding: 30rpx;
		background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
		border-radius: 16rpx;
	}

	.balance-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.balance-label {
		font-size: 28rpx;
		color: #6B7280;
	}

	.balance-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #F97316;
	}

	.quota-label {
		font-size: 28rpx;
		color: #6B7280;
	}

	.quota-value {
		font-size: 28rpx;
		font-weight: 500;
		color: #3B82F6;
	}

	.balance-all {
		font-size: 26rpx;
		color: #F97316;
		padding: 8rpx 20rpx;
		background-color: #FFF;
		border-radius: 20rpx;
	}

	.button-group {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.transfer-btn {
		flex: 1;
		padding: 0 30rpx;
		background: #fff;
		color: #F97316;
		font-size: 34rpx;
		font-weight: 600;
		border: 2rpx solid #F97316;
		border-radius: 16rpx;
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			background-color: #FFF7ED;
		}
	}

	.withdraw-btn {
		flex: 1;
		padding: 0 30rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		border: none;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.3);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.2);
		}
	}

	/* 支付密码弹窗样式 */
	.password-popup {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.password-popup-header {
		padding: 40rpx 30rpx 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.password-popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.password-popup-content {
		padding: 40rpx 30rpx;
	}

	.pay-amount {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.amount-label {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

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

	.password-input-wrapper {
		position: relative;
		margin-bottom: 30rpx;
	}

	.password-dots {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #f9fafb;
		border-radius: 16rpx;
		border: 2rpx solid #e5e7eb;
	}

	.password-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: transparent;
		border: 2rpx solid #d1d5db;
		transition: all 0.3s;

		&.filled {
			background-color: #333;
			border-color: #333;
		}
	}

	.hidden-password-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.password-actions {
		text-align: right;
	}

	.forgot-password {
		font-size: 26rpx;
		color: #F97316;
	}

	.password-popup-footer {
		display: flex;
		padding: 0 30rpx 30rpx;
		gap: 20rpx;
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #fff;

		&:disabled {
			opacity: 0.5;
		}
	}
</style>