import React from 'react';
import PropTypes from 'prop-types';
import { Button, Col, Form, Input, Row } from 'antd';

const FormItem = Form.Item;

const ColProps = {
  xs: 24,
  sm: 12,
  md: 8,
  lg: 8,
  xl: 8,
  style: {
    // marginBottom: 16,
  },
};


const Filter =
  ({
     onFilterChange,
     filter,
     showReset,
     form: {
       getFieldDecorator,
       getFieldsValue,
       setFieldsValue,
       getFieldInstance,
       getFieldProps,
       resetFields,
     },
   }) => {
    const handleFields = (fields) => {
      let updatedFileds = {};

      for (const prop in fields) {
        // Convert moment obj to 'YYYY-MM-DD'
        if (Object.prototype.toString.call(fields[`${prop}`]) === '[object Array]') {
          // console.log(prop, fields[`{prop}]`, typeof fields[`{prop}]`, fields[`{prop}]`[0].format('YYYY-MM-DD'))
          // console.log(fields[`{prop}]`)
          if (prop.substr(prop.length - 4, 4) === 'Date') {
            updatedFileds[`${prop}From`] = fields[`${prop}`][0] && fields[`${prop}`][0].format('YYYY-MM-DD');
            updatedFileds[`${prop}To`] = fields[`${prop}`][1] && fields[`${prop}`][1].format('YYYY-MM-DD');
          } else if (prop.substr(prop.length - 4, 4) === 'Time') {
            updatedFileds[`${prop}From`] = fields[`${prop}`][0] && fields[`${prop}`][0].format('YYYY-MM-DDTHH:mm:ss');
            updatedFileds[`${prop}To`] = fields[`${prop}`][1] && fields[`${prop}`][1].format('YYYY-MM-DDTHH:mm:ss');
          } else {
            // 处理多级联动
            updatedFileds[prop] = fields[prop];
          }

        } else if (prop.substr(prop.length - 4, 4) === 'Date') {
          updatedFileds[`${prop}`] = fields[`${prop}`] && fields[`${prop}`].format('YYYY-MM-DD');
        } else if (prop.substr(prop.length - 4, 4) === 'Time') {
          updatedFileds[`${prop}`] = fields[`${prop}`] && fields[`${prop}`].format('YYYY-MM-DDTHH:mm:ss');
        } else {
          updatedFileds[prop] = fields[prop];
        }
      }
      return updatedFileds;
    };

    const handleSearch = () => {
      let fields = getFieldsValue();
      fields = handleFields(fields);
      onFilterChange(fields);
    };

    const handleReset = () => {
      const fields = getFieldsValue();
      for (let item in fields) {
        const theFilter = filter.find(f => f.dataIndex === item);
        if (Object.prototype.hasOwnProperty.call(fields, item)) {
          if (theFilter && theFilter.tag && theFilter.tag.props.disabled) {
            // 忽略disabled的组件
          } else {
            const f = getFieldInstance(item);
            f.clear && f.clear();

            if (fields[item] instanceof Array) {
              fields[item] = [];
            } else {
              fields[item] = undefined;
            }
          }
        }
      }

      setFieldsValue(fields);
      handleSearch();
    };

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      colon: false,
    };

    const renderItemTag = (item) => {
      let itemTag = item.tag;
      if (itemTag) {
        // if (typeof itemTag === 'function') {
        //   itemTag = itemTag(handleSearch);
        // }

        if (itemTag.props.prefixCls === 'ant-input') {
          return React.cloneElement(itemTag, { onPressEnter: handleSearch });
        }
        return React.cloneElement(itemTag);
      }
      return <Input onPressEnter={handleSearch}/>;
    };

    const renderItem = (item) => {
      return (<Col key={item.dataIndex} {...ColProps} {...item.colProps}>
        <FormItem {...formItemLayout} {...item.formItemLayout} label={item.title}>
          {getFieldDecorator(item.dataIndex, { ...item.options })(renderItemTag(item))}
        </FormItem>
      </Col>);
    };

    return (
      <Row gutter={12}>
        <Col span={22}>
          <Row type="flex">
            {filter.map(item => renderItem(item))}
          </Row>
        </Col>

        {
          (filter && filter.length) && <Col span={2} style={{ marginBottom: 6, paddingLeft: '2%' }}>
            <div
              style={{ textAlign: 'center', padding: '5px' }}>
              <Button
                shape="circle"
                icon="search"
                onClick={handleSearch}
                style={{ marginBottom: 5 }}
              />
              {showReset !== false && <Button
                shape="circle"
                icon="sync"
                onClick={handleReset}
              />}
              {/* <Button size="large" type="ghost" onClick={onAdd}>新增</Button>*/}
            </div>
          </Col>
        }
      </Row>
    );
  };

Filter.propTypes = {
  // onAdd: PropTypes.func,
  form: PropTypes.object.isRequired,
  filter: PropTypes.array.isRequired,
  onFilterChange: PropTypes.func,
};

export default Form.create()(Filter);
