import react, { PureComponent } from 'react';
import { Button, Form, Row, Col, Icon } from 'antd';
import DataSearch from '../../../components/DataSearch';

@Form.create()
export default class Search extends PureComponent {
  render() {
    const { field, keyword, onSearch, onAdd } = this.props;

    const searchGroupProps = {
      field,
      keyword,
      size: 'default',
      select: true,
      selectOptions: [{
        value: 'name', name: '产品名称', mode: 'input',
      },{
        value: 'code', name: '产品编号', mode: 'input',
      }],
      selectProps: {
        defaultValue: field || 'code',
      },
      onSearch: (value) => {
        onSearch(value);
      },
    };

    return (
      <Row gutter={24}>
        <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
          <DataSearch { ...searchGroupProps } />
        </Col>
        <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
          <Button type="primary" onClick={onAdd}><Icon type="plus-circle" />新建</Button>
        </Col>
      </Row>
    );
  }
}