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

export default class ConfirmModal extends React.Component<Props, State> {
    public constructor() {
        super();
        this.handleCancel = this.handleCancel.bind(this);
        this.handleOk = this.handleOk.bind(this);
    }

    public handleCancel() {
        this.props.config.onCancel && this.props.config.onCancel();
    }

    public handleOk() {
        this.props.config.onOk && this.props.config.onOk();
    }

    public render() {
        const {title, content, cancelText, okText} = this.props.config;
        return (
            <Styled.ModalContainer>
                <div className="m-mask"></div>
                <div className="m-confirmModal">
                    <div className="inner">
                        {title && (<div className="title">
                            <h2>{title}</h2>
                        </div>)}
                        <div className="content">
                            <div dangerouslySetInnerHTML={{__html: content}}/>
                            {this.props.children}
                        </div>
                    </div>
                    <div className="action">
                        <a className="btn btn-cancel" href="javascript:;" onClick={this.handleCancel}>{cancelText || '取消'}</a>
                        <a className="btn btn-ok" href="javascript:;" onClick={this.handleOk}>{okText || '确定'}</a>
                    </div>
                </div>
            </Styled.ModalContainer>
        )
    }
}