<template>
  <SysDialog
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="rules"
        label-width="80px"
        style="padding: 13px 15px 0 0;"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            autocomplete="off"
            show-password
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            autocomplete="off"
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { ref, reactive, unref } from "vue";
import { UpdatePasswordDto } from "@/api/user/UserModel";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";

const emit = defineEmits(["confirmPassword"]);
// 弹框一些配置
const getBindValue = reactive({
  top: "13vh",
  title: "修改密码",
  width: 420,
  height: 0,
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 表单ref
const passwordFormRef = ref<FormInstance>();
// 原密码自定义校验
const validatePassOld = (rule, value, callback: Fn) => {
  if (value === "") {
    callback(new Error("请输入原密码"));
  } else {
    if (passwordForm.newPassword !== "") {
      if (!passwordFormRef.value) return;
      passwordFormRef.value.validateField("newPassword", () => null);
    }
    callback();
  }
};
// 新密码自定义校验
const validatePassNews = (rule, value, callback: Fn) => {
  if (value === "") {
    callback(new Error("请输入新密码"));
  } else if (value === passwordForm.oldPassword) {
    callback(new Error("新密码不能与原密码相同"));
  } else {
    callback();
  }
};
// 参数
const passwordForm = reactive<UpdatePasswordDto>({
    id: 0,
    oldPassword: '',
    newPassword: '',
});
const rules = reactive({
    oldPassword: [{ validator: validatePassOld, trigger: "blur", required: true }],
    newPassword: [{ validator: validatePassNews, trigger: "blur", required: true }],
});

const { formValidate, resetForm } = useEleFormValidate()
// 显示、隐藏
const show = (id) => {
    passwordForm.id = id
    onShow()
}
const onclose = () => {
    resetForm(unref(passwordFormRef))
    passwordForm.id = 0
    onClose()
}
// 提交
const onconfirm = async () => {
    const isValidate = await formValidate(unref(passwordFormRef))
    if (!isValidate) return;
    setLoading(true)
    emit("confirmPassword", unref(passwordForm), onclose, setLoading)
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>