/**
 * markdown编辑器页面
 * @author weidy
 * @date 2021-11-29
 */
layui.define(['layer','element','form','table','dynamicCondition','upload' ],function(exports){
    var webUtil = $webUtil;
    var Class = function(){
        this.MODELNAME = "platform/objectService/markdown";
        this.moduleKey = "markdown";
        this.backPath =  configData.adminServicePath;
        this.url = {
            controller:'helpDocumentController/',
            createOrGetContentByOid:'createOrGetContentByOid',
            saveContentByOid:'saveContentByOid',
            uploadPic:'uploadPic',
            gridImageInfo:'gridImageInfo'
        };
        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;">',
                            this.getmarkdownHtml(),
                        '</div>',
                    '</div>',
                '</div>'
            ].join("");
            return html;
        };
        this.getmarkdownHtml=function (){
            var that=this;
            return '    <link href="style/css/markdown.min.css" rel="stylesheet" type="text/css"/>' +
                '<style type="text/css">\n' +
                '        html, body {\n' +
                '            margin: 0;\n' +
                '            padding: 0;\n' +
                '            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
                '            color: #333;\n' +
                '            background-color: #fbfbfb;\n' +
                '            height: 100%;\n' +
                '        }\n' +
                '        textarea {\n' +
                '            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;\n' +
                '            font-size: 12px;\n' +
                '            resize: none;\n' +
                '        }\n' +
                '        header {\n' +
                '            padding-top: 10px;\n' +
                '            display: flex;\n' +
                '            height: 58px;\n' +
                '        }\n' +
                '        header h1 {\n' +
                '            margin: 0;\n' +
                '        }\n' +
                '        .containers {\n' +
                '            display: flex;\n' +
                '            height: calc(100vh - 180px);\n' +
                '        }\n' +
                '        .container {\n' +
                '            width: 50%;\n' +
                '            padding: 5px;\n' +
                '            display: flex;\n' +
                '            flex-direction: column;\n' +
                '            height: 100%;\n' +
                '            box-sizing: border-box;\n' +
                '        }\n' +
                '        .pane, .inputPane {\n' +
                '            margin-top: 5px;\n' +
                '            padding: 0.6em;\n' +
                '            border: 1px solid #ccc;\n' +
                '            overflow: auto;\n' +
                '            flex-grow: 1;\n' +
                '            flex-shrink: 1;\n' +
                '            flex:1;'+
                '        }\n' +
                '        .btns{\n' +
                '            display: flex;\n' +
                '        }\n' +
                '        .btns input{\n' +
                '            margin-right: 20px;\n' +
                '        }\n' +
                '        .img_content ul{\n' +
                '            list-style: none;\n' +
                '            margin: 10px 20px;\n' +
                '            padding: 0;\n' +
                '        }\n' +
                '        .img_content li{\n' +
                '            display: flex;\n' +
                '            align-items: center;\n' +
                '            padding: 10px 0;\n' +
                '            border-bottom: 1px solid #efefef;\n' +
                '        }\n' +
                '        .img_content li img{\n' +
                '            width: 150px;\n' +
                '            margin-right: 20px;\n' +
                '        }' +
                '    </style>' +
                '<div class="containers" id="containers'+that.sourceData.oid+'">\n' +
                '        <div class="container" style="width: 40%">\n' +
                '            <div class="btns">\n' +
                '                <input type="button" id="clear'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="清除" style="width: 80px;height: 25px"/>\n' +
                '                <input type="button" id="save'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="保存" style="width: 80px;height: 25px"/>\n' +
                '                <input type="button" id="btnimages'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" value="已上传图片" style="width: 80px;height: 25px"/>\n' +
                '                <input type="button" id="uploadmdimg'+that.sourceData.oid+'" name="uploader-input" oid="'+that.sourceData.oid+'" class="uploader-file" value="上传图片" style="width: 80px;height: 25px">\n' +
                '            </div>\n' +
                '            <textarea  id="markedSource'+that.sourceData.oid+'" class="inputPane" oid="'+that.sourceData.oid+'"></textarea>\n' +
                '        </div>\n' +
                '        <div class="container" style="width: 60%">\n' +
                '            <select id="outputType'+that.sourceData.oid+'" oid="'+that.sourceData.oid+'" style="width: 150px;height: 25px;visibility: hidden">\n' +
                '                <option value="markedResult">markedResult</option>\n' +
                '                <option value="html">HTML Source</option>\n' +
                '                <option value="lexer">Lexer Data</option>\n' +
                '            </select>\n' +
                '            <div id="markedResult'+that.sourceData.oid+'" class="pane"><div class="markdownDiv"></div></div>\n' +
                '            <textarea id="html'+that.sourceData.oid+'" class="pane" readonly="readonly" style="display: none;"></textarea>\n' +
                '            <textarea id="lexer'+that.sourceData.oid+'" class="pane" readonly="readonly" style="display: none;"></textarea>\n' +
                '        </div>\n' +
                '    </div>'
        };
        this.init = function(){
            var that = this;
            webUtil.copyConfig(that,that.moduleKey);
            this.renderMD()
        };
        this.renderMD=function (){
            var that=this;
            var rendererMD = new marked.Renderer();
            marked.setOptions({
                renderer: rendererMD,
                gfm: true,
                tables: true,
                breaks: false,//允许回车换行。该选项要求 gfm 为true
                pedantic: false,
                sanitize: false,//不输出HTML
                smartLists: true,
                smartypants: false,
                highlight: function (code) {
                    return hljs.highlightAuto(code).value;
                }
            });

            $webUtil.ajax('get',this.url.controller+this.url.createOrGetContentByOid,{oid:this.sourceData.oid},function (result) {
                if (result.success) {
                    if (result.obj) {
                        $('#markedSource'+that.sourceData.oid).val(result.obj)
                        document.getElementById('markedResult'+that.sourceData.oid).firstChild.innerHTML = marked(result.obj);

                        var lexed = marked.lexer(result.obj);
                        var lexedList = that.jsonString(lexed);
                        var parsed = marked.parser(lexed);
                        document.getElementById('lexer'+that.sourceData.oid).value=lexedList
                        document.getElementById('html'+that.sourceData.oid).value=parsed
                    }
                } else {
                    webUtil.showErrorMsg(result.msg);
                }
            },function (xhr,error) {
                $webUtil.showDebugMsg(error);
            },this.backPath);
            this.bind()
            this.upload(that.sourceData.oid);
        }

        this.bind=function (){
            var that=this;
            // 监听输入值变化
            $('#markedSource'+that.sourceData.oid).on('keyup', function(cm){
                var oid=$(this).attr('oid')
                document.getElementById('markedResult'+oid).firstChild.innerHTML = marked(cm.currentTarget.value);

                var lexed = marked.lexer(cm.currentTarget.value);
                var lexedList = that.jsonString(lexed);
                var parsed = marked.parser(lexed);
                document.getElementById('lexer'+oid).value=lexedList
                document.getElementById('html'+oid).value=parsed
            })

            $('#clear'+that.sourceData.oid).on('click',function (e){
                var oid=$(this).attr('oid')
                document.getElementById('markedSource'+oid).value = '';
                document.getElementById('markedResult'+oid).firstChild.innerHTML= '';
            })
            $('#save'+that.sourceData.oid).on('click',function (e){
                var oid=$(this).attr('oid')
                $webUtil.ajax('post',that.url.controller+that.url.saveContentByOid,{oid:oid,content:$('#markedSource'+oid).val()},function(result){
                    if(result.success){
                        $webUtil.showMsgFromResult(result,"保存成功");
                    }else{
                        $webUtil.showErrorMsg(result.msg);
                    }
                },function(xhr,err){
                    $webUtil.showErrorMsg("请求服务出现了错误，可能服务器未开启");
                },that.backPath);
            })
            $('#outputType'+that.sourceData.oid).on('change',function (e){
                var oid=$(this).attr('oid')
                var panes=$('#containers'+oid+' .pane')
                for(var i = 0; i< panes.length; i++) {
                    if (panes[i].id === e.currentTarget.value+oid) {
                        panes[i].style.display = '';
                    } else {
                        panes[i].style.display = 'none';
                    }
                }
            })

            //显示已上传图片
            $('#btnimages'+that.sourceData.oid).on('click',function (){
                var oid=$(this).attr('oid')
                var imglayer=layer.open({
                    title:'已上传图片',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['1200px', '600px'], //宽高
                    content: '<div class="img_content" id="img_content'+oid+'"><ul></ul><input type="text" style="opacity: 0;width: 1px" id="imgCopy'+oid+'" value="" /></div>',
                    success: function (layero) {
                        $webUtil.ajax('get',that.url.controller+that.url.gridImageInfo,{'conditionMap["ownbizOid"]':oid},function (result) {
                            if (result.success) {
                                if (result.data && result.data.length>0) {
                                    var list=[]
                                    var imgJson=[]
                                    $.each(result.data,function (i,item){
                                        item.url=that.backPath+item.url;
                                        list.push('<li>' +
                                                '<img src="'+item.url+'" alt=""/>' +
                                                '<div>' +item.url+
                                                    '<button class="btn btn-img-copy" imgsrc="'+item.url+'" style="margin-left: 20px">复制图片地址</button>' +
                                                    '<button class="btn btn-imgDiv-copy" imgsrc="'+item.url+'" style="margin-left: 20px">复制img标签</button>' +
                                                '</div>' +
                                            '</li>');
                                        imgJson.push({
                                            "alt": item.url,
                                            "pid": item.oid, //图片id
                                            "src": item.url, //原图地址
                                            "thumb":item.url //缩略图地址
                                        })
                                    })
                                    $('#img_content'+oid+' ul').append(list)
                                    $('#img_content'+oid+' img').on('click',function (){
                                        layer.photos({
                                            photos: {
                                                "title": "", //相册标题
                                                "id": 123, //相册id
                                                "start": 0, //初始显示的图片序号，默认0
                                                "data":imgJson
                                            }
                                            ,shift:5
                                        });
                                    })
                                    //复制按钮
                                    $('#img_content'+oid+' .btn-img-copy').on('click', function() {
                                        var input = document.getElementById('imgCopy'+oid);
                                        input.value='![avatar]('+$(this).attr('imgsrc')+')'
                                        $('#markedSource'+oid).val($('#markedSource'+oid).val()+input.value);
                                        document.getElementById('markedResult'+oid).firstChild.innerHTML = marked( $('#markedSource'+oid).val());
                                        // 选中文本
                                        input.select();
                                        // 执行浏览器复制命令
                                        document.execCommand("copy");
                                        //alert("成功复制到剪切版！");
                                        layer.close(imglayer)
                                    })
                                    //复制div按钮
                                    $('#img_content'+oid+' .btn-imgDiv-copy').on('click', function() {
                                        var input = document.getElementById('imgCopy'+oid);
                                        input.value='<div style="text-align:center;margin:10px 0"><img src="'+$(this).attr('imgsrc')+'"/></div>'
                                        $('#markedSource'+oid).val($('#markedSource'+oid).val()+input.value);
                                        document.getElementById('markedResult'+oid).firstChild.innerHTML = marked( $('#markedSource'+oid).val());
                                        // 选中文本
                                        input.select();
                                        // 执行浏览器复制命令
                                        document.execCommand("copy");
                                        //alert("成功复制到剪切版！");
                                        layer.close(imglayer)
                                    })
                                }
                            } else {
                                webUtil.showErrorMsg(result.msg);
                            }
                        },function (xhr,error) {
                            $webUtil.showDebugMsg(error);
                        },that.backPath);



                    }
                });
            })

        }

        this.upload=function (oid){
            var that=this;
            //文件上传
            layui.upload.render({
                elem: '#uploadmdimg'+oid
                ,url: that.backPath+that.url.controller+that.url.uploadPic
                ,data: {ownbizOid:oid}
                ,acceptMime: 'image/*'
                ,done: function(result, index, upload){ //上传后的回调
                    if(result.success) {
                        $webUtil.showMsgFromResult(result, "图片上传成功");
                    }
                }
                ,accept: 'images'
            })
        }

        this.stringRepeat=function (char, times) {
            var s = '';
            for (var i = 0; i < times; i++) {
                s += char;
            }
            return s;
        }
        this.jsonString=function (input, level) {
            level = level || 0;
            if (Array.isArray(input)) {
                if (input.length === 0) {
                    return '[]';
                }
                var items = [],
                    i;
                if (!Array.isArray(input[0]) && typeof input[0] === 'object' && input[0] !== null) {
                    for (i = 0; i < input.length; i++) {
                        items.push(this.stringRepeat(' ', 2 * level) + this.jsonString(input[i], level + 1));
                    }
                    return '[\n' + items.join('\n') + '\n]';
                }
                for (i = 0; i < input.length; i++) {
                    items.push(this.jsonString(input[i], level));
                }
                return '[' + items.join(', ') + ']';
            } else if (typeof input === 'object' && input !== null) {
                var props = [];
                for (var prop in input) {
                    props.push(prop + ':' + this.jsonString(input[prop], level));
                }
                return '{' + props.join(', ') + '}';
            } else {
                return JSON.stringify(input);
            }
        }
    };
    var cs = new Class();
    exports(cs.MODELNAME,cs);
});