<template>
    <div class="main bg-white-grey pl-25px pt-30px pr-35px h-640px rounded-10px relative">
        <div class="flex items-center justify-between">
            <h3 class="nav-title">用户密码重置</h3>
            <div class="btnDiv">
                <el-button size="large" @click="routerBack" class="w-100px">返回
                </el-button>
            </div>
        </div>

        <div class="form-box">
            <h3 class="mb-20px text-14px">密码要求：字母数字结合，最少设置8个字符，包含字母大小写
                和数字特殊符号</h3>
            <el-form :model="form" label-position="top" ref="formRef" :rules="rules">
                <el-form-item label="新密码" prop="new_pwd">
                    <el-input type="password" v-model="form.new_pwd" placeholder="请输入新密码"/>
                </el-form-item>
                <el-form-item label="确认新密码" prop="new_r_pwd">
                    <el-input type="password" v-model="form.new_r_pwd" placeholder="请再次输入新密码码"/>
                </el-form-item>
            </el-form>

            <div class="mt-70px btnDiv text-center">
                <el-button size="large" @click="submitForm" v-loading.fullscreen.lock="loading" class="w-160px">确定
                </el-button>
            </div>
        </div>


    </div>
</template>

<script setup>
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const routerBack = () => {
    window.location.href = 'https://www.txhlwxx.com/'
};
let loading = $ref(false)
let formRef = $ref();
let form = $ref({
    new_pwd: '',
    new_r_pwd: ''
})
let reset_pwd = $ref({})
const rules = {
    new_pwd: [
        {required: true, message: "请输入新密码", trigger: "blur"},
        // 字母数字结合，最少设置8个字符，包含字母大小写 和数字特殊符号（所有密码通用设置）
        {
            validator: (rule, value, callback) => {
                if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,20}$/.test(value))
                    callback(new Error('密码必须包含大小写字母和数字'))
                else
                    callback()
            },
            trigger: 'blur'
        }
    ],
    new_r_pwd: [
        {required: true, message: "请再次输入新密码", trigger: "blur"},
        {
            validator: (rule, value, callback) => {
                if (value !== form.new_pwd)
                    callback(new Error('两次输入密码不一致!'))
                else
                    callback()
            },
            trigger: 'blur',
        },
    ]
}
if(localStorage.getItem('reset_pwd')) {
    reset_pwd = JSON.parse(localStorage.getItem('reset_pwd'));
} else {
    router.push({name:'reset_auth'});
}
function submitForm() {
    formRef.validate().then(res => {
        if (res === true) {
            loading = true
            const submitData = {
                user_name: reset_pwd.user_name,
                user_realname: reset_pwd.user_realname,
                user_password:form.new_pwd
            }
            request({
                url: '/user/main/reset_user_password',
                data: {
                    token:'',
                    user_main: submitData,
                    client:'pc'
                }
            }).then(res => {
                loading = false;
                if (res.code === '1') {
                    ElMessage({
                        message: '密码重置成功！',
                        type: 'success',
                        duration:'1500',
                        onClose: function(){
                            localStorage.removeItem('reset_pwd');
                            window.location.href = 'https://www.txhlwxx.com/';
                        }
                    });

                }
            })
        }
    })
}
</script>

<style lang="scss" scoped>
$color: #1259a1;
.main {
	box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.bg-white-grey {
	background: #fcfeff;
}

.nav-title {
	font-size: 18px;
	color: $color;
}

.btnDiv {
	.el-button {
		background: $color;
		border-color: $color;
		color: #fff;
	}
}
</style>
<style lang="scss">
.form-box {
	width: 520px;
	margin: 25px auto;

	.el-form {
		.el-form-item {
			&.is-required {
				.el-form-item__label {
					&::before {
						display: none;
					}

					&::after {
						content: "*";
						color: #f35421;
						margin-left: 4px;
					}
				}
			}

			.el-form-item__label {
				color: #949494;
				font-size: 14px;
				position: relative;
			}

			.el-form-item__content {
				.el-select {
					width: 100%;
				}

				.el-input {
					width: 100%;

					.el-input__wrapper {
						width: 100%;
						box-shadow: none;
						background: #f9f9f9;
						border-radius: 6px;
					}
				}

				.el-textarea {
					.el-textarea__inner {
						box-shadow: none;
						background: #f9f9f9;
						border-radius: 6px;
						// color: #d0d0d0;
					}
				}

				.el-date-editor {
					box-shadow: none;
					background: #f9f9f9;
					border-radius: 6px;
				}

				.el-checkbox.read {
					.el-checkbox__inner {
						border-radius: 50%;
					}
				}

				.el-input__inner {
					// color: #d0d0d0;
				}
			}
		}

	}
}
</style>