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

export default () => (
  <>
    <Row autoMode={true}>
      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>默认</div>
        <Progress type="circle" percent={30} />
      </Col>

      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div> 不显示文字</div>
        <Progress type="circle" percent={30} showInfo={false} />
      </Col>

      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>自定义</div>
        <Progress type="circle" percent={30} infoConfig={{ unit: 'day' }} />
      </Col>

      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>进度完成</div>
        <Progress
          type="circle"
          percent={100}
          status="success"
          infoConfig={{ infoIcon: 'success' }}
        />
      </Col>
      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>完成</div>
        <Progress type="circle" status="success" percent={100} />
      </Col>
      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>进度发生重大错误</div>

        <Progress
          type="circle"
          infoConfig={{ infoIcon: 'error' }}
          percent={60}
          status="exception"
        />
      </Col>
      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>进度被中断</div>
        <Progress
          type="circle"
          infoConfig={{ infoIcon: 'alarm' }}
          percent={60}
          status="alarm"
        />
      </Col>
      <Col
        span={3}
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div>小尺寸</div>
        <Progress type="circle" percent={30} size="small" />
      </Col>
    </Row>
  </>
);