<template>
	<view class="">


		<view class="transfer-section">
			<view class="transfer-card">
				<view class="form-item">
					<text class="form-label">转账到</text>
					<view class="type-options">
						<view class="type-item" :class="{ active: transferType === 1 }" @click="transferType = 1">
							<view class="type-radio">
								<view v-if="transferType === 1" class="type-radio-dot"></view>
							</view>
							<view class="type-info">
								<text class="type-name">报单积分</text>
							</view>
						</view>
						<view class="type-item" :class="{ active: transferType === 2 }" @click="transferType = 2">
							<view class="type-radio">
								<view v-if="transferType === 2" class="type-radio-dot"></view>
							</view>
							<view class="type-info">
								<text class="type-name">普通积分</text>
							</view>
						</view>
						<view class="type-item" :class="{ active: transferType === 3 }" @click="transferType = 3">
							<view class="type-radio">
								<view v-if="transferType === 3" class="type-radio-dot"></view>
							</view>
							<view class="type-info">
								<text class="type-name">自营积分</text>
							</view>
						</view>
					</view>
				</view>

				<view class="form-item" style="margin-bottom: 10rpx;">
					<text class="form-label">转账金额</text>
					<view class="input-wrapper amount-wrapper">
						<text class="currency-symbol">¥</text>
						<input v-model="transferForm.amount" class="input-field amount-input" type="text"
							placeholder="0.00" @input="handleAmountInput" />
					</view>
					<view class="amount-hint" style="margin-top: 20rpx;">
						<text class="hint-text">当前余额：</text>
						<text class="available-amount">¥{{ accInfo.account }}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="bottom-action">
			<button class="transfer-btn" @click="handleTransfer" :disabled="!canTransfer">
				立即转账
			</button>
		</view>

		<up-popup :show="showPasswordPopup" mode="center" :round="20" :closeOnClickOverlay="false">
			<view class="password-popup">
				<view class="popup-header">
					<text class="popup-title">请输入支付密码</text>
					<view class="popup-close" @click="closePasswordPopup">
						<up-icon name="close" size="24" color="#999"></up-icon>
					</view>
				</view>
				<view class="popup-content">
					<view class="password-desc">转账金额：¥{{ transferForm.amount || '0.00' }}</view>
					<view class="password-input-wrapper">
						<view v-for="(item, index) in 6" :key="index" class="password-box"
							:class="{ active: passwordInput.length === index }">
							<text v-if="passwordInput[index]" class="password-dot"></text>
						</view>
					</view>
					<input ref="passwordInputRef" v-model="passwordInput" class="hidden-password-input" type="number"
						maxlength="6" :focus="showPasswordPopup" @input="onPasswordInput" />
					<view class="forget-password" @click="goToSetPassword">
						<text class="forget-text">忘记密码？</text>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

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

	const showPasswordPopup = ref(false);
	const passwordInput = ref('');
	const passwordInputRef = ref<any>(null);

	const transferType = ref(1)
	const transferForm = ref({
		amount: ''
	});
	
	let accInfo=ref<any>({})
	const canTransfer = computed(() => {
		return transferForm.value.amount &&
			parseFloat(transferForm.value.amount) > 0;
	});

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


	const getAccInfo = () => {
		UserService.GetUserAccInfo().then(res => {
			if (res.code == 0) {
				accInfo.value = res.data.accInfo;
			} else {
				Service.Msg(res.msg);
			}
		});
	};

	const handleAmountInput = (e : any) => {
		let value = e.detail.value;

		value = value.replace(/[^\d.]/g, '');

		const parts = value.split('.');
		if (parts.length > 2) {
			value = parts[0] + '.' + parts.slice(1).join('');
		}

		if (parts.length === 2 && parts[1].length > 2) {
			value = parts[0] + '.' + parts[1].substring(0, 2);
		}

		transferForm.value.amount = value;
	};

	const handleTransfer = () => {
		if (!transferForm.value.amount) {
			Service.Msg('请输入转账金额');
			return;
		}

		if (parseFloat(transferForm.value.amount) <= 0) {
			Service.Msg('转账金额必须大于0');
			return;
		}


		passwordInput.value = '';
		showPasswordPopup.value = true;

		nextTick(() => {
			if (passwordInputRef.value) {
				passwordInputRef.value.focus();
			}
		});
	};

	const onPasswordInput = () => {
		if (passwordInput.value.length === 6) {
			submitTransfer();
		}
	};

	const submitTransfer = () => {
		showPasswordPopup.value = false;
		Service.LoadIng('转账中...');
		UserService.TranAccount(Number(transferForm.value.amount), transferType.value).then(res => {
			if (res.code == 0) {
				Service.LoadClose();
				Service.Msg('转账成功！');
				setTimeout(() => {
					Service.GoPageBack();
				}, 1000);
			} else {
				Service.Msg(res.msg)
			}
		})
	};

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

	const goToSetPassword = () => {
		closePasswordPopup();
		Service.GoPage('/pages/userFunc/setPaypwd');
	};
