import React, { useRef, useState } from 'react';
import { connect } from 'umi';
import { Form, Select, Input, Button, message } from 'antd';
import { queryDepList } from '@/Project/services/user';
import styles from './index.less';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

const { Option } = Select;

function Login(props) {
  const {
    submitting,
    params,
    dispatch,
    initState: { refresh },
  } = props;
  const [depList, setDepList] = useState([]);
  const [hasName, setHasName] = useState(false);
  const formRef = useRef();

  const onHandleChange = async (name) => {
    if (!name) {
      setDepList([]);
      setHasName(false);
      return;
    }
    try {
      var res = await queryDepList(name);
      setDepList(res.data);
      setHasName(true);
      formRef.current.setFieldsValue({
        DepId: res.data[0]?.ID + '',
      });
    } catch (error) {
      setDepList([]);
      setHasName(true);
      message.error('用户名不存在');
    }
  };

  const handleSubmit = (values) => {
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
        // 防止浏览器自动填充
        password: values.password2,
      },
      callback: (token) => {
        params.login(token);
        refresh();
      },
    });
  };
  return (
    <div className={styles.main}>
      <div className={styles.content}>
        <Form
          name="basic"
          className={styles.inp_box}
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          onFinish={handleSubmit}
          autoComplete="new-password"
          ref={formRef}
        >
          <Form.Item
            label=""
            name="username"
            autoComplete="off"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input
              prefix={<UserOutlined className={styles.prefixIcon} />}
              className={styles.inp}
              size="large"
              autoComplete="off"
              placeholder="请输入用户名"
              onBlur={(e) => onHandleChange(e.target.value)}
            />
          </Form.Item>
          {hasName && (
            <Form.Item
              label=""
              name="DepId"
              rules={[{ required: true, message: '请选择部门' }]}
            >
              <Select placeholder="请选择部门" size="large">
                {depList.map((item) => (
                  <Option value={item.ID + ''} key={item.ID}>
                    {item.Name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          )}

          <Form.Item
            label=""
            // 不使用password，防止浏览器自动填充表单
            name="password2"
            className={styles.inp}
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password
              prefix={<LockOutlined className={styles.prefixIcon} />}
              className={styles.inp}
              size="large"
              placeholder="请输入密码"
              autoComplete="new-password"
            />
          </Form.Item>

          {/* <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>自动登录</Checkbox>
        </Form.Item> */}

          <Form.Item>
            <Button
              size="large"
              style={{ width: '100%', marginTop: 24 }}
              loading={submitting}
              type="primary"
              htmlType="submit"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))(Login);