/** 
 * 提示框
*/
import React from 'react';
import {
    Modal, Button, Icon, Row, Col
} from 'antd';

import './style/index.less';
export default class ModalMessage extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        if (this.props.delayed !== false) {
            this.delayedClose();
        }
    }
    componentWillReceiveProps(nextprops) {
        if ((nextprops.visible) && nextprops.delayed) {
            this.delayedClose();
        }
    }
    ///延迟自动关闭
    delayedClose = () => {
        setTimeout(() => {
            this.props.handleMsg.setState({
                msgVisible: false
            })
        }, this.props.delayedTime || 1500);
    }
    render() {
        const footer = (
            <div style={{ width: '100%', height: '100%', textAlign: 'center' }}>
                {
                    this.props.onCancel ?

                        <div
                            className="cancelBtn"
                            onClick={this.props.onCancel}
                            style={{
                                height: '100%', width: this.props.cancelText ? '50%' : "0"
                            }}
                        >
                            {this.props.cancelText || "取消"}
                        </div> : ""
                }
                <div
                    className="okBtn"
                    onClick={this.props.onOk} style={{
                        height: '100%', width: this.props.cancelText ? '50%' : "100%"
                    }}>
                    {this.props.okText || "确定"}
                </div>
            </div>
        )
        let type = "smile";
        if (this.props.type === "warn") { type = "meh" }
        if (this.props.type === "success") { type = "smile" }
        if (this.props.type === "error") { type = "frown" }
        return (
            <Modal
                title={this.props.title || "提示"}
                className='ModalMessage'
                visible={this.props.visible}
                onOk={this.props.onOk}
                onCancel={this.props.onCancel}
                width="400px"
                style={{
                    height: '200px',
                    background: '#FFFFFF',
                    borderRadius: '6px',
                    top: '300px'
                }}
                destroyOnClose
                maskClosable={false}
                footer={this.props.footer ? footer : null}
            >
                <Row style={{ height: '100%' }}>
                    <Col span={2} style={{ height: '100%', lineHeight: '100px' }}>
                        <Icon style={{ fontSize: '30px' }} type={type} className={this.props.type || "success"} />
                    </Col>
                    <Col span={22}
                        style={{
                            maxHeight: '100%',
                            paddingLeft: '15px',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                        }}>
                        {
                            this.props.msg
                        }
                    </Col>
                </Row>
            </Modal>
        )
    }
} 