<template>
	<view class="amms-page">
		<cu-custom>
			<block v-slot:content>修改密码</block>
		</cu-custom>
		<scroll-view class="con padding" scroll-y="true">
			<view>
				<text class="main-sub-color font24">登录名</text>
				<text class="margin-left-sm font28 text-bold">{{ personInfo.username }}</text>
			</view>
			<view class="margin-top-sm">
				<text class="main-sub-color font24">账户ID</text>
				<text class="margin-left-sm font28 text-bold">{{ personInfo.userId }}</text>
			</view>
			<view class="cu-form-group border-ddd border-rad margin-top-sm">
				<view class="title">原密码</view>
				<input type="text" v-model="personInfo.oldPassword" placeholder="请输入原密码"
					placeholder-class="text-right main-sub-color" class="text-right" :password="true" />
			</view>
			<view class="cu-form-group border-ddd border-rad margin-top-sm">
				<view class="title">新密码</view>
				<input type="text" v-model="personInfo.newPassword" placeholder="请输入新密码"
					placeholder-class="text-right main-sub-color" class="text-right" :password="true" />
			</view>
			<view class="cu-form-group border-ddd border-rad margin-top-sm">
				<view class="title">确认密码</view>
				<input type="text" v-model="personInfo.confirmPassword" placeholder="请输入确认密码"
					placeholder-class="text-right main-sub-color" class="text-right" :password="true" />
			</view>
			<view class="margin-top-sm modal-tip">
				<image :src="infoImg" class="i-warn"></image>
				<text class="modal-text text-left margin-left-sm">密码必须包含数字、字母大小写、特殊字符等非连续性数字字母组合，长度至少8位。</text>
			</view>
			<view class="response margin-top"><button class="main-button" @tap="editPassword">保存</button></view>
			<view class="response margin-top-sm"><button class="main-button-kong" @tap="forgetPassword">忘记原密码？</button>
			</view>
		</scroll-view>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script setup lang="ts">
	import { request } from '@/utils/request';
	import { ref, getCurrentInstance, onMounted } from 'vue';
	import i_info from '@/static/img/tyshqs/i-info.png';

	const { proxy } = getCurrentInstance();
	const personInfo = ref({
		username: '',
		userId: '',
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	});
	const infoImg = ref(i_info);

	onMounted(() => {
		personInfo.value.username = uni.getStorageSync('username');
		personInfo.value.userId = uni.getStorageSync('userid');
	})

	// 检查输入
	function checkInput() {
		let txt = '';
		if (!personInfo.value.oldPassword) {
			txt = '请输入旧密码';
		} else if (!personInfo.value.newPassword) {
			txt = '请输入新密码';
		} else if (!personInfo.value.confirmPassword) {
			txt = '请输入确认密码';
		} else if (personInfo.value.oldPassword == personInfo.value.newPassword) {
			txt = '新密码与旧密码一样';
		} else if (personInfo.value.confirmPassword != personInfo.value.newPassword) {
			txt = '确认密码与新密码不一样';
		}
		var filter = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,}$/;
		let blnTest = filter.test(personInfo.value.newPassword)
		if (!blnTest) {
			txt = '密码必须包含数字、字母大小写、特殊字符等非连续性数字字母组合，长度至少8位。'
		}
		if (!!txt) {
			uni.showToast({
				title: txt,
				icon: 'none',
				duration: 3000
			});
			return false;
		}
		return true;
	}
	// 修改密码
	function editPassword() {
		if (!checkInput()) {
			return;
		}
		proxy.$refs.loading.open();
		let requestData = {
			username: personInfo.value.username,
			password: personInfo.value.oldPassword,
			newpassword1: personInfo.value.newPassword,
			newpassword2: personInfo.value.confirmPassword
		};
		request({
			url: 'updateUserInfo',
			method: 'put',
			data: requestData
		})
			.then((res : any) => {
				proxy.$refs.loading.close();
				if (res.code == 0 && res.data == true) {
					uni.showToast({
						title: '修改密码成功，请重新登录',
						icon: 'success'
					});
					// 页面跳转
					setTimeout(function () {
						uni.navigateTo({
							url: '/pages/login/index'
						});
					}, 2000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			})
			.catch((err : any) => {
				proxy.$refs.loading.close();
			});
	}
	// 忘记密码
	function forgetPassword() {
		uni.showToast({
			title: '请联系管理员找回密码。',
			icon: 'none',
			duration: 2000
		});
	}
</script>

<style lang="less" scoped>
	.con {
		.modal-text {
			text-align: left;
		}

		.i-warn {
			width: 36rpx;
			height: 36rpx;
			vertical-align: middle;
		}

		.modal-second-text {
			margin-left: 60rpx;
		}
	}
</style>