{% extends 'app_doc/editor/create_base_2.html' %}
{% load static %}
{% load i18n %}
{% block title %}修改文档{% endblock %}

{% block custom_style %}
<style>
        ul li{
            list-style:disc;
        }
        ul > li > ul > li{
            list-style-type: circle;
        }
        ol li{
            list-style-type: decimal;
        }
    </style>
{% endblock %}

{% block head_toolbar %}

<a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
    <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">新建文档</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}?pid={{project.id}}" target="_blank">
    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文档</span>
</a>
<a class="btn pull-left" aria-label="" href="{% url 'manage_project' %}" target="_blank">
    <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理文集</span>
</a>
{% endblock %}

{% block left_opera %}
<div class="layui-form" style="padding:0 10px 10px 10px;">
    <div class="layui-row">
        <div class="doc-form-label" style="margin-bottom: 10px;">
            {% if doc.status == 0 %}
            <strong>*当前文档状态：草稿</strong>
            {% elif doc.status == 1 %}
            <strong>*当前文档状态：已发布 </strong>
            {% endif %}
        </div>

        <div class="doc-form-label" style="margin-bottom: 10px;">
            <a class="layui-btn layui-btn-xs layui-btn-normal" target="_blank" href="{% url 'doc' doc.top_doc doc.id %}" style="background-color: #2176ff;">
                <i class="fa fa-book"></i> 查看
            </a>
            <button class="layui-btn layui-btn-xs layui-btn-normal" id="doc-history">
                <i class="fa fa-history"></i> 历史
            </button>
            <button class="layui-btn layui-btn-xs layui-btn-normal" id="doc-cache-btn">
                <i class="fa fa-history"></i> 缓存
            </button>
        </div>

        <div class="layui-col-md12" style="margin-bottom: 10px;">
            <label class="doc-form-label" style="margin-right:0px;">
                <button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="sel-doctemp" title="插入文档模板">
                    <i class="fa fa-clipboard"></i> 选择模板
                </button>
            </label>

            <label class="doc-form-label" style="margin-right:0px;">
                <input type="file" id="insert-local-file" onchange="insertLocalFile(this)" style="display:none;">
                <button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="sel-local" onclick="selectLocalFile()" title="插入本地文本文件内容">
                    <i class="fa fa-upload"></i> 导入文本
                </button>
            </label>
        </div>

        {% include 'app_doc/editor/tpl_left_modify_custom.html' %}
    </div>
    

</div>
{% endblock %}

{% block content %}
    <div class="create-doc-form">
        <div class="layui-form">
            <!-- 标题 -->
            <div class="layui-input-block" style="margin-left:0;">
                <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input">
            </div>
            <br>
        </div>
    </div>
    <div id="editor-md">
        <textarea style="display:none;">{{ doc.pre_content }}</textarea>
        <textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
    </div>
{% endblock %}

{% block custom_div %}
    {% include 'app_doc/editor/tpl_editor_div_doc.html' %}
{% endblock %}

