import React, { Component } from 'react';
import moment from 'moment';
import { Form, Button, Switch, DatePicker, Input, InputNumber, Cascader } from 'antd';
import Select from '../../components/Select';
import Radio from '../../components/Radio';
import Multiple from '../../components/Multiple';
import TreeSelect from '../../components/TreeSelect';
import './index.less';

class FilterLayout extends Component {
  submit() {
    if (this.props.onChange) this.props.onChange(this.props.form.getFieldsValue());
  }

  clear() {
    const data = {};
    const { itemList = [] } = this.props;
    itemList.forEach(item => {
      if (item.type === 'daterange') {
        data[item.key] = [];
        this.props.form.setFieldsValue({ [item.key]: [] });
      } else {
        data[item.key] = '';
      }
    });
    if (this.props.onChange) this.props.onChange(data);
  }

  getFilterItem(item) {
    switch (item.type) {
      case 'tree':
        return (
          <TreeSelect
            {...item}
            className={item.class}
            disabled={!!item.disabled}
            placeholder={item.placeholder}
            isNode={item.isNode}
            treeDefaultExpandAll
            treeData={item.tree}
            loadData={item.loadData}
            initData={item.initData}
            ignore={item.ignore}
          />
        );
      case 'radio':
        return <Radio className={item.class} select={item.select} />;
      case 'select':
        return <Select {...item} className={item.class} select={item.select} placeholder={item.placeholder} />;
      case 'multiple':
        return (
          <Multiple
            {...item}
            className={item.class}
            select={item.select}
            placeholder={item.placeholder}
            disabled={!!item.disabled}
          />
        );
      case 'cascader':
        return <Cascader {...item} className={item.class} options={item.select} placeholder={item.placeholder} />;
      case 'textarea':
        return (
          <Input.TextArea {...item} autosize className={item.class} placeholder={item.placeholder} disabled={!!item.disabled} />
        );
      case 'input':
        return (
          <Input
            {...item}
            className={item.class}
            placeholder={item.placeholder}
            readOnly={!!item.readOnly}
            disabled={!!item.disabled}
          />
        );
      case 'number':
        return (
          <InputNumber
            {...item}
            className={item.class}
            placeholder={item.placeholder}
            readOnly={!!item.readOnly}
            disabled={!!item.disabled}
          />
        );
      case 'switch':
        return <Switch className={item.class} />;
      case 'date':
        return <DatePicker {...item} className={item.class} placeholder={item.placeholder} />;
      case 'daterange':
        return <DatePicker.RangePicker {...item} className={item.class} />;
      default:
        return <div />;
    }
  }

  formatData(data, item) {
    switch (item.type) {
      case 'date':
        return moment(data[item.key]);
      case 'daterange':
        return [moment(data[item.key][0]), moment(data[item.key][1])];
      default:
        return data[item.key];
    }
  }

  render() {
    const { hiddenLabel, itemList = [], data = {} } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="filter-layout">
        <Form layout="inline">
          {itemList.map((item, index) => {
            const option = item.option ? Object.assign({}, item.option) : {};
            if (data) {
              option.initialValue = data[item.key] || '';
              if (item.number && option.initialValue) option.initialValue = Number(option.initialValue);
              if (item.type === 'date' && option.initialValue) {
                const n = Number(option.initialValue);
                if (n) {
                  if (option.initialValue.length === 13) option.initialValue = moment(n);
                  if (option.initialValue.length === 10) option.initialValue = moment.unix(n);
                } else {
                  option.initialValue = moment(option.initialValue);
                }
              } else if (item.type === 'daterange') {
                if (option.initialValue.length > 0) {
                  option.initialValue = [moment(option.initialValue[0]), moment(option.initialValue[1])];
                } else {
                  option.initialValue = [];
                }
              }
            }
            if (item.type === 'hidden') {
              return getFieldDecorator(item.key, option)(this.getFilterItem(item));
            }
            return (
              <Form.Item key={index} label={!hiddenLabel && item.name ? `${item.name}:` : ''}>
                {getFieldDecorator(item.key, option)(this.getFilterItem(item))}
              </Form.Item>
            );
          })}
          <Form.Item>
            <Button type="primary" onClick={() => this.submit()}>
              筛选
            </Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={() => this.clear()}>清空</Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create()(FilterLayout);
