import React, { Component } from 'react';
import { Input, Select, DatePicker, Cascader, InputNumber } from 'antd';
import './styles.less';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Group: InputGroup } = Input;

class QueryItem extends Component {
  getItemDom = (value, itemConfig) => {
    const { type = 'input', allowClear = true, ...itemProps } = itemConfig;
    switch (type) {
      case 'input':
        return (
          <Input
            allowClear={allowClear}
            {...itemProps}
            value={value}
            onChange={e => this.props.onChange(e.target.value)}
          />
        );
      case 'select': {
        let { options = [], valueKey = 'value', labelKey = 'label', ...otherProps } = itemProps;
        return (
          <Select
            allowClear={allowClear}
            {...otherProps}
            value={value}
            onChange={value => this.props.onChange(value)}
          >
            {options.map(item => {
              const { [valueKey]: value, [labelKey]: label } = item;
              return (
                <Option key={value} value={value}>
                  {label}
                </Option>
              );
            })}
          </Select>
        );
      }
      case 'range-picker':
        return (
          <RangePicker
            allowClear={allowClear}
            {...itemProps}
            value={value}
            onChange={date => this.props.onChange(date)}
          />
        );
      case 'cascader':
        return (
          <Cascader
            allowClear={allowClear}
            {...itemProps}
            value={value}
            onChange={value => this.props.onChange(value)}
          />
        );
      case 'region-number': {
        value = value || {};
        let { regionKey, ...otherProps } = itemProps;
        if (!regionKey || !Array.isArray(regionKey)) {
          regionKey = ['minNum', 'maxNum'];
        }
        return (
          <InputGroup compact>
            <InputNumber
              {...otherProps}
              className={"min-input-number"}
              placeholder="最小值"
              value={value[regionKey[0]]}
              onChange={value => this.props.onChange(value, `.${regionKey[0]}`)}
            />
            <Input className={"split-input"} placeholder="至" disabled />
            <InputNumber
              {...otherProps}
              className={"max-input-number"}
              placeholder="最大值"
              value={value[regionKey[1]]}
              onChange={value => this.props.onChange(value, `.${regionKey[1]}`)}
            />
          </InputGroup>
        );
      }
      default:
        return <span>类型错误</span>;
    }
  };

  render() {
    const { value = '', itemConfig } = this.props;

    return this.getItemDom(value, itemConfig);
  }
}

export default QueryItem;