import React from 'react';
import { Input, Row, Col, Space, Icon } 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>
            <div className={style.height}>多行文本</div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>仅文字</div>
            <div className={style.height}>
              <Input placeholder="输入文本" size="large"></Input>
            </div>
            <div className={style.height}>
              <Input placeholder="输入文本"></Input>
            </div>
            <div className={style.height}>
              <Input placeholder="输入文本" size="small"></Input>
            </div>
            <div className={style.height}>
              <Input.TextArea showCount maxLength={100} />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>密码显示</div>
            <div className={style.height}>
              <Input.Password size="large" placeholder="输入密码" allowClear />
            </div>
            <div className={style.height}>
              <Input.Password placeholder="输入密码" allowClear />
            </div>
            <div className={style.height}>
              <Input.Password size="small" placeholder="输入密码" allowClear />
            </div>
          </Space>
        </Col>
        <Col span={4}>
          <Space direction="vertical">
            <div className={style.height}>带前后缀文本</div>
            <div className={style.height}>
              <Input
                addonBefore="http://"
                addonAfter=".com"
                placeholder="输入文本"
                size="large"
              />
            </div>
            <div className={style.height}>
              <Input
                addonBefore="http://"
                addonAfter=".com"
                placeholder="输入文本"
              />
            </div>
            <div className={style.height}>
              <Input
                addonBefore="http://"
                addonAfter=".com"
                placeholder="输入文本"
                size="small"
              />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>带前缀图标</div>
            <div className={style.height}>
              <Input
                prefix={<Icon iconName={'Search'}></Icon>}
                size="large"
                placeholder="输入文本"
              />
            </div>
            <div className={style.height}>
              <Input
                prefix={<Icon iconName={'Search'}></Icon>}
                placeholder="输入文本"
              />
            </div>
            <div className={style.height}>
              <Input
                prefix={<Icon iconName={'Search'}></Icon>}
                size="small"
                placeholder="输入文本"
              />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>带后缀图标</div>
            <div className={style.height}>
              <Input
                suffix={<Icon iconName={'Calendar'}></Icon>}
                size="large"
                placeholder="输入文本"
              />
            </div>
            {/* <div className={style.height}>
              <Input
                suffix={<Icon iconName={'Calendar'}></Icon>}
                placeholder="输入文本"
              />
            </div>
            <div className={style.height}>
              <Input
                suffix={<Icon iconName={'Calendar'}></Icon>}
                size="small"
                placeholder="输入文本"
              />
            </div> */}
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>验证</div>
            <div className={style.height}>
              <Input
                placeholder="输入文本"
                vertify={{ status: 'success', message: '验证成功' }}
                size="large"
              ></Input>
            </div>
            <div className={style.height}>
              <Input
                placeholder="输入文本"
                vertify={{ status: 'success', message: '验证成功' }}
              ></Input>
            </div>
            <div className={style.height}>
              <Input
                placeholder="输入文本"
                vertify={{ status: 'success', message: '验证成功' }}
                size="small"
              ></Input>
            </div>
          </Space>
        </Col>
      </Row>
    </>
  );
};

export default UI;