<template>
    <div class="container">
        <el-form
            label-position="right"
            label-width="auto"
            :model="formLabelAlign"
            style="max-width: 600px"
            ref="ruleFormRef"
            :rules="rules"
        >
            <el-form-item label="原密码" prop="oldpwd">
                <el-input v-model="formLabelAlign.oldpwd" maxlength="25"/>
            </el-form-item>
            <el-form-item label="新密码" prop="newpwd">
              <el-input v-model="formLabelAlign.newpwd" maxlength="25"/>
            </el-form-item>
            <el-form-item label="确认新密码" prop="okpwd">
              <el-input v-model="formLabelAlign.okpwd" maxlength="25"/>
            </el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>

        </el-form>
    </div>

</template>

<script setup>
import { ref ,getCurrentInstance} from 'vue'
import {
    editPayPassword
} from "@/api/account";

const { proxy } = getCurrentInstance();

const formLabelAlign = ref({
  oldpwd: '',
  newpwd: '',
  okpwd: ''
})
const rules = ref({
    oldpwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
    newpwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
    okpwd: [{ required: true, message: "请再次输入新密码", trigger: "blur" },
            { validator: isPassword, trigger: 'blur' }],
})
//校验两次密码是否一致
function isPassword (rule, value, callback) {
  if (value != formLabelAlign.value.newpwd) {
    callback(new Error("两次密码请输入一致"));
  } else {
    callback();
  }
};


function resetForm(){
    proxy.$refs.ruleFormRef.resetFields();
}
const submitForm = () => {
    proxy.$refs.ruleFormRef.validate((valid) => {
        if (!valid) return;
        editPayPassword({oldPassword:formLabelAlign.value.oldpwd,password:formLabelAlign.value.newpwd}).then(response => {
            if (response.code == 'normal_002') {
                proxy.$modal.msgSuccess("密码修改成功，下次请使用新密码登录。");
                resetForm();
            } else {
                proxy.$modal.msgError(response.code);
                return;
            }
          
        });
    })
}
</script>
<style lang="scss" scoped>
.el-form{
    margin: 20px auto;
}
</style>