<template>
    <el-alert title="为了安全起见，请先设置您的登录密码" type="warning" show-icon :closable="false">
    </el-alert>
    <el-form ref="resetPwdformRef" :rules="rules" :model="form" label-width="120px" style="margin-top:20px">
        <el-form-item label="原密码" prop="password" style='width:50%'>
            <el-input type='password' v-model="form.password" placeholder="请输入现在使用的密码" @input="getPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass" style='width:50%'>
            <el-input type='password' v-model="form.newPass" placeholder="请输入新密码，须包含字母+数字且长度大于8位"
                @input="getNPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassAgain" style='width:50%'>
            <el-input type='password' v-model="form.newPassAgain" placeholder="请再次输入新密码"
                @input="getNPasswordA"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">确认修改</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { updateUserPwd } from "@/api/system/user";
import type { ResetPwdForm } from "@/api/system/user/types";
import { getToken, removeToken, setToken } from '@/utils/auth';
// import {encryption} from '@/utils/JSEncryptTem'
import { encrypt } from "@/utils/jsencrypt";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pwdRef = ref<ElFormInstance>();
const router = useRouter()
const form = ref<ResetPwdForm>({
    password: '',
    newPass: '',
    newPassAgain: ''
});


const getPassword = (data: string) => {
    form.value.password = data.replace(/\s+/g, '')
}
const getNPassword = (data: string) => {
    form.value.newPass = data.replace(/\s+/g, '')
}
const getNPasswordA = (data: string) => {
    form.value.newPassAgain = data.replace(/\s+/g, '')
}
const resetForm = () => {
    resetPwdformRef.value.resetFields();
}

const equalToPassword = (rule: any, value: string, callback: any) => {
    if (form.value.newPass !== value) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};
var validatePass1 = (rule, value, callback) => {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\W]{8,}$/;
    if (value === '') {
        callback(new Error('请输入新密码'));
    } else if (!reg.test(value)) {
        callback(new Error('密码须包含字母+数字且长度大于8位!'));
    } else {
        callback();
    }
};
var validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入新密码'));
    } else if (value !== form.value.newPass) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};
const rules = ref<ElFormRules>({
    password: [
        { required: true, message: '请输入现在使用的密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ],
    newPass: [
        { required: true, validator: validatePass1, trigger: 'blur' },
    ],
    newPassAgain: [
        { required: true, validator: validatePass2, trigger: 'blur' },
    ],
});
const resetPwdformRef = ref<ElFormInstance>();

const submitForm = () => {
    resetPwdformRef.value?.validate(async (valid) => {
        if (valid) {
            form.value.password = encrypt(form.value.password) as string
            form.value.newPass = encrypt(form.value.newPass) as string
            form.value.newPassAgain = encrypt(form.value.newPassAgain) as string
            await updateUserPwd(form.value)
            removeToken()
            localStorage.clear()
            proxy?.$modal.msgSuccess("修改成功");
            router.push({ path: '/login' })

        } else {
        }
    });
}

// /** 提交按钮 */
// const submit = () => {
//   pwdRef.value?.validate(async (valid: boolean) => {
//     if (valid) {
//       await updateUserPwd(form.value.password, form.value.newPass);
//       proxy?.$modal.msgSuccess("修改成功");
//     }
//   });
// };
/** 关闭按钮 */
const close = () => {
    proxy?.$tab.closePage();
};
</script>
