import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View,StatusBar,Image ,Text,Dimensions,AsyncStorage} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {Button} from 'antd-mobile-rn';
import commonStyle from '../../styles/styles.js';
import LoginInput from '../../components/LoginInput';

import Leancloud from '../../leancloud'

const {width,height} = Dimensions.get('window');


class LoginScreen extends Component{
  static navigationOptions = {title: '登录',header:null}
  async componentWillMount(){

    let user = JSON.parse(await AsyncStorage.getItem('USERINFO'))
    if(user) {
      this.setState({
        telphone:user.telphone,
        password:user.password
      },()=>{
        this.submit()
      })
     
    }

  }
  constructor(props){
    super(props)
    this.state={
      telphone:"",
      password:""
    }
  }
  submit(){
    const {navigation} = this.props
    const {telphone,password} = this.state
    Leancloud.login(telphone,password,navigation)
  }
  
  render(){
    const {telphone,password} = this.state
    return (
      <View style={[commonStyle.page,{backgroundColor:'#fff'}]}>
      <KeyboardAwareScrollView
      extraScrollHeight={50}
      >
      <StatusBar  
         animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden  
         hidden={true}  //是否隐藏状态栏。  
         translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
         barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')   
        >  
        </StatusBar>  
        <View style={styles.bgView}>
          <Image source={require('../../../assets/2x/Login/bg.png')} style={styles.bgViewImage}></Image>
        </View>

        <View style={[styles.form,{}]}>
            <Text style={{fontSize:17,color:'#b3b3b3',marginTop:10}}>登录</Text>
            <Image source={require('../../../assets/2x/Login/line.png')} style={{height:2,width:60,marginTop:10}}></Image>
            <LoginInput type='text' style={{marginTop:45}}
              onChange={(telphone)=>{
                this.setState({
                  telphone
                })
              }}
              text={telphone}
            ></LoginInput>
            <LoginInput type='password' placeholder='请输入密码' style={{marginTop:30}}
              onChange={(password)=>{
                this.setState({
                  password
                })
              }}
              text={password}
            ></LoginInput>
          <Button type="primary" onClick={
            ()=>this.submit()
          }
            style={styles.btn}
            >
            <Text style={{fontSize:14}}>立即登录</Text>
            </Button>
        </View>
        </KeyboardAwareScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  bgView:{
    width,
    flex:1,
    height:667,
  },
  bgViewImage:{
    width,
    height:667,
  },
  form:{
    width:325,
    height:330,
    left:24-(375-width)/2,
    top:217,
    position:'absolute',
    padding:26,
    alignItems:'center'
  },
  btn:{
    width:280,
    height:40,
    borderRadius:20,
    marginTop:40
  }

});

export default (LoginScreen);