/**
 * Created by MHC on 2018/2/14.
 */
import React from 'react';
import { Input, Button, Icon, Form, message,notification } from 'antd';
import { inject, observer } from 'mobx-react'

import './index.less';



const FormItem = Form.Item;

const FromCreate = Form.create;


@inject('UserContext')
@observer
export default class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loading:false}
    }

    componentWillMount(){
        BrowserMatch.init();
        if(BrowserMatch.browser == 'IE'){
           if (BrowserMatch.version < 9) {
               alert("当前浏览器为"+BrowserMatch.browser+BrowserMatch.version+",建议使用IE9及以上版本、chrome、firefox登录");
           }
        }
    }

    toLogin =  (values) => {
        this.setState({loading:true})
        this.props.UserContext.login(values).then((data)=>{
            this.setState({loading:false})
            if(data.retcod == SUCCESS)
                this.props.history.push('business/home')
            else
            {
                console.log(data.retcod + '  '+data.retmsg)
                if(data.retcod == 'R9999')
                {
                    notification.error({message:'错误的用户名或密码'})
                }
                else
                    notification.error({message:'服务端请求失败'})
            }
        }).catch(e=>{
            this.setState({loading:false})
            notification.error({message:'服务端请求失败'})
        })
        
    }


    render() {
        
        return (
            <React.Fragment>
                <div className="login_bg">
                <Login {...this.props} loading={this.state.loading} toLogin={this.toLogin} />
                </div>
            </React.Fragment>
        );
    }


}

@FromCreate()
class Login extends React.Component {
    onSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.toLogin(values);
            }
        });
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <React.Fragment>
                <div className='login_wrapper'>
                    
                
                <div className="login_wrapper2">
                <div className='login_title'>
				           <p style={{textAlign:'left',fontSize:'3em'}}>邮储银行国结系统</p>
							   {/*<img src="img/title1.png" style={{left:'18px'}}  />*/}
                </div>
                <div className="login_container">
                    
                    <div className="login_form">
                        <p style={{textAlign:'left',fontSize:'1.2em',color:'#888'}}>用户登录 / LOGIN IN</p>
                        <Form onSubmit={this.onSubmit}>
                            <FormItem>
                                {
                                    getFieldDecorator('username', {
                                            rules: [{
                                                required: true,
                                                message: '请输入你的用户名！'
                                            }]
                                        }
                                    )(<Input type={'text'}
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder={'请输入用户名'} />)
                                }
                            </FormItem>
                            <FormItem>
                                {
                                    getFieldDecorator('password', {
                                            rules: [{
                                                required: true,
                                                message: '请输入你的密码！'
                                            }]
                                        }
                                    )(<Input type={'password'}
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder={'请输入密码'} />)
                                }
                            </FormItem>
                            <FormItem>
                                <Button
                                    loading={this.props.loading}
                                    type={'primary'}
                                    htmlType={'submit'}
                                    style={{ width: '100%' }}>登录</Button>
                            </FormItem>
                        </Form>
                        
                    </div>
                </div>
                
                </div>
                <div style={{marginTop:'2em',color:'white'}}>
                    <span className="login_tip">建议使用IE9及以上版本、chrome、firefox登录</span>
                </div>
               </div>
            </React.Fragment>
        );
    }

}


export let BrowserMatch = {
            init: function() {
                this.browser = this.getBrowser().browser || "An Unknown Browser";
                this.version = this.getBrowser().version || "An Unknown Version";
            },
           
            getBrowser: function() {
                var rMsie = /(msie\s|trident\/7)([\w\.]+)/;
                var rTrident = /(trident)\/([\w.]+)/;
                var rFirefox = /(firefox)\/([\w.]+)/;
                var rOpera = /(opera).+version\/([\w.]+)/;
                var rNewOpera = /(opr)\/(.+)/;
                var rChrome = /(chrome)\/([\w.]+)/;
                var rSafari = /version\/([\w.]+).*(safari)/;
                var ua = navigator.userAgent.toLowerCase();
                var matchBS, matchBS2;
                matchBS = rMsie.exec(ua);
                if (matchBS != null) {
                    matchBS2 = rTrident.exec(ua);
                    if (matchBS2 != null) {
                        switch (matchBS2[2]) {
                        case "4.0":
                            return {
                                browser:
                                "IE",
                                version: "8"
                            };
                           
                        case "5.0":
                            return {
                                browser:
                                "IE",
                                version: "9"
                            };
                           
                        case "6.0":
                            return {
                                browser:
                                "IE",
                                version: "10"
                            };
                           
                        case "7.0":
                            return {
                                browser:
                                "IE",
                                version: "11"
                            };
                           
                        default:
                            return {
                                browser:
                                "IE",
                                version: "Undefined"
                            };
                        }
                    } else {
                        return {
                            browser: "IE",
                            version: matchBS[2] || "0"
                        };
                    }
                }
                matchBS = rFirefox.exec(ua);
                if ((matchBS != null) && (!(window.attachEvent)) && (!(window.chrome)) && (!(window.opera))) {
                    return {
                        browser: matchBS[1] || "",
                        version: matchBS[2] || "0"
                    };
                }
                matchBS = rOpera.exec(ua);
                if ((matchBS != null) && (!(window.attachEvent))) {
                    return {
                        browser: matchBS[1] || "",
                        version: matchBS[2] || "0"
                    };
                }
                matchBS = rChrome.exec(ua);
                if ((matchBS != null) && ( !! (window.chrome)) && (!(window.attachEvent))) {
                    matchBS2 = rNewOpera.exec(ua);
                    if (matchBS2 == null) {
                        return {
                            browser: matchBS[1] || "",
                            version: matchBS[2] || "0"
                        };
                    } else {
                        return {
                            browser: "Opera",
                            version: matchBS2[2] || "0"
                        };
                    }
                }
                matchBS = rSafari.exec(ua);
                if ((matchBS != null) && (!(window.attachEvent)) && (!(window.chrome)) && (!(window.opera))) {
                    return {
                        browser: matchBS[2] || "",
                        version: matchBS[1] || "0"
                    };
                }
            }
        };