<script setup lang="ts">
import { ref } from 'vue';

import { Button, Form, Input, notification } from 'ant-design-vue';

import { resetPassword } from '#/api';

// 密码表单数据
const passwordForm = ref({
  oldPassword: '',
  password: '',
  confirmPassword: '',
});

// 提交修改密码的方法
const handleSubmit = async () => {
  if (passwordForm.value.password !== passwordForm.value.confirmPassword) {
    notification.success({
      message: '两次输入的新密码不一致',
      duration: 3,
    });
    return;
  }
  // 调用API进行密码修改
  const res = await resetPassword(passwordForm.value);
  if (res === true) {
    notification.success({
      message: '密码修改成功',
      description: '密码已修改',
      duration: 3,
    });
    passwordForm.value = {
      oldPassword: '',
      password: '',
      confirmPassword: '',
    };
  } else {
    notification.error({
      message: '密码修改失败',
      description: res.msg,
    });
  }
};
</script>

<template>
  <Form
    :model="passwordForm"
    layout="vertical"
    @finish="handleSubmit"
    class="p-4"
    style="max-width: 500px; margin: 0 auto"
  >
    <Form.Item
      label="原密码"
      name="oldPassword"
      :rules="[{ required: true, message: '请输入原密码' }]"
    >
      <Input.Password v-model:value="passwordForm.oldPassword" />
    </Form.Item>
    <Form.Item
      label="新密码"
      name="password"
      :rules="[{ required: true, message: '请输入新密码' }]"
    >
      <Input.Password v-model:value="passwordForm.password" />
    </Form.Item>
    <Form.Item
      label="确认新密码"
      name="confirmPassword"
      :rules="[{ required: true, message: '请确认新密码' }]"
    >
      <Input.Password v-model:value="passwordForm.confirmPassword" />
    </Form.Item>
    <Button type="primary" html-type="submit">保存密码</Button>
  </Form>
</template>

<style scoped>
:deep(.ant-form) {
  max-width: 500px;
}
</style>
