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

const { Option } = Select;

class LoginPage extends Component {
  formRef = null;
  state = {
    type: 'account',
    depList: [],
    hasName: false,
  };
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
  }
  componentDidMount = () => {};
  onHandleChange = async (name) => {
    var res = await queryDepList(name);
    this.setState({
      depList: res.data,
      hasName: true,
    });
    this.formRef.current.setFieldsValue({
      DepId: res.data[0]?.ID + '',
    });
  };

  handleSubmit = (values) => {
    const { type } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
        // 防止浏览器自动填充
        password: values.password2,
        type,
      },
      callback: () => {
        this.props.params.gotoA();
      },
    });
  };

  render() {
    const { depList, hasName } = this.state;
    const { submitting } = this.props;
    return (
      <div className={styles.main}>
        <div className={styles.content}>
          <Form
            name="basic"
            className={styles.inp_box}
            labelCol={{ span: 0 }}
            wrapperCol={{ span: 24 }}
            onFinish={this.handleSubmit}
            autoComplete="new-password"
            ref={this.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) => this.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'],
}))(LoginPage);
