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

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

  const toShow = () => setShow(true);
  const closeModal = () => setShow(false);

  return (
    <>
      <Row>
        <Col>
          <Button type="primary" onClick={toShow}>
            打开对话框
          </Button>
        </Col>
      </Row>
      <Modal
        width="960px"
        type="biggest"
        title="自定义标题"
        visible={show}
        onOk={closeModal}
        onCancel={closeModal}
      >
        <div
          style={{
            height: '176px',
            backgroundColor: 'rgba(25, 98, 255, 0.09)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            color: 'var(--primary-color)',
          }}
        >
          自定义内容区域
        </div>
      </Modal>
    </>
  );
};