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,
  Text,
} 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={() => <View><Text style={LoginStyles.listText}>深圳查房系统</Text></View>}>
          <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>
    );
  }
}


const LoginStyles = StyleSheet.create({
  listText: {
    // fontWeight: '900',
    fontSize: 20,
    color: '#000000',
  },
  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);
