<template>
    <el-dialog v-model="visible" title="修改密码" width="680px">
        <el-form ref="userRef" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="原密码" prop="oldPassword">
                        <el-input v-model="form.oldPassword" type="password" show-password placeholder="请输入原密码" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次确认密码" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import CryptoJS from "crypto-js";
import { useUserStore } from "@/store/user";
import { passwordChange } from "@/api/login";

const userRef = ref();
const visible = ref(false);
const form = ref({
    username: null,
    oldPassword: null,
    newPassword: null,
    confirmPassword: null
})

const rules = reactive({
    username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
    oldPassword: [{ required: true, trigger: "blur", message: "旧密码不能为空" }],
    newPassword: [
        { required: true, trigger: "blur", message: "新密码不能为空" },
        {
            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
            trigger: "blur",
            message: "新密码必须至少8位，且必须包含大小写字母、数字和特殊符号"
        }
    ],
    confirmPassword: [
        { required: true, trigger: "blur", message: "请在此输入新密码" },
        {   trigger: "blur", validator: (rule, value, callback) => {
                if (value !== form.value.newPassword) return callback(new Error("两次输入的密码不一致"))
                callback()
            }
        }
    ]
})

const open = () => {
    visible.value = true;
}

function submitForm() {
    userRef.value.validate(valid => {
        if (valid) {
            passwordChange({
                userName: form.value.username,
                oldPassword: CryptoJS.MD5(form.value.oldPassword).toString(),
                newPassword: CryptoJS.MD5(form.value.newPassword).toString(),
                enterPassword: CryptoJS.MD5(form.value.confirmPassword).toString()
            }).then(res => {
                if (res.success) {
                    ElMessage.success("修改成功，请重新登录！");
                    visible.value = false;
                }
            });
        } else {
            return false;
        }
    })
}

function cancel() {
    visible.value = false;
    form.value = {
        username: null,
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
    }
}

defineExpose({
    open
})
</script>

<style lang='scss' scoped>
.el-form .el-form-item .el-input :deep(.el-input__inner) {
  box-shadow: 0 0 1000px #fff inset;
}
</style>