import React from 'react';
import moment from 'moment';
import { Col, Form, Row } from 'antd';
// import debounce from 'lodash.debounce';
import { dataUtils } from '../../utils';
import styles from './FormEL.less';

const FormItem = Form.Item;
//
// let onFieldsChangeWithDebounce = (v) => {
// };

class FormEL extends React.Component {
  constructor(props) {
    super(props);
    // onFieldsChangeWithDebounce = debounce(props.onFieldsChange, 100);
  }

  defaultColProps = {
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8,
    style: {},
  };

  defaultFormItemLayout = {
    colon: false,
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 14,
    },
    style: {
      // marginBottom: 10,
    },
  };

  validate = () => {
    const {
      form: {
        validateFields,
      },
    } = this.props;
    validateFields((errors) => {
      if (errors) {
        console.log(errors);
        return;
      }
    });
  };

  renderItem = (item) => {
    const {
      record,
      readOnly,
      formItemLayout,
      ColProps,
      form: {
        getFieldDecorator,
      },
    } = this.props;
    //console.dir(this.props);
    if (item.tag) {
      if (item.tag.type.name === 'TextArea') {
        // console.log(item.tag);
        item.tag = React.cloneElement(item.tag, {
          readOnly: readOnly || item.readOnly || item.tag.props.disabled,
          disabled: false,
        });
      } else {
        item.tag = React.cloneElement(item.tag, {
          disabled: readOnly || item.readOnly || item.tag.props.disabled,
        });
      }
    }

    return (
      <Col key={item.dataIndex} {...(ColProps || this.defaultColProps)} {...item.colProps}>
        <FormItem
          className={styles.formItem}
          label={item.title}
          // validateStatus={item.validateStatus}
          {...(formItemLayout || this.defaultFormItemLayout)}
          {...item.formItemLayout}
        >
          {getFieldDecorator(item.dataIndex, {
            ...item.options,
            // initialValue: record[`${item.dataIndex}`],
          })(item.tag === undefined ?
            <span className="ant-form-text">{record[item.dataIndex]}</span>
            : (item.tag.props.disabled && item.dataIndex.substr(item.dataIndex.length - 2, 2) === 'Id' ?
              <span className="ant-form-text">{record[item.dataIndex.replace('Id', 'Name')]}</span>
              : item.tag))}
        </FormItem>
      </Col>
    );

  };

  render() {
    const { items } = this.props;

    return (
      <Row type="flex" justify="start">
        {items.map(item => this.renderItem(item))}
      </Row>
    );
  }
}

export default Form.create({
  mapPropsToFields(props) {
    let fields = {};
    props.items.length && props.items.forEach((item) => {
      let value;

      if (Object.keys(props.record).length === 0 && item.options && item.options.initialValue) {
        value = item.options.initialValue;
      }

      if (item.dataIndex === 'RMB') {
        value = dataUtils.moneyToRMB(props.record[`${item.for}`] ? props.record[`${item.for}`] : 0);
      } else if (item.tag !== undefined && (item.dataIndex.substr(item.dataIndex.length - 4, 4) === 'Date' || item.dataIndex.substr(item.dataIndex.length - 4, 4) === 'Time')) {
        // console.log(props.record[`${item.dataIndex}`])
        value = props.record[`${item.dataIndex}`] && moment(props.record[`${item.dataIndex}`]);
        // } else if (item.dataIndex.substr(item.dataIndex.length - 3, 3) === 'Amt') {
        // console.log(props.record[`${item.dataIndex}`])
        // value = props.record[`${item.dataIndex}`] && parseFloat(props.record[`${item.dataIndex}`]).toFixed(2)
      } else if (item.tag === undefined && (item.dataIndex.substr(item.dataIndex.length - 4, 4) === 'Date' || item.dataIndex.substr(item.dataIndex.length - 4, 4) === 'Time')) {
        value = props.record[`${item.dataIndex}`] && dataUtils.dtm(props.record[`${item.dataIndex}`]);
      } else {
        value = props.record[item.dataIndex];
      }

      value && (fields[item.dataIndex] = Form.createFormField({ value }));
    });

    // console.log('fields', fields);

    return fields;
  },
  onFieldsChange(props, field) {
    // console.log('111111111', props, field);
  },
  onValuesChange(props, changedValues) {
    // console.log('222222222', props, changedValues, allValue);
    // console.log(props);
    // onFieldsChangeWithDebounce(changedValues);
    props.onFieldsChange(changedValues);
  },
})(FormEL);
