import { Form, Input, Message, Modal } from "@arco-design/web-react";
import FormItem from "@arco-design/web-react/es/Form/form-item";
import { useState } from "react";

function LoginModal() {
  const [loginForm] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);

  const onOk = () => {
    loginForm.validate().then((res) => {
      setConfirmLoading(true);
      setTimeout(() => {
        Message.success("Success !");
        setVisible(false);
        setConfirmLoading(false);
      }, 1500);
    });
  };

  return (
    <Modal
      style={{ width: "400px" }}
      visible={visible}
      onOk={onOk}
      okText="登录"
      cancelText="取消"
      closeIcon={false}
      confirmLoading={confirmLoading}
      onCancel={() => setVisible(false)}
    >
      <Form form={loginForm} layout="vertical">
        <FormItem field="username" rules={[{ required: true }]} label="">
          <Input placeholder="用户名/手机号" />
        </FormItem>
        <FormItem
          required
          field="password"
          rules={[{ required: true }]}
          style={{ marginBottom: 0 }}
          label=""
        >
          <Input placeholder="密码" type="password" />
        </FormItem>
      </Form>
    </Modal>
  );
}

export default LoginModal;
