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

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: '厂商名称',
      }, {
        value: 'code', name: '厂商编号',
      }],
      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>
    );
  }
}