<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable append-to-body>
    <el-form ref="formRef" :model="formParam" :rules="rules" label-width="80px">
      <el-form-item label="旧密码">
        <el-input v-model="formParam.oldpassword" type="password" @keydown.enter="confirm"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newpassword">
        <el-input v-model="formParam.newpassword" type="password" show-password @keydown.enter="confirm"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="formParam.confirmPassword"
          type="password"
          :loading="loading"
          show-password
          @keydown.enter="confirm"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/stores/modules/user";
import { resetUserPassWord } from "@/api/modules/user";
import { ElMessage, ElNotification } from "element-plus";

const { t } = useI18n();
const userStore = useUserStore();
const formRef = ref();
const loading = ref(false);
const emits = defineEmits(["success"]);

const formParam = ref({
  oldpassword: "",
  newpassword: "",
  confirmPassword: ""
});

const rules = {
  // oldpassword: [{ required: true, message: t("business.tips.password.old"), trigger: "blur" }],
  // newpassword: [{ required: true, message: t("business.tips.password.empty"), trigger: "blur" }],
  confirmPassword: [
    // { required: true, message: t("business.tips.password.confirm"), trigger: "blur" },
    {
      validator: (rule: any, value: string) => {
        if (value !== formParam.value.newpassword) {
          return new Error(t("business.tips.password.error"));
        }
        return true;
      },
      trigger: "blur"
    }
  ]
};

const confirm = () => {
  formRef.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      let params = {
        account: userStore.currentAccount,
        userid: userStore.userInfo.usercode ?? "",
        oldpassword: formParam.value.oldpassword,
        newpassword: formParam.value.newpassword
      };
      try {
        await resetUserPassWord(params);
        ElNotification({
          title: t("business.tips.password.success"),
          message: t("business.tips.password.successTip"),
          type: "success"
        });
        dialogVisible.value = false;
        emits("success");
      } catch (error) {
        ElNotification({
          title: t("business.tips.password.fail"),
          message: t("sys.api.operationFailed"),
          type: "error"
        });
      }
      // await resetUserPassWord(params).then((res: any) => {
      //   loading.value = false;
      //   if (res) {
      //     ElNotification({
      //       title: t("sys.api.operationSuccess"),
      //       message: t("business.tips.password.success"),
      //       type: "success"
      //     });
      //     dialogVisible.value = false;
      //     emits("success");
      //   } else {

      //   }
      // }).catch(() => {
      // });
    } else {
      console.log("fields :>> ", fields);
      for (const key in fields) {
        fields[key].map((item: any) => {
          ElMessage.error(item.message);
        });
      }
    }
  });
};

const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
