import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Button } from 'amos-antd';
import classnames from 'classnames';
import './style/modol.scss';
/**
 * 简单模态对话框
 * @class SimpleModal
 * @extends {Component}
 */
class SimpleModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const maskClosable = false;
    let { visible, wrapClassName, title, onCancel, width, onOk, style, children, footer, okText, cancelText, ...other } = this.props;
    wrapClassName = classnames(wrapClassName, {
      'details-model': true
    });
    if (footer === undefined) {
      footer = [
        <Button type="primary" key="confirm-btn" htmlType="submit" onClick={onOk}>
          {okText}
        </Button>,
        <Button type="ghost" key="cancle-btn" onClick={onCancel}>
          {cancelText}
        </Button>
      ];
    }
    return (
      <aside>
        {visible ? (
          <Modal
            visible={visible}
            title={title}
            onCancel={onCancel}
            onOk={onOk}
            width={width}
            maskClosable={maskClosable}
            style={style}
            wrapClassName={wrapClassName}
            footer={footer}
            {...other}
          >
            {children}
          </Modal>
        ) : null}
      </aside>
    );
  }
}

SimpleModal.propTypes = {
  visible: PropTypes.bool, //是否展示对话框
  wrapClassName: PropTypes.bool, //对话框外层容器的类名
  title: PropTypes.string, //标题
  onCancel: PropTypes.func, //点击遮罩层或右上角叉或取消按钮的回调
  onOk: PropTypes.func, //点击确定按钮的回调
  width: PropTypes.any, //宽度
  style: PropTypes.object, //可用于设置浮层的样式，调整浮层位置等
  children: PropTypes.any, //对话框内容
  footer: PropTypes.array,
  okText: PropTypes.string,
  cancelText: PropTypes.string
};

SimpleModal.defaultProps = {
  width: 500,
  okText: '确定',
  cancelText: '取消'
};

export default SimpleModal;
