import React from 'react';
import { Icon, Tabs, Spin } from 'antd';
import LoginForm from './loginForm.jsx';

import loginqq from '../../../image/login_qq.png';
import loginweixin from '../../../image/login_weixin.png';
import loginweibo from '../../../image/login_weibo.png';
import loginmore from '../../../image/login_more.png';
import './login.less';
const TabPane = Tabs.TabPane;

const LoginContent = React.createClass({
    getInitialState() {
        return {
            theKey: "0",
            loading: false
        };
    },
    tabChange(key) {
        this.setState({
            theKey: key
        })
    },
    spinChange(e) {
        this.setState({
            loading: e
        });
    },
    componentWillMount() {
        if (window.location.search === "?1") {
            this.state.theKey = '1'
        }
    },
    render() {
        return (
            <div className="content clearfix" style={{ marginTop: ((window.document.body.clientHeight - 187 - 367) / 2 + 'px') }}>
                <div className="login-left">
                    <img src="" alt="" />
                </div>
                <div className="login-right">
                    <Spin spinning={this.state.loading} className='spin-box'>
                        <Tabs defaultActiveKey={this.state.theKey} onChange={this.tabChange} className="login-from">
                            <TabPane tab="个人登录" key="0">
                                <LoginForm loginProp={this.state.theKey} spinState={this.spinChange} />
                            </TabPane>
                            <TabPane tab="公司登录" key="1" className="tabtwo">
                                <LoginForm loginProp={this.state.theKey} spinState={this.spinChange} />
                            </TabPane>
                        </Tabs>
                        <div className="login-other clearfix">
                            <ul className="clearfix">
                                <li style={{ 'display': 'none' }}><img src={loginqq} alt="" /><p>QQ</p></li>
                                <li style={{ 'display': 'none' }}><img src={loginweixin} alt="" /><p>微信</p></li>
                                <li style={{ 'display': 'none' }}><img src={loginweibo} alt="" /><p>微博</p></li>
                                <li className="join"><img src={loginmore} alt="" /><p><a href="./signIn.html">立即注册</a></p></li>
                            </ul>
                        </div>
                    </Spin>
                </div>
            </div>
        )
    }
});

export default LoginContent;