import React, { Component } from 'react';
import { Form, Icon, Input, Button,InputNumber } from 'antd';
const FormItem = Form.Item;

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
class FormAreaNode extends Component {
  constructor(){
    super();
  }
  componentDidMount() {
   // To disabled submit button at the beginning.
   this.props.form.validateFields();
 }
  render(){
    const buttonItemLayout = this.props.layout === 'inline' ? {
      wrapperCol: { span: 5, offset: 4 },
    } : null;
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    const childrenWithProps = React.Children.map(this.props.children,
      (child) => React.cloneElement(child, {form: this.props.form}));
    const submit =this.props.submit?React.cloneElement(
        this.props.submit,
         {
          disabled: hasErrors(getFieldsError()),
          onClick:()=> this.props.func(this.props.form.getFieldsValue()) //console.log(this.props.form.getFieldsValue())
         },
       ):null;
    return(
        <Form
          layout={this.props.layout}
        >
            {childrenWithProps}
          { !!submit &&
            <FormItem
              {...buttonItemLayout}>
              {submit}
            </FormItem>
          }
       </Form>
    )
  }
}
const FormArea = Form.create({
  onFieldsChange(values) {
 }

})(FormAreaNode);
export default FormArea;