<template>
	<view class="change-password-page">
		<view class="change-password-container">
			<view class="change-password-header">
				<text class="page-title">修改密码</text>
				<text class="page-subtitle">请输入手机号和验证码设置新密码</text>
			</view>

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

				<view class="input-item">
					<up-icon name="error-circle" size="20" color="#999"></up-icon>
					<input v-model="passwordForm.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">
					<up-icon name="lock" size="20" color="#999"></up-icon>
					<input v-model="passwordForm.password" class="input-field" :type="showPassword ? 'text' : 'password'"
						placeholder="请输入新密码" />
					<view class="password-toggle" @click="togglePassword">
						<up-icon :name="showPassword ? 'eye' : 'eye-off'" size="18" color="#999"></up-icon>
					</view>
				</view>

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

				<button class="confirm-btn" @click="confirmChange">
					确认修改
				</button>
			</view>
		</view>
	</view>
</template>

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

	const counting = ref(false);
	const countdown = ref(60);
	const showPassword = ref(false);
	const showConfirmPassword = ref(false);

	const passwordForm = ref({
		phone: '',
		code: '',
		password: '',
		confirmPassword: ''
	});

	onLoad(() => {

	});

	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

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

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

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

		counting.value = true;
		LoginService.SendSms(passwordForm.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 confirmChange = () => {
		if (!passwordForm.value.phone) {
			Service.Msg('请输入手机号');
			return;
		}

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

		if (!passwordForm.value.code) {
			Service.Msg('请输入验证码');
			return;
		}

		if (!passwordForm.value.password) {
			Service.Msg('请输入新密码');
			return;
		}

		if (passwordForm.value.password.length < 6) {
			Service.Msg('密码长度不能少于6位');
			return;
		}

		if (!passwordForm.value.confirmPassword) {
			Service.Msg('请确认新密码');
			return;
		}

		if (passwordForm.value.password !== passwordForm.value.confirmPassword) {
			Service.Msg('两次密码输入不一致');
			return;
		}

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

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

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

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

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

	.password-toggle {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.confirm-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);
		}
	}
</style>
