/**
 * Created by zhouhuan on 2017/11/3.
 */
import React from 'react';
import { createForm } from 'rc-form';
import { View, ScrollView } from 'react-native';
import { Button, List, InputItem, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createAction } from '../../../utils';

@connect(({ peopleInfo }) => ({ peopleInfo }))
class AddPeopleInfo extends React.Component {
  componentDidMount() {
    // const { id } = this.props.navigation.state.params;
    // this.props.dispatch(createAction('peopleInfo/getPeopleDetail')(id));
  }
  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error, value) => {
      if (!error) {
        this.props.dispatch(createAction('peopleInfo/savePeopleInfo')(value));
      } else {
        console.log('Validation failed');
      }
    });
  };
  onEditBack = () => {
    this.props.dispatch(createAction('peopleInfo/onEBack')('clear'));
  };
  validateNoNull = (rule, value, callback) => {
    if (value) {
      callback();
    } else {
      callback(new Error('At least four charactors for account'));
    }
  };
  render() {
    const { getFieldProps } = this.props.form;
    const { detailData, metas } = this.props.peopleInfo;
    console.info(metas);
    return (
      <ScrollView>
        <WhiteSpace />
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <Icon.Button
            name="id-card"
            backgroundColor="#08BBF9"
            onPress={() => {
              this.props.dispatch({ type: 'peopleInfo/DuKa' });
            }}
          >
            读卡
          </Icon.Button>
        </View>
        <WhiteSpace />
        <List>
          {
            metas.map((m) => {
              if (m.required === true) {
                return (
                  <InputItem
                    {...getFieldProps(m.key, {
                      initialValue: detailData[m.key],
                      rules: [
                        { required: true, message: '不允许为空' },
                        { validator: this.validateNoNull },
                      ],
                    })}
                    clear
                    placeholder="请输入"
                    editable="true"
                    ref={(el) => {
                      this.customFocusInst = el;
                    }}
                  >
                    姓名
                  </InputItem>
                );
              } else {
                return (
                  <InputItem
                    {...getFieldProps(m.key, {
                      initialValue: detailData[m.key],
                    })}
                    clear
                    placeholder="请输入"
                    editable="true"
                    ref={(el) => {
                      this.customFocusInst = el;
                    }}
                  >
                    {m.label}
                  </InputItem>
                );
              }
            })}
          {[1].map(() => {
            return (
              <List.Item>
                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                  <Icon.Button
                    name="save"
                    backgroundColor="#08BBF9"
                    onPress={this.onSubmit}
                  >
                    保存
                  </Icon.Button>
                </View>
              </List.Item>
            );
          })
          }
        </List>
      </ScrollView>
    );
  }
}
export default createForm()(AddPeopleInfo);

