import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
// import { actionCreators } from './store';

import * as actionCreators from './store/actionCreators';
import * as commonActionCreators from '../common/store/actionCreators';

import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import { constants } from '../contact/company/store';

const onFinish = values => {
    console.log('Received values of form: ', values);
};

class login extends Component {



    render() {
        const { loading, handleLogin,csrfToken } = this.props;

        //console.log(store.getIn('common','menuActive'));

        return (
            <Fragment>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={(values) => handleLogin(values,csrfToken)}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入账号' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button"
                                loading={loading}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </Fragment>
        );
    }

    componentDidMount() {
        const { handleLoginSafety } = this.props;
        handleLoginSafety();
    }


}

const mapStateToProps = (state) => {

    return {
        //loading: state.get('loading'),
        loading: state.getIn(['login', 'loading']),
        csrfToken: state.getIn(['common', 'csrfToken']),
    }
}


const mapDispathToProps = (dispatch) => {
    return {
        handleLogin(parameter,csrfToken) {
            //dispatch(actionCreators.changeLoading());
            dispatch(actionCreators.login(parameter,csrfToken));
        },
        handleLoginSafety(){
            dispatch(commonActionCreators.loginSafety());
        },
    }

}
// export default contact;
export default connect(mapStateToProps, mapDispathToProps)(login);
