import React from 'react';
import { Form, Input, Button, message } from 'antd';
import { useIntl } from 'umi';

const ChangePassword: React.FC = () => {
  const intl = useIntl();
  const [form] = Form.useForm();

  const handleSubmit = async (values: any) => {
    if (values.newPassword !== values.confirmPassword) {
      message.error(intl.formatMessage({ id: 'page.changePassword.error.passwordMismatch' }));
      return;
    }
    // 模拟提交
    console.log('修改密码请求参数:', values);
    message.success(intl.formatMessage({ id: 'page.changePassword.success' }));
    form.resetFields();
  };

  return (
    <div style={{ padding: '24px', maxWidth: 400 }}>
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Form.Item
          name="newPassword"
          label={intl.formatMessage({ id: 'page.changePassword.label.newPassword' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'page.changePassword.message.enterNewPassword' }) }]}
        >
          <Input.Password placeholder={intl.formatMessage({ id: 'page.changePassword.message.enterNewPassword' })} />
        </Form.Item>

        <Form.Item
          name="confirmPassword"
          label={intl.formatMessage({ id: 'page.changePassword.label.confirmPassword' })}
          rules={[{ required: true, message: intl.formatMessage({ id: 'page.changePassword.message.enterConfirmPassword' }) }]}
        >
          <Input.Password placeholder={intl.formatMessage({ id: 'page.changePassword.message.enterConfirmPassword' })} />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            {intl.formatMessage({ id: 'page.changePassword.button.submit' })}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ChangePassword;