import React from 'react';
import { Input, Row, Col, Space, Icon, InputNumber } from '@btri-ui/base';
import style from './index.less';

const UI = () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>数字输入框</div>
            <div className={style.height}>大尺寸</div>
            <div className={style.height}>中尺寸</div>
            <div className={style.height}>小尺寸</div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>固定数字输入</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="large"
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="small"
              ></InputNumber>
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>数字输入验证失败</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="large"
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="small"
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>数字输入验证成功</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="large"
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                size="small"
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>微调器</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="large"
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="small"
              ></InputNumber>
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>微调器验证失败</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="large"
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="small"
                vertify={{ status: 'error', message: '验证失败' }}
              ></InputNumber>
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>微调器验证成功</div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="large"
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
            <div className={style.height}>
              <InputNumber
                placeholder="1~2048"
                min={1}
                max={2048}
                controlsType="horizontal"
                size="small"
                vertify={{ status: 'success', message: '验证成功' }}
              ></InputNumber>
            </div>
          </Space>
        </Col>
      </Row>
    </>
  );
};

export default UI;