{% extends 'app_doc/create_base.html' %}
{% load staticfiles %}
{% block title %}修改文档{% endblock %}
{% block subtitle %}修改文档{% 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 content %}
    <div class="create-doc-form">
        <div class="layui-form">
            <label class="doc-form-label">标题</label>
            <div class="layui-input-inline">
              <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题" value="{{ doc.name }}" class="layui-input" >
            </div>
            <label class="doc-form-label">文集</label>
            <div class="layui-input-inline">
              <select name="pro_id" lay-verify="required"  lay-filter="project" id="project" disabled>
                <option value="{{ project.id }}">{{ project.name }}</option>
              </select>
            </div>
            <label class="doc-form-label">上级文档</label>
            <div class="layui-input-inline">
              <select name="parent_id" lay-verify="required" id="parent-doc">
                  <option value="0"></option>
              </select>
            </div>
            <label class="doc-form-label">排序</label>
            <div class="layui-input-inline">
              <input class="layui-input" placeholder="99" style="width:50px;" name="sort" id="sort" value="{{doc.sort}}"/>
            </div>
            <label class="doc-form-label">
                <button class="layui-btn layui-btn-primary layui-btn-sm" id="sel-doctemp">插入模板</button>
            </label>
            <label class="doc-form-label">
                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="saveDoc()">保存草稿</button>
            </label>
            <label class="doc-form-label">
                <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="createDoc()">发布文档</button>
            </label>
        </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(){
            var doc_parent_id = {{ doc.parent_doc }};
           $.post('{% url 'get_pro_doc' %}',{'pro_id':$("#project").val()},function(r){
                if(r.status){
                    //解析文集的下级文档
                    for(let i in r.data) {
                        console.log(doc_parent_id,r.data[i][2])
                        if(r.data[i][0] == doc_parent_id){
                            $("#parent-doc").append("<option value='"+r.data[i][0]+"' selected>"+r.data[i][3]+r.data[i][1]+"</option>")
                        }else{
                            $("#parent-doc").append("<option value='"+r.data[i][0]+"'>"+r.data[i][3]+r.data[i][1]+"</option>")
                        }
                    };
                    form.render();
                }else{
                    layer.msg("获取下级文档失败！")
                }
            });
        });
        //发布文档
        createDoc = function(){
            var data = {
                'doc_id':{{ doc.id }},
                'project':$("#project").val(),
                'parent_doc':$("#parent-doc").val(),
                'doc_name':$("#doc-name").val(),
                'content':editor.getHTML(),
                'pre_content':editor.getMarkdown(),
                'sort':$("#sort").val(),
            }
            $.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
                if(r.status){
                    //修改成功
                    layer.msg('保存成功，即将跳转',function(){
                        window.location.href = "{% url 'doc' pro_id=doc.top_doc doc_id=doc.id %}";
                    });
                }else{
                    //修改失败
                    layer.msg('保存失败');
                }
            });
        };
        //保存文档草稿
        saveDoc = function(){
            var data = {
                'doc_id':{{ doc.id }},
                'project':$("#project").val(),
                'parent_doc':$("#parent-doc").val(),
                'doc_name':$("#doc-name").val(),
                'content':editor.getHTML(),
                'pre_content':editor.getMarkdown(),
                'sort':$("#sort").val(),
                'status':0
            }
            $.post("{% url 'modify_doc' doc_id=doc.id %}",data,function(r){
                if(r.status){
                    //修改成功
                    layer.msg('保存成功',function(){
                        window.location.href = "{% url 'modify_doc' doc.id %}";
                    });
                }else{
                    //修改失败
                    layer.msg('保存失败');
                }
            });
        };
        //选择文档模板
        $("#sel-doctemp").click(function(){
            layer.open({
              type: 1,
                id:'temp-div',
              content: $('#doctemp-list'),
                area:['530px','300px'],
            });
        });
        //插入模板
        insertTemp = function(doctemp_id){
            $.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
                if(r.status){
                    editor.insertValue(r.data);
                    layer.closeAll()
                }else{
                    layer.msg(r.data)
                }
            });
        };
    </script>
{% endblock %}

{% block custom_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" href="{% url 'create_doctemp' %}" target="_blank">创建新模板</a>
        <a class="layui-btn layui-btn-normal" 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);" onclick="insertTemp('{{temp.id}}');">选择模板</a>
{#              <a href="javascript:void(0);" onclick="modifyTemp();">修改</a>#}
{#              <a href="javascript:void(0);" onclick="delTemp();">删除</a>#}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
</div>
{% endblock %}