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

const State = () => {
  const handleChange = (value: any) => {
    console.log(value);
  };

  const [loading, setLoading] = React.useState(true);
  const [children, setChildren] = React.useState([]);

  const loadData = () => {
    const children = [];
    for (let i = 10; i < 36; i += 1) {
      children.push(
        <Option key={i.toString(36) + i} disabled={i === 10} title={`中文${i}`}>
          中文{i}
        </Option>,
      );
    }
    setChildren(children);
    setLoading(false);
  };

  React.useEffect(() => {
    setTimeout(() => {
      loadData();
    }, 5000);
  }, []);

  return (
    <Row gutter={[16, 16]}>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          placeholder="请选择"
          style={{ width: '100%' }}
          onChange={handleChange}
        >
          <Option value="1">选项一</Option>
          <Option value="2">选项二</Option>
          <Option value="3">选项三</Option>
          <Option value="4" disabled>
            选项四
          </Option>
          <Option value="5">选项五</Option>
          <Option value="6">选项六</Option>
        </Select>
      </Col>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          placeholder="请选择"
          disabled
          style={{ width: '100%' }}
          onChange={handleChange}
        >
          <Option value="1">选项一</Option>
        </Select>
      </Col>
      <Col xs={{ span: 24 }} lg={{ span: 8 }}>
        <Select
          placeholder="请选择"
          loading={true}
          style={{ width: '100%' }}
          onChange={handleChange}
          options={[]}
        >
          {/* {children} */}
        </Select>
      </Col>
    </Row>
  );
};
export default State;