<template>
  <div class="page">
    <el-card shadow="never">
      <template #header
        ><span class="title">{{ $t("password.title") }}</span></template
      >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        style="max-width: 480px"
      >
        <el-form-item :label="$t('password.oldPassword')" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item :label="$t('password.newPassword')" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item
          :label="$t('password.confirmPassword')"
          prop="confirmPassword"
        >
          <el-input
            v-model="form.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submit">{{
            $t("password.submit")
          }}</el-button>
          <el-button @click="onCancel">{{ $t("password.cancel") }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { changeMyPassword } from "@/service/modular/admin";

const { t } = useI18n();
const router = useRouter();
const formRef = ref();
const submitting = ref(false);
const form = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const rules = {
  oldPassword: [
    {
      required: true,
      message: () => t("password.pleaseInputOld"),
      trigger: "blur",
    },
  ],
  newPassword: [
    {
      required: true,
      message: () => t("password.pleaseInputNew"),
      trigger: "blur",
    },
    { min: 6, message: () => t("password.passwordTooShort"), trigger: "blur" },
  ],
  confirmPassword: [
    {
      required: true,
      message: () => t("password.pleaseInputConfirm"),
      trigger: "blur",
    },
    {
      validator: (_, val, cb) =>
        val === form.newPassword
          ? cb()
          : cb(new Error(t("password.passwordMismatch"))),
      trigger: "blur",
    },
  ],
};

const submit = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    submitting.value = true;
    try {
      const res = await changeMyPassword({
        oldPassword: form.oldPassword,
        newPassword: form.newPassword,
      });
      const status = res.code;
      console.log(res);
      if (status === 200) {
        ElMessage.success(t("password.success"));
        setTimeout(() => {
          router.replace("/login");
        }, 1000);
      }
    } catch (err) {
      console.log(err?.message || t("common.failed"));
    } finally {
      submitting.value = false;
    }
  });
};

const onCancel = () => router.back();
</script>

<style scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
