import React from "react";
import {dragBox} from '@utils/drag';
import ReactDom from "react-dom";
import style from "./index.less";
import close from '@common/images/icon_close.png';

class WrapModalContainer extends React.Component {
  constructor(props) {
    super(props)
  }
  componentDidMount(){
    dragBox('previewWrapper','previewStatic','add')
  }
  render() {
    const { onClose, children,title,width,height } = this.props;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(<div className={style['container']}>
      <div className={style['shade']} onClick={onClose}></div>
      <div className={style['modal']} id="previewWrapper" style={{width:width+'px',marginLeft:(-width/2)+'px',height:height,marginTop:(-height/2)+'px'}}>
        <div id="previewStatic" className={`${style['close']} drag-title`}>{title}</div>
        <img className={style['img']} src={close} onClick={onClose} />
        {children}
      </div>
    </div>,domNode)
  }
}

export default WrapModalContainer;