text: import React, { PureComponent } from 'react'
  import PropTypes from 'prop-types'
  import { Form, Button, Row, Col, Input } from 'antd'
  
  const { Search } = Input
  
  const ColProps = {
    xs: 24,
    sm: 12,
    style: {
      marginBottom: 16,
    },
  }
  
  const TwoColProps = {
    ...ColProps,
    xl: 96,
  }
  
  @Form.create()
  class Filter extends PureComponent {
    handleSubmit = () => {
      const { onFilterChange, form } = this.props
      const { getFieldsValue } = form
  
      let fields = getFieldsValue()
      onFilterChange(fields)
    }
  
    handleReset = () => {
      const { form } = this.props
      const { getFieldsValue, setFieldsValue } = form
  
      const fields = getFieldsValue()
      for (let item in fields) {
        if ({}.hasOwnProperty.call(fields, item)) {
          if (fields[item] instanceof Array) {
            fields[item] = []
          } else {
            fields[item] = undefined
          }
        }
      }
      setFieldsValue(fields)
      this.handleSubmit()
    }
  
    handleChange = (key, values) => {
      const { form, onFilterChange } = this.props
      const { getFieldsValue } = form
  
      let fields = getFieldsValue()
      fields[key] = values
      onFilterChange(fields)
    }
  
    render() {
      const { onAdd, filter, form } = this.props
      const { getFieldDecorator } = form
      const { device_id, camera_id } = filter
      
      return (
        <Row gutter={24}>
          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
            {getFieldDecorator('device_id', { initialValue: device_id })(
              <Search
                placeholder={'搜索设备ID'}
                onSearch={this.handleSubmit}
              />
            )}
          </Col>
          <Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
            {getFieldDecorator('camera_id', { initialValue: camera_id })(
              <Search
                placeholder={'搜索摄像头ID'}
                onSearch={this.handleSubmit}
              />
            )}
          </Col>
          <Col
            {...TwoColProps}
            xl={{ span: 10 }}
            md={{ span: 24 }}
            sm={{ span: 24 }}
          >
            <Row type="flex" align="middle" justify="space-between">
              <div>
                <Button
                  type="primary"
                  className="margin-right"
                  onClick={this.handleSubmit}
                >
                  搜索
                </Button>
                <Button onClick={this.handleReset}>
                  重置
                </Button>
                <Button type="ghost" onClick={onAdd} style={{ marginLeft: 16 }}>
                  创建
                </Button>
              </div>
            </Row>
          </Col>
        </Row>
      )
    }
  }
  
  Filter.propTypes = {
    onAdd: PropTypes.func,
    form: PropTypes.object,
    filter: PropTypes.object,
    onFilterChange: PropTypes.func,
  }
  
  export default Filter
  