/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { inject } from 'mobx-react';
import { Button } from '@alifd/next';

const styles = {
    container: {
        width: '360px',
        padding: '40px',
        background: '#fff',
        borderRadius: '6px',
        zIndex: 9,
    },
    title: {
        margin: '0 0 40px',
        color: 'rgba(0, 0, 0, 0.8)',
        fontSize: '28px',
        fontWeight: '500',
        textAlign: 'center',
    },
    footer: {
        textAlign: 'center',
    },
    submitBtn: {
        width: '12em',
    },
    tips: {
        marginTop: '20px',
        display: 'block',
        textAlign: 'center',
    },
};

@inject('userStore')
@withRouter
class UserLogin extends Component {
    static displayName = 'UserLogin';
    handleClick = () => {
        const { userStore } = this.props;
        userStore.getAuthUrl();
    };
    render() {
        return (
            <div style={styles.container}>
                <h4 style={styles.title}>登 录</h4>
                <div style={styles.formItems}>
                    <div style={styles.footer}>
                        <Button type="primary" size="large" onClick={this.handleClick} style={styles.submitBtn}>
                            企业微信登录
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default UserLogin;