import { useNavigate } from "react-router-dom";
import "./login.less";
import { inject, observer } from "mobx-react";
import React from "react";
import { FormInstance } from "antd/lib/form";
import SimpleForm from "@/components/form/simple_form";
const Login = (props) => {
  const { usrStore } = props;
  const formRef = React.useRef<FormInstance>(null);
  const navigate = useNavigate();
  const onFinish = async (values: any) => {
    await usrStore.login({
      userName: values.account,
      passWord: values.password,
    });
    usrStore.closeLoginDilog()
    navigate("/admin/user", { replace: true });
  };
  const onFinishFailed = () => {};
  const loginForm = [
    {
      type: "input",
      label: "用户名",
      name: "account",
      value: "",
      rules: [{ required: true, message: "请输入用户名!" }],
    },
    {
      type: "password",
      label: "密码",
      name: "password",
      value: "",
      rules: [{ required: true, message: "请输入密码!" }],
    },
  ];
  return (
    <div className="login_model">
      <div className="login_box">
        <div className="container">
          <div className="login-wrapper">
            <div className="header">Login</div>
            <div className="form-wrapper">
              <SimpleForm
                formRef={formRef}
                formName="login_basic"
                colProps={16}
                formDatas={loginForm}
                onFinish={onFinish}
                initialValues={true}
                onFinishFailed={onFinishFailed}
              />
              <div
                className="btn"
                onClick={() => {
                  formRef.current?.submit();
                }}
              >
                登录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default inject("usrStore")(observer(Login));