/**
 * title: "基础对话框"
 * description: "对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。"
 */
import React, { useState } from 'react';
import { Button, Dialog } from '@alicloud/console-components';

const content = (
  <div
    style={{
      width: '344px',
      height: '170px',
      borderRadius: '4px',
      background: '#F6F6F6',
      color: '#aaa',
      textAlign: 'center',
      lineHeight: '170px',
    }}
  >
    Dialog Content
  </div>
);
export default () => {
  const [visible, setVisible] = useState(false);
  return (
    <div className="App">
      <Button onClick={() => setVisible(!visible)} type="primary">
        标题
      </Button>
      {visible && (
        <Dialog
          title="标题"
          visible={visible}
          footerAlign="right"
          onOk={() => setVisible(!visible)}
          onCancel={() => setVisible(!visible)}
          onClose={() => setVisible(!visible)}
        >
          {content}
        </Dialog>
      )}
    </div>
  );
};