import * as React from "react";
import PropTypes from 'prop-types';
import {MUtil} from "../../../index";


type defaultProps = {
    bgColor: "#fff",  //背景颜色：16进制
    content: "#fff",   // 文字颜色：16进制
}

type ContentData = {
    bgColor: string,
    content: string
} & defaultProps

interface LPData {
    content: Array<ContentData>,

    [propsName: string]: any
}

interface LPType {
    content: any,

    [propsName: string]: any
}

type IPropTypes = {
    source?: ContentData,
    [propsName: string]: any
}


const CLASS = 'm-word-';

class MPro extends React.Component<IPropTypes, any> {
    state: any;

    constructor(props: IPropTypes) {
        super(props);
        this.transformHtml = this.transformHtml.bind(this)

    }

    componentDidMount(): void {

    }

    transformHtml(val) {
        return {__html: MUtil.overwriteImg(val)}
    }

    render() {
        let source = this.props;
        let content = source;

        return (
            <div className={'textEdit m-word-edit'}>
                {
                    content ? <div className={CLASS + 'bg'} style={{background: content.bgColor}}>
                        <div dangerouslySetInnerHTML={this.transformHtml(content.content)}></div>

                    </div> : ''
                }
            </div>
        );
    }
}

export default MPro;