/**
 * yaml页面
 * @author wangting
 * @date 2021-5-27
 */
layui.define(['layer','element' ],function(exports){
        var webUtil = $webUtil;
    var Class = function(){
        this.MODELNAME = "platform/monitor/VciYAML";
        this.moduleKey = "VciYAML";
        this.backPath =  configData.compatibility?path:configData.adminServicePath;
        this.id = "VciYAML";
        this.getContent=function(){
            var that = this;
            var html = "";
            html = [
                '<div class="layui-layout" style="display:block;overflow-y: hidden">',
                    '<div class="layui-layout-border" style="display:block;margin-top:0px; " id="border_',that.id,'">',
                        '<div class="layui-center" style="overflow-y:auto;overflow-x: hidden">',
                            '<link rel=stylesheet href="jslib/yaml/css/codemirror.css">' +
                            '<style type="text/css">' +
                            '    .CodeMirror{' +
                            '        height:600px;' +
                            '    }' +
                            '</style>',
                            '<div id="yamlSource" style="width: 700px;height:600px;float: left;margin-right: 10px;border: 1px solid #ddd"></div>',
                            '<div id="yamlResult" style="width: 600px;height:600px;float: left;border: 1px solid #ddd"></div>',
                        '</div>',
                    '</div>',
                '</div>'
            ].join("");
            return html;
        };
        this.init = function(){
            var that = this;
            webUtil.copyConfig(that,that.moduleKey);

            webUtil.createScript('jslib/yaml/js/codemirror.js', function () {
                webUtil.createScript('jslib/yaml/js/yaml.js', function () {
                    webUtil.createScript('jslib/yaml/js/js-yaml.min.js', function () {
                        var yamlSourceCodeMirror = CodeMirror(document.getElementById('yamlSource'), {
                            value: '',
                            mode: 'yaml',
                            lineNumbers: true,     // 显示行数
                            indentUnit: 1,         // 缩进单位为2
                            styleActiveLine: true, // 当前行背景高亮
                            matchBrackets: true,   // 括号匹配
                            lineWrapping: true,    // 自动换行
                            tabSize: 2,
                        });

                        var yamlResultCodeMirror = CodeMirror(document.getElementById('yamlResult'), {
                            value: '',
                            mode: 'yaml',
                            lineNumbers: true,     // 显示行数
                            indentUnit: 1,         // 缩进单位为2
                            styleActiveLine: true, // 当前行背景高亮
                            matchBrackets: true,   // 括号匹配
                            lineWrapping: true,    // 自动换行
                            tabSize: 2,
                        });

                        // 监听输入值变化
                        yamlSourceCodeMirror.on('change', (cm) => {
                            var parseYaml=parseYamlFn(cm.doc.getValue())
                            if(!!parseYaml.isYaml){
                                var json = JSON.stringify(parseYaml.isYaml, null, 2);
                                yamlResultCodeMirror.setValue(json);
                            }else {
                                console.log(parseYaml.errorMessage)
                                yamlResultCodeMirror.setValue(parseYaml.errorMessage);
                            }
                        })

                        const parseYamlFn = (str) => {
                            let isYaml = false;
                            let errorMessage = '';
                            try {
                                isYaml = jsyaml.load(str)
                            } catch(e) {
                                errorMessage = e && e.message;
                            }
                            return {
                                isYaml, errorMessage
                            };
                        }
                    })
                })
            })

        };
    };
    var cs = new Class();
    exports(cs.MODELNAME,cs);
});