import React,{Component} from "react";
import $ from 'jquery';
import PropTypes from 'prop-types';
import style from './index.less';
import ReactDom from "react-dom";

/***
 * 信息提示框组件（操作结果提示组件变更为Notify）
 * author: zxc@2018-11-26
 * 接收参数：
 * show: 信息提示框是否可见, Boolean
 * type: 信息提示框类型, 包括success、error、warn。
 * text: 信息提示框文本内容
 * 
***/


class Message extends Component{
    constructor(props){
        super(props);
        this.hideMsg = this.hideMsg.bind(this);
    }
    hideMsg(){
        $(this.message).hide();
    }
    getStyle(){
        const {show} = this.props;
        return {
            display:show?"block":"none"
        }
    }
    render(){
        const imgs={
            success:require("./imgs/ok.png"),
            error:require("./imgs/fail.png"),
            warn:require("./imgs/info.png")};
        const styles = {
            success: {background:'#f0f9eb',bordeColor:'#e1f3d8',color:'#67c23a'},
            error: {background:'#fdf6ec',bordeColor:'#faecd8',color:'#e6a23c'},
            warn:{background:'#fefef0',bordeColor:'#fde2e2',color:'#f56c6c'}
        }
        const {text,icon,type} = this.props;
        const msg = type=='success'?'操作成功':'操作失败';
        const domNode = document.getElementById('root');
        return  ReactDom.createPortal(<div className={style["container"]} style={this.getStyle()} ref={(ref) =>this.message = ref}>
                    <div className={style["message-box"]} style={styles[type]}>
                        <img src={icon||imgs[type]} />
                        <p className={style["msg"]}>{text||msg}</p>
                        <span className={style["close"]} onClick={this.hideMsg}>X</span>
                    </div>
                </div>,domNode);
        };
}


export default Message;