import React, {useRef} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import {ProForm, ProFormInstance, ProFormText} from "@ant-design/pro-components";
import styles from './index.less';
import {Card, message} from "antd";
import {changePassword} from "@/services/user";

const Password: React.FC = (props) => {
  const formRef = useRef<ProFormInstance>();

  const handleSubmit = async (values: { oldPassword: string, newPassword: string }) => {
    changePassword(
      values.oldPassword, values.newPassword
    ).then(data => {
      if (data.code == 200) {
        message.success("更新成功");
      } else {
        message.error(data.message)
      }
    }).catch(data => {
      console.log(data)
    })
  };

  return (
    <div>
      <PageContainer>
        <Card>
          <div className={styles.content}>
            <ProForm
              formRef={formRef}
              initialValues={{}}
              submitter={{
                render: (_, dom) => dom.pop(),
                submitButtonProps: {
                  size: 'large',
                  style: {
                    width: '100%',
                  },
                },
                searchConfig: {
                  submitText: '提交',
                },
              }}
              onFinish={async (values) => {
                await handleSubmit(values);
              }}
            >
              <>
                <ProFormText.Password name="oldPassword" label="原密码" rules={[{required: true}, {min: 6}, {max: 16},]}/>
                <ProFormText.Password name="newPassword" label="新密码" rules={[{required: true}, {min: 6}, {max: 16},]}/>
              </>
            </ProForm>
          </div>
        </Card>
      </PageContainer>
    </div>
  );
}

export default Password
