import * as React from 'react';
import * as Styled from './ResultModal.style'

export default class ResultModal extends React.Component<Props, State> {
    constructor() {
        super();
        this.state = {
            show: true
        }

        this.hideModal = this.hideModal.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    handleClose() {
        this.setState({
            show: false
        })
        this.props.config.onClose && this.props.config.onClose();
    }

    hideModal() {
        this.setState({
            show: false
        })
    }

    render() {
        const {title, content, buttonName} = this.props.config;
        const {show} = this.state;
        return (
            <Styled.ModalContainer className="m-modal-container"  style={show ? {} : {display: 'none'} }>
                <div className="m-mask" onClick={this.hideModal}></div>
                <div className="m-resultModal">
                    <div className="inner">
                        {title && (<div className="title">
                            <h2 dangerouslySetInnerHTML={{__html: title}}></h2>
                        </div>)}
                        <div className="content">
                            <div dangerouslySetInnerHTML={{__html: content}}/>
                            {this.props.children}
                        </div>
                    </div>
                    <div className="action">
                        <a className="btn btn-close" href="javascript:;" onClick={this.handleClose}>{buttonName || '知道了'}</a>
                    </div>
                </div>
            </Styled.ModalContainer>
        )
    }
}