<template>
	<view class="editPassword">
		<!-- 顶部导航栏 -->
		<custom-navbar title="设置密码" :showBack="true" borderBottom="none" backgroundColor="transparent"></custom-navbar>

		<view class="password-title">
			<text>设置新密码</text>
		</view>

		<view class="password-tip">
			<text>登录密码用于美融融商家登录，密码<text style="color: #FF4767;">至少6个字符，不能全是字母或者数字</text></text>
		</view>

		<!-- 新密码输入区域 -->
		<view class="newPassword">
			<view class="password-text">新密码</view>
			<view class="input-item">
				<input type="text" v-model="newPassword" placeholder="请输入密码" :password="!showNewPassword" maxlength="20"
					class="input-text" @input="checkPwdError" />
				<image src="/static/images/icons/noLook.png" mode="widthFix" class="look-icon" v-if="!showNewPassword"
					@click.stop="showNewPassword = true"></image>
				<image src="/static/images//icons/look.png" mode="widthFix" class="look-icon"
					@click.stop="showNewPassword = false" v-else></image>
			</view>
			<!-- 密码错误提示 -->
			<text class="pwd-error" v-if="pwdErrorMsg">{{pwdErrorMsg}}</text>
		</view>

		<!-- 确认密码输入区域 -->
		<view class="surePassword">
			<view class="password-text">确认密码</view>
			<view class="input-item">
				<input type="text" v-model="surePassword" placeholder="请输入密码" maxlength="20"
					:password="!showSurePassword" class="input-text" @input="checkPwdError" />
				<image src="/static/images/icons/noLook.png" mode="widthFix" class="look-icon" v-if="!showSurePassword"
					@click.stop="showSurePassword = true"></image>
				<image src="/static/images//icons/look.png" mode="widthFix" class="look-icon"
					@click.stop="showSurePassword = false" v-else></image>
			</view>
			<!-- 两次密码不一致提示 -->
			<text class="pwd-error"
				v-if="!pwdErrorMsg && newPassword && surePassword && newPassword !== surePassword">两次输入的密码不一致</text>
		</view>

		<!-- 确认按钮 -->
		<view class="select-serve-footer">
			<view class="select-serve-footer__btn" :class="{active: canSubmit}" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request';

	export default {
		data() {
			return {
				showNewPassword: false,
				newPassword: "",
				showSurePassword: false,
				surePassword: "",
				pwdErrorMsg: "", // 密码错误提示信息
				phone: uni.getStorageSync('loginAccount') // 登录账号/手机号（从全局缓存或路由参数获取）
			}
		},
		computed: {
			// 判断是否可提交：密码合法 + 两次密码一致 + 均有值
			canSubmit() {
				return !this.pwdErrorMsg && this.newPassword && this.surePassword && this.newPassword === this
				.surePassword;
			}
		},
		onLoad() {
			// 获取登录账号/手机号（从缓存中获取，需与登录页的存储逻辑一致）
			this.phone = uni.getStorageSync('loginAccount') || '';
			// 若从路由参数传递，可使用：this.phone = this.$route.query.phone || '';
		},
		methods: {
			/**
			 * 密码校验总函数
			 * @param {String} pwd - 待校验的密码
			 * @returns {Object} { valid: 布尔值, msg: 错误提示 }
			 */
			validatePassword(pwd) {
				// 1. 长度校验：6-20位
				if (pwd.length < 6 || pwd.length > 20) {
					return {
						valid: false,
						msg: '密码长度需在6-20位之间'
					};
				}

				// 修复后的禁用字符正则：
				// 去掉易兼容出错的\p{Emoji}，改用具体的Emoji Unicode范围
				// 匹配：空格(\s)、中文(\u4e00-\u9fa5)、全角字符(\uFF00-\uFFEF)、常见Emoji(\u{1F600}-\u{1F64F}等)
				const forbiddenReg =
					/[\s\u4e00-\u9fa5\uFF00-\uFFEF\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}]/gu;
				if (forbiddenReg.test(pwd)) {
					return {
						valid: false,
						msg: '密码不可包含空格、中文或特殊表情'
					};
				}


				// 3. // 正则说明：
				// (?=.*[A-Za-z])：必须包含至少一个字母
				// (?=.*\d)：必须包含至少一个数字
				// [\w\W]{6,20}：匹配任意字符（字母、数字、符号、中文等），长度6-20位
				// 若想限制仅允许常见符号（排除中文），可改用：/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d!@#$%^&*()_+\-=\[\]{}|;':",./<>?]{6,20}$/
				const reg = /^(?=.*[A-Za-z])(?=.*\d)[\w\W]{6,20}$/;
				if (!reg.test(pwd)) {
					return {
						valid: false,
						msg: '密码需包含数字+字母/符号组合'
					};
				}

				// 4. 禁止包含手机号/账号
				if (this.phone && pwd.includes(this.phone)) {
					return {
						valid: false,
						msg: '密码不可包含账号/手机号，存在安全风险'
					};
				}

				// 所有校验通过
				return {
					valid: true,
					msg: ''
				};
			},

			/**
			 * 实时检查密码错误
			 */
			checkPwdError() {
				if (!this.newPassword) {
					this.pwdErrorMsg = '';
					return;
				}
				const {
					valid,
					msg
				} = this.validatePassword(this.newPassword);
				this.pwdErrorMsg = valid ? '' : msg;
			},
			
			

			/**
			 * 提交设置密码
			 */
			submit() {
				let that = this;

				// 1. 再次校验密码（防止实时校验被绕过）
				const {
					valid,
					msg
				} = this.validatePassword(this.newPassword);
				if (!valid) {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return;
				}

				// 2. 校验两次密码是否一致
				if (this.newPassword !== this.surePassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}

				// 3. 调用设置密码接口（注意：原接口是sendcode，需替换为实际的设置密码接口）
				request.post('/sj/passwordSet', { // 建议替换为实际接口名
					account: that.phone,
					password: that.surePassword
				}).then(result => {
					if (result.code == 200) {
						uni.showToast({
							title: '密码设置成功',
							icon: 'success'
						});
						// 密码设置成功后返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.editPassword {
		background-image: url("/static/images/background/editPassword.png");
		background-position: top;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #fff;
		min-height: 100vh;
		padding: 0 60rpx;
		position: relative; // 为底部固定按钮做兼容

		.password-title {
			margin-top: 82rpx;
			font-weight: 500;
			font-size: 46rpx;
			color: #333333;
			line-height: 65rpx;
			text-align: left;
			font-style: normal;
		}

		.password-tip {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #666;
			line-height: 40rpx;
		}

		.newPassword,
		.surePassword {
			margin-top: 100rpx;
		}

		.surePassword {
			margin-top: 40rpx;
		}

		.password-text {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			text-align: left;
			font-style: normal;
		}

		.input-item {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 630rpx;
			height: 98rpx;
			background: #F5F5F5;
			border-radius: 49rpx;
			padding: 28rpx 24rpx 28rpx 30rpx;
			margin-bottom: 10rpx; // 减少底部间距，给错误提示留空间
			position: relative;
			margin-top: 19rpx;

			.look-icon {
				width: 37rpx;
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}

			.input-text {
				flex: 1;
				font-size: 30rpx;
				height: 40rpx;
				color: #333;
			}
		}

		// 密码错误提示样式
		.pwd-error {
			display: block;
			font-size: 24rpx;
			color: #FF4767;
			margin-left: 30rpx;
			margin-top: 10rpx;
			line-height: 1.2;
		}

		.select-serve-footer {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 40rpx 60rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); // 增加阴影提升质感

			&__btn {
				width: 630rpx;
				height: 98rpx;
				background: rgba(232, 16, 30, 0.4);
				border-radius: 798rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				line-height: 39rpx;
				text-align: center;
				font-style: normal;
				transition: background-color 0.2s ease; // 增加过渡动画
			}

			.active {
				background: #FF4767;

				&:active {
					opacity: 0.9; // 点击反馈
				}
			}
		}
	}
</style>