import React from 'react';
import styles from './Login.less';
import config from '../../config/config';
import {Button, Form, Input, Row, message, Spin} from 'antd';

const FormItem = Form.Item;

const Login = (props) => {

  const {codeModel, onLogin, refreshCode, pageLoading} = props;

  const [form] = Form.useForm();
  const {getFieldsValue, validateFields, resetFields} = form;

  const login = () => {
    validateFields().then(values => {
      if (values["code"].toLowerCase() != codeModel.code.toLowerCase()) {
        message.warning("输入的验证码有误！");
        return;
      }

      if (new Date().getTime() - new Date(codeModel.createTime).getTime() > 1000 * 60) {
        message.warning("验证码已过期，请重新输入！");
        resetFields("code");
        return;
      }
      onLogin(values);
    }).catch(error => {
      console.log("===== 登陆验证失败 =====");
    });
  };

  const onKeyEnter = (e) => {
    if (e.keyCode === 13) {
      login()
    }
  };

  const createLoginForm = () => {
    return (
      <Form initialValues={{}} form={form}>
        <Row align="center">
          <div className={styles.loginFont}>用户登录</div>
        </Row>
        <Row align="center">
          <FormItem name={"userName"} rules={[{required: true, message: "请输入用户名!"}]}>
            <Input style={{ width: "240px" }} placeholder={"请输入用户名"} prefix={<i className="ri-user-3-line" style={{ color: '#506c86' }}></i>}/>
          </FormItem>
        </Row>
        <Row align="center">
          <FormItem name={"password"} rules={[{ required: true, message: "请输入密码!" }]}>
            <Input.Password style={{ width: "240px" }} placeholder={"请输入密码"} prefix={<i className="ri-lock-password-line" style={{ color: '#506c86' }}></i>}/>
          </FormItem>
        </Row>
        <Row align="center" style={{ marginLeft: "-110px" }}>
          <FormItem name={"code"} rules={[{ required: true, message: "请输入验证码!" }]}>
            <Input placeholder={"请输入验证码"} style={{ width: "130px" }} onPressEnter={onKeyEnter} prefix={<i className="ri-shield-flash-line" style={{ color: '#506c86' }}></i>} />
          </FormItem>
        </Row>
        <Row style={{ marginTop: "-56px", float: "right" }}>
          <img onClick={refreshCode} src={codeModel ? "data:image/png;base64," + codeModel.binary : "default.png"} style={{height: "32px", width: "100px"}}/>
        </Row>
        <Row align="center">
          <Button type="primary" style={{ width: "100%" }} onClick={login}>登录</Button>
        </Row>
      </Form>
    );
  }

  return (
    <div id={"loginDiv"}>
      <Spin spinning={pageLoading} size={"large"} tip={"数据加载中，请稍候！"}>
        <div style={{ display: "flex", flexDirection: "row", padding: "5% 5% 0 5%" }}>
          <div style={{ background: "#ffffff", padding: "40px" }}>
            <div style={{ position: "absolute", padding: "12px 0px 0px 8px" }}>
              <i className="ri-global-fill" style={{ fontSize: "35px", marginLeft: "5px", marginTop: "-12px", float: "left" }}></i>
              <div className={styles.logoFont}>{config.name}</div>
            </div>
            <img src={require("../../assets/login.jpg")} style={{ background: "#ffffff", width: "100%", height: "100%" }} />
          </div>
          <div style={{ background: "#ffffff", padding: "40px 40px 40px 0px" }}>
            <div className={styles.welcomeDiv}>欢迎使用{config.name}</div>
            <div className={styles.inputDiv}>
              { createLoginForm() }
            </div>
          </div>
        </div>
        <div className={styles.login_footer_copyright_div}>{config.footerText}</div>
      </Spin>
    </div>
  );
};

export default Login;