<template>
	<view class="change-pwd-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="修改登录密码"
			@clickLeft="goBack"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#eeeeee"
		></uni-nav-bar>

		<!-- 表单区域 -->
		<view class="form-wrapper">
			<view class="input-row">
				<input class="text-input" :password="true" v-model="oldPwd" placeholder="请输入原密码" placeholder-style="color:#c7c7c7" />
			</view>
			<view class="input-row">
				<input class="text-input" :password="!showNewPwd" v-model="newPwd" placeholder="新密码(6~16位数字字母组合)" placeholder-style="color:#c7c7c7" />
			</view>
			<view class="input-row">
				<input class="text-input" :password="!showConfirmPwd" v-model="confirmPwd" placeholder="确认新密码" placeholder-style="color:#c7c7c7" />
			</view>

			<view class="forgot" @click="goForgot">忘记密码?</view>
		</view>

		<!-- 底部确定按钮 -->
		<view class="bottom-bar">
			<button class="confirm-btn" @click="onConfirm">确 定</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import api from "@/api/api.js"

const oldPwd = ref('');
const newPwd = ref('');
const confirmPwd = ref('');
const showNewPwd = ref(false);
const showConfirmPwd = ref(false);

const goBack = () => {
	uni.navigateBack();
};

const goForgot = () => {
	// 跳转到忘记密码或短信登录页（如无专页，这里跳到短信登录）
	uni.navigateTo({ url: '/pages_app/smsLogin/smsLogin' });
};

const isStrong = (pwd) => {
	return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(pwd);
};

const onConfirm = () => {
	if (!oldPwd.value) {
		return uni.showToast({ title: '请输入原密码', icon: 'none' });
	}
	if (!newPwd.value) {
		return uni.showToast({ title: '请输入新密码', icon: 'none' });
	}
	if (!isStrong(newPwd.value)) {
		return uni.showToast({ title: '密码需6-16位数字字母组合', icon: 'none' });
	}
	if (confirmPwd.value !== newPwd.value) {
		return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
	}

	api.changePassword({
		old_password: oldPwd.value,
		password: newPwd.value
	}).then(res => {
		if (res.code === 200) {
			uni.showToast({ title: '修改密码成功', icon: 'none' });
			// 清除登录状态
			uni.clearStorageSync();
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages_app/login/login'
				});
			}, 2000);
		} else {
			uni.showToast({ title: res.msg || '修改密码失败', icon: 'none' });
		}
	});
};
</script>

<style scoped>
.change-pwd-page {
	background: #ffffff;
	min-height: 100vh;
}

.form-wrapper {
	padding: 40rpx 30rpx 0;
}

.input-row {
	margin-bottom: 30rpx;
	background: #ffffff;
	border: 2rpx solid #eeeeee;
	border-radius: 12rpx;
	padding: 0 24rpx;
}

.text-input {
	height: 96rpx;
	font-size: 30rpx;
}

.forgot {
	text-align: center;
	color: #8b8b8b;
	font-size: 28rpx;
	margin-top: 20rpx;
}

.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40rpx;
	padding: 0 30rpx;
}

.confirm-btn {
	height: 100rpx;
	line-height: 100rpx;
	border-radius: 50rpx;
	background-color: #ffffff;
	border: 2rpx solid #8B2316;
	color: #8B2316;
	font-size: 36rpx;
}
</style>

