<template>
    <div>
        <el-dialog
                title="公式"
                class="response-middle-dialog"
                :visible.sync="formula.dialogVisible"
                :close-on-click-modal="false"
                @close="formulaDialogClose"
                center>
            <div class="kf-editor" ref="kfEditorContainer">
                <!--<div class="tips" ref="tips">
                    sorry! Beta版本仅支持IE9及以上版本的浏览器，正式版本将会支持低版本浏览器，谢谢您的关注！
                </div>-->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="passValue">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import store from '@/store';

    export default {
        components: {},
        data() {
            return {
                formula: {
                    dialogVisible:  false,
                    imgsrc:         '',
                    latex:          '',
                    type:           '',
                    quillEditorRef: '',
                },
            };
        },

        methods: {
            formulaDialogClose() {
                // console.dir(window.kfe);
                // window.kfe.initResource();
                // delete window.kfe;
            },
            passValue() {
                kfe.execCommand('get.image.data', (data) => {
                    let latex = kfe.execCommand('get.source');

                    this.formula.dialogVisible = false;
                    this.formula.latex = latex;
                    this.formula.imgsrc = data.img;

                    store.commit({
                                     type:      'setFormula'
                                     , formula: this.formula,
                                 });
                });
            },
            initFormula() {
                if (document.body.addEventListener) {

                    let that = this;

                    // $( "#tips").html('<div id="loading"><img src="/external/kityformula/kityformula/loading.gif" alt="loading" /><p>正在加载，请耐心等待...</p></div>' );
                    // console.dir(this.$refs.kfEditorContainer);

                    let renderFormula = '';
                    if (this.formula.latex && this.formula.latex !== '') {
                        renderFormula = this.formula.latex;
                    } else {
                        renderFormula = '\\placeholder';
                    }

                    this.$nextTick(() => {
                        if (!window.kfe) {
                            var factory = kf.EditorFactory.create(this.$refs.kfEditorContainer, {
                                /*autoresize: false,
                                    fontsize: 30,
                                    padding: [ 20, 50 ]*/
                                render:   {
                                    fontsize: 20,
                                    padding:  [0],
                                },
                                resource: {
                                    path: '../../external/kityformula/kityformula/resource/',
                                },
                            });

                            // console.dir(factory);

                            factory.ready(function (KFEditor) {
                                // console.log('factory.ready!!');
                                // $( "#tips").remove();

                                // this指向KFEditor
                                /*var rng = editor.selection.getRange(),
                                    img = rng.getClosedNode(),
                                    imgLatex = img && $(img).attr('data-latex');

                                this.execCommand( "render", imgLatex || "\\placeholder" );
                                this.execCommand( "focus" );

                                window.kfe = this;*/
                                this.execCommand('render', renderFormula);
                                this.execCommand('focus');
                                window.kfe = this;
                            });
                        } else {
                            // console.log(renderFormula);
                            kfe.execCommand('render', renderFormula);
                            // kfe.execCommand('focus'); does`t work?
                        }
                    });


                    /*dialog.onok = function(){
                        kfe.execCommand('get.image.data', function(data){
                            var latex = kfe.execCommand('get.source');
                            console.log(latex);
                            // editor.execCommand('inserthtml', '<img class="kfformula" src="'+ data.img +'" data-latex="' + latex + '" />');
                            // dialog.close();
                        });

                        return false;
                    }*/

                } else {
                    /*$( "#tips").css( "color", "black" );
                    $( "#tips").css( "padding", "10px" );*/
                }
            },
        },
        mounted() {

        },
        watch:   {
            '$store.state.formula': {
                handler(newVal, oldVal) {
                    // console.log('in store.state.formula');
                    // console.log(newVal);
                    this.formula = newVal;
                    if (this.formula.dialogVisible === true) {
                        this.initFormula();
                    }
                },
                deep: true,
            },
        },
    };
</script>
