import * as React from 'react';
import { Select, Row, Col } from '@btri-ui/base';
const { Option, OptGroup } = Select;

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const optgroup = () => {
  return (
    <Row gutter={[16, 16]}>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          placeholder="请选择"
          onChange={handleChange}
          style={{ width: '100%' }}
        >
          <OptGroup label="分类一">
            <Option value="选项一">选项一</Option>
            <Option value="选项二">选项二</Option>
          </OptGroup>
          <OptGroup label="分类二">
            <Option value="选项三">选项三</Option>
            <Option value="选项四">选项四</Option>
          </OptGroup>
        </Select>
      </Col>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          mode="multiple"
          placeholder="请选择"
          onChange={handleChange}
          style={{ width: '100%' }}
        >
          <OptGroup label="分类一">
            <Option value="选项一">选项一</Option>
            <Option value="选项二">选项二</Option>
          </OptGroup>
          <OptGroup label="分类二">
            <Option value="选项三">选项三</Option>
            <Option value="选项四">选项四</Option>
          </OptGroup>
        </Select>
      </Col>
    </Row>
  );
};
export default optgroup;