{% block custom_script %}
<script>
    //获取文档数和上级文档信息
    $(function(){
        layer.load(1);
        var doc_parent_id = '{{ doc.parent_doc }}';
        $.post("{% url 'get_pro_doc_tree' %}",{'pro_id':$("#project").val()},function(r){
            if(r.status){
                layer.closeAll("loading");
                var doc_tree = tree.render({
                    elem:"#doc-tree",
                    id:'docTree',
                    onlyIconControl:true,
                    data:r.data,
                    click: function(obj){
                        if(obj.data.level != 3){
                            console.log(obj.data.id,doc_parent_id)
                            if(obj.data.id != '{{ doc.id }}' ){
                                $('#parent-doc').val(obj.data.id);// 设置上级文档
                                $("div.layui-tree-set").each(function(i){
                                    var $me = $(this)
                                    if($me.data('id') == obj.data.id){
                                        // console.log('点击了')
                                        layer.msg("你选择了上级文档："+obj.data.title)
                                        $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
                                    }else{
                                        $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
                                    }
                                });
                            }else{
                                layer.msg("不可选择自己作为上级")
                            };
                            
                        }else{
                            layer.msg("第三级文档不能作为上级文档")
                        };
                        
                    }
                });
                $('#parent-doc').val(doc_parent_id);// 设置上级文档
                $("div.layui-tree-set").each(function(i){
                    var $me = $(this)
                    if($me.data('id') == doc_parent_id){
                        $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
                    }else{
                        $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
                    }
                });
            }else{
                layer.msg("获取下级文档失败！")
            }
        });
    });
    // 修改文档
    modifyDoc = function(status){
        $('button.layui-btn').attr("disabled",true);
        $('button.layui-btn').addClass('layui-btn-disabled');
        layer.load(1);
        var data = {
            'doc_id':'{{ doc.id }}',
            'project':$("#project").val(),
            'doc_tag':$("#tagsinputval").val(),
            'parent_doc':$("#parent-doc").val(),
            'doc_name':$("#doc-name").val(),
            'content':editor.getHTML(),
            'pre_content':editor.getMarkdown(),
            'sort':$("#sort").val(),
            'status':status,
            'open_children':$('input:radio[name="open-children"]:checked').val(),
        }
        $.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
            layer.closeAll("loading");
            if(r.status){
                //修改成功
                window.localStorage.removeItem('mrdoc_doc_cache') // 清空文档缓存
                if(status === 1){
                    layer.msg('发布成功，即将跳转',function(){
                        md_changed = false;
                        window.location.href = "{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}";
                    });
                }else{
                    //修改成功
                    layer.msg('保存成功',function(){
                        md_changed = false;
                        window.location.href = "{% url 'modify_doc' doc.id %}";
                    });
                }
            }else{
                //修改失败
                layer.msg('保存失败');
                $('button.layui-btn').attr("disabled",false);
                $('button.layui-btn').removeClass('layui-btn-disabled');
            }
        });
    };
    $("#modify_save_doc").click(function(){
        modifyDoc(0);
    })
    $("#modify_pub_doc").click(function(){
        modifyDoc(1);
    })
    //选择文档模板
    $("#sel-doctemp").click(function(){
        layer.open({
            type: 1,
            id:'temp-div',
            content: $('#doctemp-list'),
            area:['530px','400px'],
        });
    });
    //插入模板
    insertTemp = function(doctemp_id){
        layer.load();
        $.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
            if(r.status){
                editor.insertValue(r.data);
                layer.closeAll()
            }else{
                layer.closeAll("loading");
                layer.msg(r.data)
            }
        });
    };
    //插入本地文本文件
    function insertLocalFile(input) {
        var file = input.files[0];
        //filename = file.name.split(".")[0]; // 文件名
        //支持chrome IE10
        if (window.FileReader) {
            var reader = new FileReader();
            reader.onload = function() {
                console.log(this.result);
                editor.insertValue(this.result);
            }
            reader.readAsText(file);
        }
        //支持IE 7 8 9 10
        else if (typeof window.ActiveXObject != 'undefined'){
            var xmlDoc;
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(input.value);
            console.log(xmlDoc.xml);
            editor.insertValue(xmlDoc.xml);
        }
        //支持FF
        else if (document.implementation && document.implementation.createDocument) {
            var xmlDoc;
            xmlDoc = document.implementation.createDocument("", "", null);
            xmlDoc.async = false;
            xmlDoc.load(input.value);
            console.log(xmlDoc.xml);
            editor.insertValue(xmlDoc.xml);
        } else {
            alert('error');
        }
    };
    //选择本地文本文件
    function selectLocalFile(){
        $("#insert-local-file").trigger("click");
    };
    // 查看历史记录
    $("#doc-history").click(function(){
        layer.open({
            type: 1,
            title:'查看当前文档的历史版本',
            id:'history-div',
            content: $('#history-list'),
            area:['530px','300px'],
        });
    });
    //清除所选上级文档
    $("#clearParentDoc").click(function(){
        $('#parent-doc').val("");
        $("span.layui-tree-txt").each(function(i){
            var $me = $(this)
            $me.removeClass('selected-parent-doc')
        });
    });
    // 插入历史版本
    insertHistory = function(doc_id,history_id){
        layer.load(1);
        var url = "{% url 'diff_doc' 0 1 %}";
        url = url.replace(0,doc_id).replace(1,history_id)
        $.post(url,function(r){
            layer.closeAll("loading");
            if(r.status){
                editor.setMarkdown(r.data);
            }else{
                layer.msg(r.data)
            }
        });
    };
    // 删除文档
    delDoc = function(doc_id){
        layer.open({
            type:1,
            title:'删除文档',
            area:'300px;',
            id:'delPro',//配置ID
            content:'<div style="margin-left:10px;">警告：此操作将删除此文档！</div>',
            btn:['确定','取消'], //添加按钮
            btnAlign:'c', //按钮居中
            yes:function (index,layero) {
                layer.load(1);
                data = {
                    'doc_id':'{{ doc.id }}',
                };
                $.post("{% url 'del_doc' %}",data,function(r){
                    layer.closeAll('loading')
                    if(r.status){
                        //修改成功
                        layer.msg("文档已删除，即将跳转至文集")
                        // window.location.reload();
                        window.location.href = "{% url 'pro_index' doc.top_doc %}"
                        //layer.close(index)
                    }else{
                        //修改失败，提示
                        // console.log(r)
                        layer.msg(r.data)
                    }
                })
            },
        });
    };
    // 移动文档
    moveDoc = function(doc_id){
        layer.open({
            type:1,
            title:'复制或移动此文档到指定文集',
            id:'moveDoc',
            area:'450px;',
            content:$('#move-project'),
            success:function(layero,index){
                form.render(null, 'move-projects'); // 重新渲染弹出框的表单
                // 移动文集 - 侦听选择文集 - 获取文集的文档
                form.on('select(moveProject)', function(data){
                    // console.log(data.value); //得到被选中的值
                    $('#move-parent-id').val(0);
                    //获取文集的下级文档
                    $.post("{% url 'get_pro_doc_tree' %}",{'pro_id':data.value},function(r){
                        if(r.status){
                            var doc_tree = tree.render({
                                elem:"#move-doc-tree",
                                id:'moveDocTree',
                                onlyIconControl:true,
                                data:r.data,
                                text: {
                                    defaultNodeName: '未命名' //节点默认名称
                                    ,none: '文集暂无文档' //数据为空时的提示文本
                                    },
                                click: function(obj){
                                    if(obj.data.level != 3){
                                        $('#move-parent-id').val(obj.data.id);// 设置上级文档
                                        $("div.layui-tree-set").each(function(i){
                                            var $me = $(this)
                                            if($me.data('id') == obj.data.id){
                                                // console.log('点击了')
                                                layer.msg("选择了上级文档："+obj.data.title)
                                                $me.find('span.layui-tree-txt').first().addClass('selected-parent-doc')
                                            }else{
                                                $me.find('span.layui-tree-txt').first().removeClass('selected-parent-doc')
                                            }
                                        });
                                    }else{
                                        layer.msg("第三级文档不能作为上级文档")
                                    }
                                    
                                }
                            });
                        }else{
                            layer.msg("获取下级文档失败！")
                        }
                    });
                });
            },
        })
    };
    // 提交移动文档
    submitMoveDoc = function(){
        var data = {
            move_type:$("input:radio[name='move-type']:checked").val(),
            pro_id:$("#moveProject").val(),
            parent_id:$("#move-parent-id").val(),
            doc_id:'{{doc.id}}'
        };
        if(data.pro_id === ''){
            layer.msg("必须选择一个文集")
            return
        }
        console.log(data)
        layer.load(1)
        $.post("{% url 'move_doc' %}",data,function(r){
            layer.closeAll('loading')
            if(r.status){
                window.location.href = '/project-'+r.data.pro_id + '/doc-' + r.data.doc_id + '/'
            }else{
                layer.msg(r.data)
            }
        });

    };
    // 查看本地文档缓存
    $("#doc-cache-btn").click(function(){
        var editor_cache = window.localStorage.getItem('mrdoc_doc_cache') // 获取文档缓存内容
        if(editor_cache === null){
            var editor_cache_cnt = 0
        }else{
            var editor_cache_cnt = editor_cache.replace(/\s+|[\r\n]/g,"").length
        }
        if(editor_cache_cnt > 5){ // 文档缓存去除空格换行后长度大于5
            console.log("存在文档缓存")
            $("#doc-cache-content").val(editor_cache)
            layer.open({
                title:"浏览器文档缓存",
                type:1,
                id:'doc-cache',
                area:['500px','500px'],
                content:$('#doc-cache-div'),
                btn:['使用缓存',"删除缓存"],
                success : function(index, layero) { // 成功弹出后回调
                    form.render();
                },
                yes:function(index, layero){
                    editor.setValue(editor_cache)
                    window.localStorage.removeItem('mrdoc_doc_cache')
                    layer.closeAll()
                    autoCacheDoc();
                },
                btn2:function(index,layero){
                    window.localStorage.removeItem('mrdoc_doc_cache')
                    layer.closeAll()
                }
            })
        }else{
            layer.msg("暂无本地缓存")
        }
    })

</script>
{% endblock %}