<script setup lang="ts">
/**
 * 个人中心 - 修改密码
 * 复用顶栏「修改密码」弹窗同一份表单配置（layouts/config/form.ts 的 passwordModalForm）
 * 与同一个接口（admin/update-password），保证两个入口口径完全一致，不重复造轮子
 */
import { ref } from 'vue';

import { Button, message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { passwordModalForm } from '#/layouts/config/form';
import { updatePassword } from '#/views/system/admin/api';

const [Form, formApi] = useVbenForm(passwordModalForm);

const submitting = ref(false);

/**
 * 提交改密：校验 → 调 admin/update-password → 清空表单
 * 成功提示与顶栏弹窗一致（token 仍有效，下次登录使用新密码）
 */
function handleSubmit() {
  formApi.validate().then(async (e: any) => {
    if (!e.valid) return;
    const values = await formApi.getValues();
    submitting.value = true;
    try {
      await updatePassword(values);
      message.success('修改成功，请重新登录');
      formApi.resetForm();
    } finally {
      submitting.value = false;
    }
  });
}
</script>
<template>
  <div class="w-full lg:w-1/2">
    <Form />
    <Button
      class="mt-4"
      type="primary"
      :loading="submitting"
      @click="handleSubmit"
    >
      修改密码
    </Button>
  </div>
</template>
