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

export default () => {
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);

  const toShow = () => setShow(true);
  const toClose = () => {
    setShow(false);
    setLoading(false);
  };
  const toConfirm = () => {
    setLoading(true);
    setTimeout(toClose, 3000);
  };

  return (
    <>
      <Row>
        <Col>
          <Button type="primary" onClick={toShow}>
            打开对话框
          </Button>
        </Col>
      </Row>
      <Modal
        title="对话框标题"
        visible={show}
        confirmLoading={loading}
        onOk={toConfirm}
        onCancel={toClose}
      >
        <p>
          默认宽度的对话框，文本内容最多不超过2行，超过2行使用最大宽度对话框。内容较少，使用小宽度的对话框。
        </p>
      </Modal>
    </>
  );
};