import React from 'react';
import {
    bindActionCreators
} from 'redux';
import {
    connect
} from 'react-redux';
import {
    Link
} from 'react-router';
import styles from './index.less';
import {
    Row,
    Col,
    Form,
    Input,
    Modal,
    Select,
    Button,
    Checkbox,
    Cascader,
    DatePicker
} from 'antd';


class Ueditor extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        this.initEditor();
    }

    componentWillUnmount() {
        console.log('this.props.id',this.props.id);
        // 组件卸载后，清除放入库的id
        window.UE.delEditor(this.props.id);
    }

    
initEditor() {
        const that = this;
       let UE = window.UE;
        const {
            initHeight = 800,
            maximumWords = 10000,
            serverUrl
        } = this.props;
        const {
            id,
            setDisabled
        } = this.props
        let obj = {}
        if (!!serverUrl)
            obj.serverUrl = serverUrl;

        if (id) {
            try {
                UE.delEditor(id);
            } catch (e) { 
            }
            const ueEditor = UE.getEditor(id, {
                autoHeightEnabled: false, //设置滚动条
                initialFrameHeight: initHeight, //设置最大高度
                autoFloatEnabled: false,
                maximumWords,
                ...obj
            });
            ueEditor.ready((ueditor) => {
                if (ueditor) {
                    setTimeout(() => {
                        setDisabled && ueEditor.setDisabled();
                        console.log('this.props.richText',this.props.richText)
                        if (this.props.richText == undefined) {
                            ueEditor.setContent('');
                        } else {
                            ueEditor.setContent(this.props.richText);
                        }
                    }, 1000);
                }
            });
        }


    }

    render() {
        return (
            <div id={this.props.id} name="content"></div>
        );
    }
};



function mapStateToProps(state) {
    return {
        //articleDetail: state.findCentre.articleDetail,
    }
}

function mapDispatchToProps(dispatch) {
    return {

    }
}

export default Ueditor;