<template>
	<view class="forgot-password-container">
		<view class="forgot-password-content">
			<!-- 头部 -->
			<view class="header">
				
				
			</view>

			<!-- 表单区域 -->
			<view class="form-section">
				<view class="input-group">
					<view class="input-icon">📱</view>
					<input 
						class="input-field" 
						v-model="phone" 
						type="number"
						maxlength="11"
						placeholder="请输入手机号"
					/>
				</view>

				<view class="input-group">
					<view class="input-icon">✉️</view>
					<input 
						class="input-field" 
						v-model="code" 
						type="number"
						maxlength="6"
						placeholder="请输入验证码"
					/>
					<button class="code-btn" @click="sendCode" :disabled="counting">
						{{ codeText }}
					</button>
				</view>

				<view class="input-group">
					<view class="input-icon">🔐</view>
					<input 
						class="input-field" 
						v-model="newPassword" 
						:password="!showPassword"
						placeholder="请输入新密码（6-20位）"
					/>
					<view class="eye-icon" @click="togglePassword">
						{{ showPassword ? '👁️' : '👁️‍🗨️' }}
					</view>
				</view>

				<view class="input-group">
					<view class="input-icon">🔐</view>
					<input 
						class="input-field" 
						v-model="confirmPassword" 
						:password="!showConfirmPassword"
						placeholder="请确认新密码"
					/>
					<view class="eye-icon" @click="toggleConfirmPassword">
						{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
					</view>
				</view>

				<button class="reset-btn" @click="handleReset" :disabled="loading">
					<text v-if="loading">重置中...</text>
					<text v-else>重置密码</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { API_BASE } from '@/config/api.js';

export default {
	data() {
		return {
			phone: '',
			code: '',
			newPassword: '',
			confirmPassword: '',
			showPassword: false,
			showConfirmPassword: false,
			loading: false,
			counting: false,
			countdown: 60,
			codeText: '获取验证码'
		};
	},
	methods: {
		// 返回
		goBack() {
			uni.navigateBack();
		},
		
		// 切换密码显示
		togglePassword() {
			this.showPassword = !this.showPassword;
		},
		
		toggleConfirmPassword() {
			this.showConfirmPassword = !this.showConfirmPassword;
		},
		
		// 发送验证码
		async sendCode() {
			if (!this.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			
			try {
				const res = await uni.request({
					url: `${API_BASE}/api/sms/send`,
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						phone: this.phone,
						purpose: 'RESET_PASSWORD'
					}
				});
				
				const { statusCode, data } = res[1] || res;
				
				if (statusCode === 200) {
					// 开始倒计时
					this.counting = true;
					this.countdown = 60;
					
					const timer = setInterval(() => {
						this.countdown--;
						this.codeText = `${this.countdown}秒后重试`;
						
						if (this.countdown <= 0) {
							clearInterval(timer);
							this.counting = false;
							this.codeText = '获取验证码';
						}
					}, 1000);
					
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: data?.message || '发送失败',
						icon: 'none'
					});
				}
			} catch (err) {
				console.error('[ForgotPassword] 发送验证码失败:', err);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},
		
		// 重置密码
		async handleReset() {
			if (!this.phone) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			}
			
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			
			if (!this.code) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return;
			}
			
			if (!this.newPassword) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				});
				return;
			}
			
			if (this.newPassword.length < 6 || this.newPassword.length > 20) {
				uni.showToast({
					title: '密码长度为6-20位',
					icon: 'none'
				});
				return;
			}
			
			if (this.newPassword !== this.confirmPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
				return;
			}
			
			this.loading = true;
			
			try {
				const res = await uni.request({
					url: `${API_BASE}/api/users/forgot-password`,
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: {
						phone: this.phone,
						code: this.code,
						newPassword: this.newPassword
					}
				});
				
				const { statusCode, data } = res[1] || res;
				
				if (statusCode === 204 || statusCode === 200) {
					uni.showToast({
						title: '密码重置成功',
						icon: 'success',
						duration: 1500
					});
					
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: data?.message || '重置失败',
						icon: 'none',
						duration: 2000
					});
				}
			} catch (err) {
				console.error('[ForgotPassword] 重置密码失败:', err);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none',
					duration: 2000
				});
			} finally {
				this.loading = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.forgot-password-container {
	min-height: 100vh;
	background: #FDF8F2;
	background-image: 
		radial-gradient(circle at 10% 20%, rgba(212, 185, 150, 0.1) 0%, transparent 20%),
		radial-gradient(circle at 90% 80%, rgba(109, 139, 139, 0.1) 0%, transparent 20%);
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

.forgot-password-content {
	padding: 40upx;
}

/* 头部 */
.header {
	display: flex;
	align-items: center;
	margin-bottom: 60upx;
	
	.back-btn {
		font-size: 28upx;
		color: #8B7355;
		font-weight: 600;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36upx;
		font-weight: bold;
		color: #333;
		margin-right: 80upx;
	}
}

/* 表单区域 */
.form-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 40upx;
	padding: 60upx 40upx;
	box-shadow: 0 16upx 60upx rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(20upx);
}

.input-group {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 30upx;
	padding: 0 30upx;
	margin-bottom: 30upx;
	height: 100upx;
	
	.input-icon {
		font-size: 40upx;
		margin-right: 20upx;
	}
	
	.input-field {
		flex: 1;
		font-size: 30upx;
		color: #333;
	}
	
	.eye-icon {
		font-size: 40upx;
		padding: 10upx;
	}
	
	.code-btn {
		padding: 12upx 24upx;
		background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
		color: #ffffff;
		border: none;
		border-radius: 20upx;
		font-size: 24upx;
		white-space: nowrap;
	}
	
	.code-btn[disabled] {
		opacity: 0.6;
	}
}

.reset-btn {
	width: 100%;
	height: 100upx;
	background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
	color: #ffffff;
	border: none;
	border-radius: 50upx;
	font-size: 32upx;
	font-weight: bold;
	box-shadow: 0 16upx 40upx rgba(139, 115, 85, 0.3);
	margin-top: 20upx;
	
	&:active {
		transform: translateY(-2upx);
		box-shadow: 0 20upx 50upx rgba(139, 115, 85, 0.4);
	}
}

.reset-btn[disabled] {
	opacity: 0.6;
	transform: none !important;
}
</style>
