import React, { Component } from 'react';
import { connect } from 'react-redux';
import { InputItem, List, Button, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';

import {
  StyleSheet,
  View,
} from 'react-native';
import { createAction } from '../utils/index';

@connect()
class Login extends Component {
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <View style={LoginStyles.loginView} >
        <List renderHeader={() => '深圳查房系统'}>
          <InputItem
            {...getFieldProps('username')}
            clear
            placeholder="请输入用户名"
            ref={(el) => { this.autoFocusInst = el; }}
          >用户名
          </InputItem>
          <List.Item style={LoginStyles.separator} />
          <InputItem
            {...getFieldProps('password')}
            clear
            type="password"
            placeholder="请输入密码"
            ref={(el) => { this.customFocusInst = el; }}
          >密码
          </InputItem>
          <List.Item style={LoginStyles.separator} />
          <WhiteSpace type="lg" />
          <List.Item>
            <Button
              type="primary"
              onClick={() => {
                this.props.form.validateFields((error, value) => {
                  this.props.dispatch(createAction('login/login')(value));
                });
              }}
            >登陆
            </Button>
          </List.Item>
        </List>
      </View>
    );
    // return (
    //   <View style={LoginStyles.loginview}>
    //     <View style={{
    //       flexDirection: 'row',
    //       height: 100,
    //       marginTop: 1,
    //       justifyContent: 'center',
    //       alignItems: 'flex-start',
    //     }}
    //     >
    //       <Image source={require('../../image/login.png')} />
    //     </View>
    //     <View style={{ marginTop: 80 }}>
    //         <EditView
    //           name="输入用户名/注册手机号"
    //           onChangeText={(text) => {
    //               this.userName = text;
    //           }}
    //         />
    //         <EditView
    //           name="输入密码"
    //           onChangeText={(text) => {
    //               this.password = text;
    //           }}
    //         />
    //         <LoginButton name="登录" onPressCallback={this.onPressCallback} />
    //         <Text style={{ color: '#4A90E2', textAlign: 'center', marginTop: 10 }} >忘记密码？</Text>
    //     </View>
    //   </View>
    // );
  }
}


const LoginStyles = StyleSheet.create({
  loginView: {
    flex: 1,
    padding: 30,
    backgroundColor: '#ffffff',
  },
  TextInputView: {
    marginTop: 10,
    height: 50,
    backgroundColor: '#ffffff',
    borderRadius: 5,
    borderWidth: 0.3,
    borderColor: '#000000',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  separator: {
    backgroundColor: '#333333',
    height: 0.4,
    padding: 0,
    margin: 3,
    marginLeft: 15,
    marginRight: 15,
  },
  TextInput: {
    backgroundColor: '#ffffff',
    height: 45,
    margin: 18,
  },
  loginText: {
    color: '#ffffff',
    fontWeight: 'bold',
    width: 30,
  },
  loginTextView: {
    marginTop: 10,
    height: 50,
    backgroundColor: '#3281DD',
    borderRadius: 5,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default createForm()(Login);
