import './index.scss';
import Modal from "../../../modal";
import BaseFormControl from '../../baseFormControl';
import RichEditor from '../../../richEditor';
import * as TPL from './tpl';
class CustomEdit extends BaseFormControl {
    constructor(config) {
        super();
        this.config = $.extend(true, {}, {
            domData: {},
            moduleData: {
                width: null,
                content: ''
            }
        }, config);
        this.render();
    }
    
    render() {
        this.appendFormControl(template.render(TPL.formTpl, this.config));
        this.config.node.closest('.J_content').find('.cd-modal-btns.cd-center').hide();
        this.addEvent();
    }
    addEvent() {
        this.element.on('click', '.J_edit', () => {
            let dialog = new Modal({
                title: "自定义内容区",
                className: "cd-custom-content",
                iconClass: '',
                zIndex: 1098,
                content: template.render(TPL.modalTpl, this.config.moduleData),
                footer: {
                    show: true,
                    okLabel: "确定",
                    cancelLabel: "取消",
                    align: "right"
                },
                onDomReady: ($dialog) => {
                    this.editorInstance = new RichEditor({
                        element: $dialog.find('.J_editor')[0],
                        width: '100%',
                        html: this.config.moduleData.content
                    });
                    document.body.style.overflow = 'hidden';
                },
                onPreClose: (flag) => {
                    document.body.removeAttribute('style');
                    if (flag === Modal.CloseType.TYPE_CANCEL) {
                        this.config.node.closest('.J_content').find('.J_btnCancel').trigger('click');
                        dialog.close();
                        return false;
                    }
                    setTimeout(() => {
                        const sourceModel = document.querySelector('.ke-toolbar span[data-name="source"]');
                        if (sourceModel.classList.contains('ke-selected')) {
                            sourceModel.click();
                        }
                        let contentWidth = 1920;
                        let needCalculateWidth = true;
                        let editFrame = $('.J_editor').siblings('.ke-container').find('.ke-edit-iframe').contents();
                        const editBody = $('body', editFrame);
                        editBody.find('img').each((index, img) => {
                            if ($(img).width() === 1920) {
                                needCalculateWidth = false;
                                return false;
                            }
                        });
                        if (needCalculateWidth) {
                            editBody.css('float', 'left');
                        }
                        
                        setTimeout(() => {
                            if (needCalculateWidth) {
                                contentWidth = getComputedStyle ? Math.ceil(parseFloat(getComputedStyle(editBody[0]).width)) : editBody.width();
                                $('body', editFrame).removeAttr('style');
                            }
                            this.config.moduleData.content = this.editorInstance.getValue();
                            this.config.moduleData.width = contentWidth;
                            this.config.node.closest('.J_content').find('.J_btnOK').trigger('click');
                            dialog.close();
                        }, 20);
                    }, 20);
                },
            });
        });
    }
    
    getData() {
        let data = this.config.moduleData;
        let result = {};
        result[this.config.domData.name] = data;
        return result;
    }
}
export default CustomEdit;