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

const data = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4' },
  { label: '选项五', value: '5' },
  { label: '选项六', value: '6' },
  { label: '选项七', value: '7' },
  { label: '选项八', value: '8' },
  { label: '选项九', value: '9' },
  { label: '选项十', value: '10' },
  { label: '选项十一', value: '11' },
  { label: '选项十二', value: '12' },
  { label: '选项十三', value: '13' },
  { label: '选项十四', value: '14' },
  { label: '选项十五', value: '15' },
  { label: '选项十六', value: '16' },
  { label: '选项十七', value: '17' },
  { label: '选项十八', value: '18' },
  { label: '选项十九', value: '19' },
  { label: '选项二十', value: '20' },
];

export default () => {
  return (
    <Row gutter={[16, 16]}>
      <Col xs={{ span: 24 }} lg={{ span: 12 }}>
        <Select
          style={{ width: '100%' }}
          placeholder="请选择"
          options={data}
          dropdownMatchSelectWidth={600}
        ></Select>
      </Col>
      <Col xs={{ span: 24 }} lg={{ span: 12 }}>
        <Select
          style={{ width: '100%' }}
          placeholder="请选择"
          options={data}
          dropdownMatchSelectWidth={true}
        ></Select>
      </Col>
    </Row>
  );
};