</script>

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


	.transfer-section {
		padding: 30rpx 30rpx 0;
	}

	.transfer-card {
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	}

	.form-item {
		margin-bottom: 40rpx;

		&:last-child {
			margin-bottom: 30rpx;
		}
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

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

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

		&.amount-wrapper {
			padding: 30rpx;
		}
	}

	.currency-symbol {
		font-size: 48rpx;
		font-weight: bold;
		color: #FF6A00;
		margin-right: 10rpx;
		line-height: 1;
	}

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

		&.amount-input {
			font-size: 48rpx;
			font-weight: bold;
			color: #1F2937;
			margin-left: 0;
		}
	}

	.type-options {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

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

		&.active {
			border-color: #FF6A00;
			background: #FFF7ED;
		}

		&:active {
			opacity: 0.8;
		}
	}

	.type-radio {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		flex-shrink: 0;

		.type-item.active & {
			border-color: #FF6A00;
		}
	}

	.type-radio-dot {
		width: 20rpx;
		height: 20rpx;
		background: #FF6A00;
		border-radius: 50%;
	}

	.type-info {
		flex: 1;
	}

	.type-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.type-desc {
		font-size: 22rpx;
		color: #999;
		margin-top: 4rpx;
	}

	.amount-hint {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.hint-text {
		font-size: 24rpx;
		color: #999;
	}

	.available-amount {
		font-size: 24rpx;
		color: #FF6A00;
		font-weight: 600;
	}

	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
		z-index: 100;
	}

	.transfer-btn {
		width: 100%;
		background: linear-gradient(135deg, #FF6A00 0%, #FF7F00 100%);
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
		border: none;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 24rpx rgba(255, 106, 0, 0.3);
		transition: all 0.3s;

		&:disabled {
			opacity: 0.5;
			box-shadow: none;
		}

		&:active:not(:disabled) {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(255, 106, 0, 0.2);
		}
	}

	.password-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

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

	.popup-close {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

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

	.password-desc {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
	}

	.password-input-wrapper {
		display: flex;
		justify-content: center;
		gap: 16rpx;
		margin-bottom: 30rpx;
	}

	.password-box {
		width: 80rpx;
		height: 80rpx;
		border: 2rpx solid #E5E7EB;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F9FAFB;
		transition: all 0.3s;

		&.active {
			border-color: #FF6A00;
			background: #FFF;
		}
	}

	.password-dot {
		width: 20rpx;
		height: 20rpx;
		background: #333;
		border-radius: 50%;
	}

	.hidden-password-input {
		position: absolute;
		top: -9999rpx;
		left: -9999rpx;
		width: 1rpx;
		height: 1rpx;
		opacity: 0;
	}

	.forget-password {
		text-align: center;
	}

	.forget-text {
		font-size: 26rpx;
		color: #FF6A00;
	}
</style>