<template>
	<div>
		<el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="350px" height="500px"
			align-center title="修改密码">
			<el-form :model="user" label-width="80px" label-position="right" ref="ruleFormRef" :rules="rules">
				<el-form-item label="原密码" prop="passwordOld">
					<el-input v-model="passwordOld" style="width: 200px;" type="password"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="passwordNew">
					<el-input v-model="passwordNew" style="width: 200px;" type="password"></el-input>
				</el-form-item>
				<el-form-item v-if="passwordNew !== '' && passwordNew !== undefined" label="" align="center"
					style="height: 25px;">
					<!-- 展示长度条 -->
					<div class="bar" v-if="passwordNew !== '' && passwordNew !== undefined"
						:style="{ background: barColor, width: width + '%' }">
						<!-- 展示文字 -->
						<div class="strength" :style="{ color: barColor }"
							v-if="passwordNew !== '' && passwordNew !== undefined">
							{{ strength }}
						</div>
					</div>
				</el-form-item>
				<el-form-item label="确认密码" prop="passwordConfirm">
					<el-input v-model="passwordConfirm" style="width: 200px;" type="password"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button type="danger" @click="()=>dialogVisible=false">取消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>


<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		defineProps,
		defineEmits
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	const props = defineProps({
		password: {
			type: String,
			default: ''
		}
	})
	const user = ref({})
	const dialogVisible = ref(false)

	const open = () => {
		dialogVisible.value = true
	}
	const close = () => {
		dialogVisible.value = false
	}

	import {
		checkPasswordRule,
		level
	} from '@/tools/CheckPassword'
	// 强度条颜色
	const barColor = ref('')
	// 强度条长度
	const width = ref('')
	// 强度条说明
	const strength = ref('')
	const passwordOld = ref('')
	const passwordNew = ref('')
	const passwordConfirm = ref('')

	const validatePassNew = (rule, value, callback) => {
		if (passwordNew.value === '') {
			callback(new Error('请输入8-32位密码,数字、小写字母、大写字母、特殊字符，至少包含三种'))
		} else {
			const res = level(passwordNew.value);
			if (res == '非常弱') {
				barColor.value = 'red';
				width.value = '20';
				strength.value = '非常弱';
			} else if (res == '弱') {
				barColor.value = '#ee795c';
				width.value = '40';
				strength.value = '弱';
			} else if (res == '一般') {
				barColor.value = 'orange';
				width.value = '60';
				strength.value = '一般';
			} else if (res == '强') {
				barColor.value = 'green';
				width.value = '80';
				strength.value = '强';
			} else if (res == '非常强') {
				barColor.value = '#1B8EF8';
				width.value = '100';
				strength.value = '非常强';
			}
			//暂时不校验规则 正式上线后需要放开
			if (passwordOld.value == passwordNew.value) {
				callback(new Error('新密码不能与旧密码相同'))
				return
			}
			const username = localStorage.getItem('userName')
			const re = checkPasswordRule(passwordNew.value,username)
			if (re != '校验通过') {
				callback(new Error(re))
				return
			}

			callback()
		}
	}

	const validatePassConfirm = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请再次输入密码!'))
		} else {
			if (passwordConfirm.value !== passwordNew.value) {
				callback(new Error("两次输入密码不一致!"))
			} else {
				callback()
			}
		}
	}


	const rules = reactive({
		passwordNew: [{
			validator: validatePassNew,
			trigger: 'change' | 'blur'
		}],
		passwordConfirm: [{
			validator: validatePassConfirm,
			trigger: 'change' | 'blur'
		}]
	})

	const ruleFormRef = ref()
	const handleSave = (ruleFormRef) => {
		ruleFormRef.validate((valid, fields) => {
			if (valid) {
				var password = {
					alsk: passwordOld.value,
					djfh: passwordNew.value
				}
				var url = 'framework/SysUser/modifyPassword'
				var param = {
					json: JSON.stringify(password)
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == '0') {
						ElMessage.success('修改成功！')
						passwordOld.value = ''
						passwordNew.value = ''
						passwordConfirm.value = ''
						close()
					} else {
						ElMessage.error('操作失败！' + response.data.msg)
					}
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}




	defineExpose({
		open,
		close
	})
</script>

<style>
	.strength {
		font-size: 13px;
		color: #271E25;
		position: relative;
		top: 0px;
		left: 0;
		transition: 0.5s all ease;
	}

	.bar {
		/* width: 400px; */
		height: 3px;
		background: red;
		transition: 0.5s all ease;
		max-width: 200px;
		margin: 0px 2px 2px 2px;
		position: absolute;
	}
</style>