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,
  Image,
  Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import LoginBg from '../../image/loginbg.png';
import { createAction } from '../utils/index';

@connect()
class Login extends Component {
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <Image source={LoginBg} style={LoginStyles.loginView} resizeMode="cover">
        <View style={LoginStyles.TextInputView}>
          <List
            renderHeader={() => <View><Text style={LoginStyles.listText}>深圳房屋普查系统</Text></View>}
          >
            <InputItem
              {...getFieldProps('userName')}
              clear
              placeholder="请输入用户名"
              ref={(el) => { this.autoFocusInst = el; }}
            ><Icon name="user-o" size={16} color="#4F8EF7" />
            </InputItem>
            <InputItem
              {...getFieldProps('password')}
              clear
              type="password"
              placeholder="请输入密码"
              ref={(el) => { this.customFocusInst = el; }}
            ><Icon name="lock" size={16} color="#4F8EF7" />
            </InputItem>
            <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>
      </Image>
    );
  }
}
const LoginStyles = StyleSheet.create({
  listText: {
    // fontWeight: '900',
    fontSize: 25,
    color: '#ffffff',
    textAlign: 'center',
    justifyContent: 'center',
  },
  loginView: {
    flex: 1,
    padding: 30,
    width: null,
    height: null,
  },
  TextInputView: {
    marginTop: Dimensions.get('window').height * 0.2,
    backgroundColor: '#365cc1',
    borderRadius: 5,
    borderWidth: 0.3,
    borderColor: '#365cc1',
    flexDirection: 'column',
    justifyContent: 'center',
  },
  TextInput: {
    backgroundColor: '#ffffff',
    height: 45,
    margin: 18,
  },
  txtBorder: {
    height: 50,
    flex: 1,
    borderWidth: 1,
    borderColor: '#51A7F9',
    marginLeft: 50,
    marginRight: 50,
    borderRadius: 25,
    flexDirection: 'row',
  },

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);
