<template>
	<view class="forgot-password-page">
		<view class="forgot-password-container">
			<view class="forgot-password-header">
				<!-- <image :src="Service.GetIconImg('/static/logo/logo.png')" class="logo"></image> -->
				<text class="app-title">忘记密码</text>
				<text class="app-subtitle">请验证您的身份</text>
			</view>

			<view class="forgot-password-form">
				<view class="input-item">
					<u-icon name="phone" size="20" color="#999"></u-icon>
					<input v-model="formData.phone" class="input-field" type="number" maxlength="11"
						placeholder="请输入手机号" />
				</view>

				<view class="input-item">
					<u-icon name="error-circle" size="20" color="#999"></u-icon>
					<input v-model="formData.code" class="input-field code-input" type="number" maxlength="6"
						placeholder="请输入验证码" />
					<button class="code-btn"  :disabled="counting" @click="getCode">
						{{ counting ? `${countdown}s` : '获取验证码' }}
					</button>
				</view>

				<view class="input-item">
					<u-icon name="lock" size="20" color="#999"></u-icon>
					<input v-model="formData.newPassword" class="input-field" type="password"
						:password="showNewPassword" placeholder="请设置新密码" />
					<u-icon :name="showNewPassword ? 'eye-off' : 'eye'" size="20" color="#999"
						@click="toggleNewPassword"></u-icon>
				</view>

				<view class="input-item">
					<u-icon name="lock" size="20" color="#999"></u-icon>
					<input v-model="formData.confirmPassword" class="input-field" type="password"
						:password="showConfirmPassword" placeholder="请确认新密码" />
					<u-icon :name="showConfirmPassword ? 'eye-off' : 'eye'" size="20" color="#999"
						@click="toggleConfirmPassword"></u-icon>
				</view>

				<button class="submit-btn" @click="handleSubmit">
					确认修改
				</button>

				<view class="forgot-password-footer">
					<text class="footer-text">想起密码了？</text>
					<text class="footer-link" @click="goToLogin">返回登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service';
	import { LoginService } from "@/Service/api/LoginService"
	
	
	const showNewPassword = ref(false);
	const showConfirmPassword = ref(false);
	const counting = ref(false);
	const countdown = ref(60);

	const formData = ref({
		phone: '',
		code: '',
		newPassword: '',
		confirmPassword: ''
	});

	const toggleNewPassword = () => {
		showNewPassword.value = !showNewPassword.value;
	};

	const toggleConfirmPassword = () => {
		showConfirmPassword.value = !showConfirmPassword.value;
	};

	const getCode = () => {
		if (!formData.value.phone) {
			Service.Msg('请输入手机号!');
			return;
		}

		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(formData.value.phone)) {
			Service.Msg('请输入正确的手机号!');
			return;
		}

		counting.value = true;
		LoginService.SendSms(formData.value.phone,'ForgetPwd').then(res => {
			if (res.code == 0) {
				Service.Msg('验证码已发送!');
			} else {
				Service.Msg(res.msg)
			}
		})

		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				counting.value = false;
				countdown.value = 60;
			}
		}, 1000);
	};

	const handleSubmit = () => {
		if (!formData.value.phone) {
			Service.Msg('请输入手机号!');
			return;
		}
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(formData.value.phone)) {
			Service.Msg('请输入正确的手机号!');
			return;
		}
		if (!formData.value.code) {
			Service.Msg('请输入验证码!');
			return;
		}
		if (!formData.value.newPassword) {
			Service.Msg('请设置新密码!');
			return;
		}
		if (formData.value.newPassword.length < 6) {
			Service.Msg('密码长度不能少于6位!');
			return;
		}
		if (!formData.value.confirmPassword) {
			Service.Msg('请确认新密码!');
			return;
		}
		if (formData.value.newPassword !== formData.value.confirmPassword) {
			Service.Msg('两次输入的密码不一致!');
			return;
		}

		Service.LoadIng('修改中...');
		
		let data={
			phone:formData.value.phone,
			code:formData.value.code,
			pwd:formData.value.newPassword,
			npwd:formData.value.confirmPassword
		}
		
		LoginService.ForgetPwd(data).then(res=>{
			if(res.code==0){
				Service.LoadClose();
				Service.Msg('密码修改成功!');
				Service.GoPageDelse('/pages/login/login');
			}else{
				Service.Msg(res.msg)
			}
		})
	};

	const goToLogin = () => {
		Service.GoPageBack();
	};
</script>

<style scoped lang="scss">
	.forgot-password-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

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

	.forgot-password-header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.logo {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-bottom: 24rpx;
	}

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

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

	.forgot-password-form {
		margin-bottom: 30rpx;
	}

	.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;
	}

	.code-input {
		flex: 1;
	}

	.code-btn {
		margin-left: 20rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 12rpx;
		border: none;
		line-height: 1;
		white-space: nowrap;
		&:disabled {
			opacity: 0.6;
			background-color: #fff;
		}
	}

	.submit-btn {
		width: 100%;
		padding: 0 30rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		border: none;
		border-radius: 16rpx;
		margin-top: 30rpx;
		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);
		}
	}

	.forgot-password-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}

	.footer-text {
		font-size: 28rpx;
		color: #6B7280;
	}

	.footer-link {
		font-size: 28rpx;
		color: #F97316;
		font-weight: 600;
		margin-left: 8rpx;
	}
</style>