{% extends 'app_doc/editor/create_base_2.html' %}
{% load static %}
{% load i18n %}
{% block title %}修改文档{% endblock %}
{% block editor_type %}修改文档{% 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>

        <div class="layui-col-md12" style="margin-bottom: 10px;">
            <div class="layui-input-inblock">
              <select name="pro_id" lay-verify="required"  lay-filter="project" id="project">
                <option value="{{ project.id }}">{{ project.name }}</option>
              </select>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-md12" style="margin-bottom: 10px;">
                <span>点击文档树选择上级（可选）或</span>
                <button class="layui-btn layui-btn-xs layui-btn-normal" id="clearParentDoc">取消上级</button>
                <input type="text" id="parent-doc" hidden> 
            </div>
            <div class="layui-col-md12">
                <input type="number" class="layui-input" placeholder="输入文档排序值，默认99" id="sort" value="{{doc.sort}}">
            </div>
        </div>

        <div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">文档结构树</h2>
                <div class="layui-colla-content layui-show" style="max-height: 400px;overflow: hidden;overflow-y: scroll;overflow-x: scroll;">
                    <div id="doc-tree"></div>
                </div>
            </div>
        </div>
        <hr>

        <!-- 标签输入框 -->
        <div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">标签</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
                        <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="{{doc_tags}}" placeholder="输入标签名">
                    </div>
                </div>
            </div>
        </div>

        <!-- 文档下级目录展开设置 -->
        <div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">下级目录</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
                        {%if doc.open_children %}
                        <input type="radio" name="open-children" value="true" title="展开" checked>
                        <input type="radio" name="open-children" value="false" title="收起">
                        {% else %}
                        <input type="radio" name="open-children" value="true" title="展开">
                        <input type="radio" name="open-children" value="false" title="收起" checked>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 发布按钮 -->
        <div class="layui-collapse" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">发布</h2>
                <div class="layui-colla-content layui-show">
                    <div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
                        <div class="layui-row" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-primary layui-btn-fluid mrdoc-btn-default" onclick="saveDoc()" title="保存当前内容为草稿文档">
                                <i class="fa fa-save"></i> 保存为草稿
                            </button>
                        </div>
                
                        <div class="layui-row" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="createDoc()" id="create_doc" title="发布当前内容">
                                <i class="fa fa-save"></i> 发布文档
                            </button>
                        </div>
                
                        <div class="layui-row" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-warm layui-btn-fluid" onclick="moveDoc()" title="复制或移动此文档到其他文集"><i class="fa fa-copy"></i> 复制/移动文档</button>
                        </div>
                    
                        <div class="layui-row" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-danger layui-btn-fluid" onclick="delDoc()" title="删除此文档"><i class="fa fa-trash"></i> 删除文档</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </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_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("获取下级文档失败！")
                }
            });
        });
        //发布文档
        createDoc = function(){
            $('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(),
                'parent_doc':$("#parent-doc").val(),
                'doc_tag':$("#tagsinputval").val(),
                'doc_name':$("#doc-name").val(),
                'content':editor.getHTML(),
                'pre_content':editor.getMarkdown(),
                'sort':$("#sort").val(),
                'status':1,
                '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') // 清空文档缓存
                    layer.msg('发布成功，即将跳转',function(){
                        md_changed = false;
                        window.location.href = "{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}";
                    });
                }else{
                    //修改失败
                    layer.msg('保存失败');
                    $('button.layui-btn').attr("disabled",false);
                    $('button.layui-btn').removeClass('layui-btn-disabled');
                }
            });
        };
        //保存草稿
        saveDoc = function(){
            $('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':0,
                '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') // 清空文档缓存
                    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');
                }
            });
        };
        //选择文档模板
        $("#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 %}

{% block custom_div %}
<!-- 模板div块 -->
<div class="doctemp-list" id="doctemp-list" style="display: none;width: 500px;">
    <div style="margin: 10px 0 0 10px;">
        <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'create_doctemp' %}" target="_blank">创建新模板</a>
        <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_doctemp' %}" target="_blank">管理文档模板</a>
    </div>
    <table class="layui-table" style="margin: 10px;">
      <colgroup>
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>模板名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for temp in doctemp_list %}
        <tr>
          <td>{{ temp.name }}</td>
          <td>{{ temp.create_time }}</td>
          <td>
              <a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-sm" onclick="insertTemp('{{temp.id}}');">选择模板</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
</div>

<!-- 文档历史div块 -->
<div class="history-list" id="history-list" style="display: none;width: 500px;">
    <table class="layui-table" style="margin: 10px;" lay-size='sm'>
      <thead>
        <tr>
          <th>创建时间</th>
          <th>用户</th>
          <th>对比</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for history in history_list %}
        <tr>
          <td>{{ history.create_time }}</td>
          <td>{{ history.create_user }}</td>
          <td>
              <a href="{% url 'diff_doc' history.doc.id history.id %}" class="layui-btn layui-btn-primary layui-btn-sm" target="_blank">查看版本差异</a>
          </td>
          <td>
              <a href="javascript:void(0);" class="layui-btn layui-btn-normal layui-btn-sm" onclick="insertHistory('{{history.doc.id}}','{{history.id}}');">恢复此版本</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
</div>

<!-- 移动文档div块 -->
<div class="layui-form" id="move-project" style="display: none;width: 400px;height: 500px;" lay-filter='move-projects'>
    <div class="layui-col-md12" style="margin: 10px;">
        <div class="layui-form-item">
            <!-- <label class="layui-form-label">操作类型</label> -->
            <div class="layui-input-block" style="margin-left: 0px;">
              <input type="radio" name="move-type" value="0" title="复制" checked>
              <input type="radio" name="move-type" value="1" title="移动">
              <input type="radio" name="move-type" value="2" title="移动（含下级文档）">
            </div>
          </div>
          
        <input id="move-parent-id" hidden value="0" />
        <div class="layui-input-inblock">
          <select name="move_pro_id"  lay-filter="moveProject" id="moveProject">
            <option value="">请选择一个文集（必选）</option>
              <!-- 自己的文集 -->
              <optgroup label="自有文集" id="self-project">
              {% for p in project_list %}
                  {% if p.role == 1 %}
                  <option value="{{ p.id }}">[私密]《{{ p.name }}》</option>
                  {% elif p.role == 2 %}
                  <option value="{{ p.id }}" >[指定用户]《{{ p.name }}》</option>
                  {% elif p.role == 3 %}
                  <option value="{{ p.id }}" >[访问码]《{{ p.name }}》</option>
                  {% else %}
                  <option value="{{ p.id }}" >[公开]《{{ p.name }}》</option>
                  {% endif %}
              {% endfor %}
              </optgroup>
              <!-- 协作的文集 -->
              {% if colla_project_list.count > 0 %}
              <optgroup label="协作文集">
              {% for p in colla_project_list %}
                    <option value="{{ p.project.id }}">[协作]《{{ p.project.name }}》</option>
              {% endfor %}
              </optgroup>
              {% endif %}
          </select>
        </div>
    </div>
    <div  class="layui-col-md12" style="max-height: 380px;overflow: hidden;overflow-y: scroll;overflow-x: scroll;">
        <div id="move-doc-tree"></div>
    </div>
    <div class="layui-col-md12" style="margin: 10px;">
        <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="submitMoveDoc()">确认操作</button>
    </div>
    <div class="layui-col-md12" style="margin: 10px;">
        <span style="font-size: 12px;color:mediumvioletred;">警告：MrDoc仅支持3级目录显示，若移动的下级文档层级在目标文集中超过3层将不会显示在文集目录中</span>
    </div>
</div>
{% endblock %}