<template>
	<el-form class="resetPwd-content-form" ref="resetPwdRef" :model="state.ruleForm" :rules="rules" label-position="top" label-width="100px">
		<p class="currentAccount">
			账号 <span>{{ userName }}</span>
		</p>
		<el-form-item prop="newPassword" label="新密码">
			<el-input
				class="inputDeep"
				clearable
				type="password"
				show-password
				placeholder="请填写新密码"
				v-model="state.ruleForm.newPassword"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon">
						<ele-Unlock />
					</el-icon>
				</template>
			</el-input>
			<div class="intensity">
				<span class="psdText">密码强度：{{ modes === 1 ? '弱' : modes === 2 ? '中' : modes === 3 ? '强' : '' }}</span>
				<span class="line ruo" :class="modes === 1 ? 'low' : ''"></span>
				<span class="line zhong" :class="modes === 2 ? 'middle' : ''"></span>
				<span class="line qiang" :class="modes === 3 ? 'high' : ''"></span>
			</div>
		</el-form-item>
		<el-form-item prop="confirmPassword" label="确认密码">
			<el-input
				class="inputDeep"
				clearable
				type="password"
				show-password
				placeholder="请再次填写密码"
				v-model="state.ruleForm.confirmPassword"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon">
						<ele-Unlock />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-button type="primary" class="resetPwd-content-submit" @click="onChangeConfirm(resetPwdRef)" :loading="state.loading">确认修改</el-button>
		<div class="font12 mt10 resetPwd-msg">提示：密码不得少于8位数，且必须包含数字、字母大小写和特殊字符</div>
	</el-form>
</template>

<script setup lang="ts" name="resetPwdComponent">
import { reactive, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { Cookie, Session } from '@/utils/storage';
import type { FormInstance } from 'element-plus';
import { changeDefaultPwd } from '@/api/login/user';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';
// 修改密码参数类型
interface ResetPwdState {
	newPassword: string;
	confirmPassword: string;
}
// 定义变量
const router = useRouter();
const state = reactive({
	ruleForm: <ResetPwdState>{
		newPassword: '',
		confirmPassword: '',
	},
	loading: false,
});
const resetPwdRef = ref<FormInstance>();
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const userName = computed(() => {
	return userInfos.value.name;
});
// 确认重置
const onChangeConfirm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		changeDefaultPwd(state.ruleForm)
			.then(async () => {
				//
				// 清楚缓存
				Session.clear();
				Cookie.clear();
				await router.push('/');
				ElNotification({
					title: '成功',
					type: 'success',
					message: '密码重置成功，请重新登录',
				});
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
//  检查密码强度
let modes = ref<number>(0);
const checkPassword = (rule: any, value: string, callback: any) => {
	if (!value) {
		modes.value = 0;
		return callback('新密码不能为空');
	}
	if (value.length < 8) {
		modes.value = 0;
		return callback('新密码不少于8位');
	}
	/*
    最短8位， {6,}
    可以包含小写大母 [a-z] 和大写字母 [A-Z]
    可以包含数字 [0-9]
    可以包含下划线 [ _ ] 和减号 [ - ]
  */
	if (/^[\w_-]{6,}$/.test(state.ruleForm.newPassword)) {
		modes.value = 1;
	}
	/*
    最短8位， {8,}
    必须包含1个数字
    必须包含1个小写字母
    必须包含1个大写字母
    必须包含1个特殊字符
  */
	if (/^\S*(?=\S{8,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*.?])\S*$/.test(state.ruleForm.newPassword)) modes.value = 2; //中等
	/*
    最短8位， {8,}
    必须包含1个数字
    必须包含1个小写字母
    必须包含1个大写字母
    必须包含2个特殊字符
  */
	if (/^\S*(?=\S{8,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*.?]{2,})\S*$/.test(state.ruleForm.newPassword)) modes.value = 3; //强密码
	if (modes.value == 0 || modes.value == 1) {
		return callback('提示：密码不得少于8位数，且必须包含字母大小写和特殊字符'); //弱密码
	}
	return callback();
};
// 检查填写密码是否一致
const checkConfirmPassword = (rule: any, value: any, callback: any) => {
	if (!value) {
		return callback('请再次填写密码');
	}
	if (value != state.ruleForm.newPassword) {
		return callback('两次密码填写不一致，请重新填写');
	}
	return callback();
};
const rules = reactive({
	newPassword: [{ required: true, validator: checkPassword, trigger: ['change', 'blur'] }],
	confirmPassword: [{ required: true, validator: checkConfirmPassword, trigger: 'blur' }],
});
</script>

<style scoped lang="scss">
.resetPwd-content-form {
	.currentAccount {
		margin: 20px 0 20px 0;
		font-size: var(--el-form-label-font-size);
		color: var(--el-text-color-regular);

		span {
			padding-left: 20px;
		}
	}
	.resetPwd-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;

		&:hover {
			color: #909399;
		}
	}

	.resetPwd-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}

	.resetPwd-content-submit {
		width: 100%;
		font-weight: 300;
		height: 40px;
		margin-top: 20px;
	}

	.resetPwd-msg {
		color: var(--el-text-color-placeholder);
	}

	.intensity {
		.psdText {
			font-size: 14px;
			margin-right: 10px;
			color: #5a5a5a;
		}

		.line {
			display: inline-block;
			width: 48px;
			height: 10px;
			background: #d8d8d8;
			margin-right: 2px;

			&.ruo {
				border-radius: 6px 0 0 6px;
			}

			&.low {
				background: #bfcdff;
			}

			&.middle {
				background: #93a6fa;
			}

			&.high {
				background: #3c50e0;
			}

			&.qiang {
				border-radius: 0 6px 6px 0;
			}
		}

		.level {
			margin: 0 16px 0 8px;
		}
	}
}
</style>
