import React from 'react'
import { Icon,InputItem,Button,List,WhiteSpace,NavBar ,NoticeBar,WingBlank} from 'antd-mobile';
import { browserHistory } from 'react-router';
import { createForm } from 'rc-form';

import $ from 'jquery'; 
import {doSignIn} from '../Utils/help'


import '../less/login.less'

window.autoInput= function(username, password){
    console.log(username, password)
    if(window.callback != undefined){
        window.callback.autoInput(username, password)
    }
}
window.setcallback = function(callback){
    window.callback = callback;
}
class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this) 
        this.onchange = this.onchange.bind(this);
        this.onKeyPress = this.onKeyPress.bind(this);
        this.testJavaCallJs = this.testJavaCallJs.bind(this);
        this.autoInput = this.autoInput.bind(this);
        this.isAndroid = this.isAndroid.bind(this)
        this.state={
            loginfaild:false,
            loading:false,
            height:600,
            username:"",
            password:"",
        }
    }
    onchange=(e)=>{
        this.setState({password:e})
    }
    enterusername=(e)=>{
        this.setState({username:e})
    }
    handleSubmit(e) {
        e.preventDefault();
        let that = this;
        that.setState({loading:true,loginfaild:false});
        doSignIn(that.state.username,that.state.password,(state)=>{
            if(state==0)
                that.setState({loading:false});
            else
                that.setState({loginfaild:true,loading:false});
        });
    }

    autoInput(username, password){
        let usernameE = document.getElementById('username').value
        let passwordE = document.getElementById('password').value
        if(usernameE.length>0 && passwordE.length>0){
        }else{
            this.setState({
                username,password
            })
            
        }
    }

    testJavaCallJs(){
        if(this.isAndroid()){
            window.Android.autoInputa();
        }
        
    }
    isAndroid = () =>{
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid
    }

    onKeyPress=(e,f,d)=>{
        if (e.which == 13){  
            if("username" == document.activeElement.id)
                this.pwd.focus();
            else{
                this.handleSubmit(e);
            }
        }
    }

    componentDidMount() {
    window.setcallback(this);
    let hei = document.documentElement.clientHeight;// - ReactDOM.findDOMNode(this.lv).offsetTop; 
    const wid = document.documentElement.clientWidth;// - ReactDOM.findDOMNode(this.lv).offsetTop; 
    window.wheight = hei;
    window.wwidth = wid;
    // hei = hei - ReactDOM.findDOMNode(this.lv).offsetTop; 
    this.setState({height:hei});
    this.testJavaCallJs()
    }
    render() {  
        const { getFieldProps } = this.props.form;      
        var msg =()=>{
            if(this.state.loginfaild)
                return(
                    <span style={{textAlign:'center',width:'100%'
                    ,fontSize:20,color:'#ff0000'}}>用户名或密码不正确!</span>
                );
        }
        return (
            <div id="loginpagewrap" style={{height:this.state.height}} >
                <NavBar ref={el=>this.lv = el } mode="dark" >EMCS</NavBar> 
                <p>登录</p>
                <WingBlank>
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <div id="loginWrap">   
                    <WhiteSpace size="lg" />
                    <InputItem id="username" style={{fontSize:14}}
                        {...getFieldProps('autofocus')}
                        clear
                        placeholder="输入用户名"
                        onChange={this.enterusername}
                        onKeyPress = {this.onKeyPress}
                        autoFocus
                        value={this.state.username}
                    >
                    </InputItem> 
                    <InputItem id="password" style={{fontSize:14}} type="password" placeholder="密码输入"
                        value = {this.state.password} onChange={this.onchange} onKeyPress = {this.onKeyPress}>
                    </InputItem>
                    {this.state.loginfaild?<NoticeBar mode="closable" icon={<Icon type="cross-circle-o" size="xxs"/>}>用户名或密码不正确!</NoticeBar>:""}
                    <WhiteSpace size="lg" />
                    <Button size="small" style={{height:32,fontSize:16,marginLeft:20,marginRight:20}} type="primary" onClick={this.handleSubmit} loading = {this.state.loading}>登录</Button> 
                    <WhiteSpace size="lg" />
                </div>
                </WingBlank>
            </div>
        );

    }
}
let Login = createForm()(LoginPage); 
export default Login;