import React, { useRef, useState } from "react";
import { Button, Form, Input, View } from "@tarojs/components";
// import { Form, FormItem, Field, Button } from "@antmjs/vantui";
import { useModel } from "@/store";
import user from "@/assets/image/user.png";
import password from "@/assets/image/password.png";
import { warn } from "@/utils/message";
import "./form.less";

export default (props) => {
  const { onSuccess } = props;

  const { signin } = useModel("user");
  // const form = Form.useForm();
  const formRef = useRef();
  const [accErr, setAccErr] = useState("");
  const [pwdErr, setPwdErr] = useState("");
  const [loading, setLoading] = useState(false);

  const onFinish = (errs, res) => {
    console.log(res);
    if (!res.account) {
      setAccErr("账户不能为空");
      return;
    } else {
      setAccErr();
    }
    if (!res.password) {
      setPwdErr("密码不能为空");
      return;
    } else {
      setPwdErr();
    }

    setLoading(true);
    signin(res)
      .then(() => {
        onSuccess();
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  };

  const onForgetPwd = () => {
    // Taro.navigateTo({
    //   url: '/pages/reset-password/index'
    // });
    warn(true, "请联系管理人员");
  };

  // const handleClick = () => {
  //   form.validateFields((err, res) => {
  //     if (!res.account) {
  //       setAccErr("账户不能为空");
  //       return;
  //     } else {
  //       setAccErr();
  //     }
  //     if (!res.password) {
  //       setPwdErr("密码不能为空");
  //       return;
  //     } else {
  //       setPwdErr();
  //     }

  //     setLoading(true);
  //     signin(res)
  //       .then(() => {
  //         onSuccess();
  //         setLoading(false);
  //       })
  //       .catch((err) => {
  //         setLoading(false);
  //       });
  //   });
  // };
  return (
    <View className="login-form">
      <Form ref={formRef} onSubmit={onFinish}>
        {/* <FormItem name="account" valueFormat={(e) => e.detail}> */}

        <View style={{display: 'flex'}}>
          <View className="page-section-title">账号</View>
          <Input
            border
            name="account"
            leftIcon={user}
            errorMessage={accErr}
            placeholder="请输入您的登录账号"
          ></Input>
        </View>

        {/* </FormItem> */}
        {/* <FormItem name="password" valueFormat={(e) => e.detail}>
          <Field
            password
            label="密码"
            leftIcon={password}
            errorMessage={pwdErr}
            placeholder="请输入您的登录密码"
          ></Field>
        </FormItem> */}
        {/* <View className="forget-password" onClick={onForgetPwd}>
          忘记密码?
        </View> */}
        <View>
          <Button
            block
            type="primary"
            formType="submit"
            loading={loading}
            // disabled={loading}
            // onClick={handleClick}
          >
            登录
          </Button>
        </View>
      </Form>
    </View>
  );
};
