{% extends 'app_doc/create_base_vditor.html' %}
{% load static %}
{% block title %}新建文档 - Vditor编辑模式{% endblock %}
{% block editor_type %}新建文档{% 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="layui-btn-container" style="margin-bottom: 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>

                <!-- <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> -->

        </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="">请选择一个文集（必选）</option>
                <option value="-1">新建文集</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-row">
            <div class="layui-col-md12" style="margin-bottom: 10px;">
                <span>点击文档树选择上级（可选）或</span>
                <button class="layui-btn layui-btn-xs layui-btn-primary" 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">
            </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" 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">
                    <div class="layui-row layui-col-space5" style="padding: 5px;background-color: #fff;">
                        <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="" 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;">
                        <button class="layui-btn layui-btn-primary mrdoc-btn-default" onclick="saveDoc()" title="保存当前内容为草稿文档">
                            <i class="fa fa-save"></i> 保存为草稿
                        </button>
                        <button class="layui-btn layui-btn-normal" onclick="createDoc()" id="create_doc" title="发布当前内容">
                            <i class="fa fa-save"></i> 发布文档
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>
{% endblock %}

{% block content %}
    <div class="create-doc-form">
        <div class="layui-form">
            <!-- 标题 -->
            <div style="padding-bottom:10px;">
                <div class="layui-input-block" style="margin-left:0px;">
                  <input type="text" name="doc-name" id="doc-name" required lay-verify="required" placeholder="请输入文档标题……" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div id="editor-md" class="layui-col-xs12">
        <textarea style="display:none;"></textarea>
        <textarea class="editormd-html-textarea" name="$id-html-code"></textarea>
    </div>
{% endblock %}


{% block custom_script %}
<script>
    var tree = layui.tree;
    //选择文集
    form.on('select(project)', function(data){
        console.log('选择文集：',data.value); //得到被选中的值
        if(data.value == -1){ //新建文集
            layer.open({
                type:1,
                title:'新建文集',
                area:'300px;',
                id:'createPro',//配置ID
                content: $('#create-project-div'),
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    data = {
                        'pname':$("#pname").val(),
                        'desc':$("#desc").val(),
                        'role':$("#project-role").val(),
                    }
                    $.post("{% url 'create_project' %}",data,function(r){
                        if(r.status){
                            //创建成功，更新文集select
                            $("#self-project").append("<option value="+r.data.id+">《"+r.data.name+"》</option>");
                            form.render();
                            layer.close(index)
                        }else{
                            //创建失败，提示
                            console.log(r)
                        }
                    })
                },
            });
        }else{//获取文集的下级文档
            $.post("{% url 'get_pro_doc_tree' %}",{'pro_id':data.value},function(r){
                if(r.status){
                    var doc_tree = tree.render({
                        elem:"#doc-tree",
                        id:'docTree',
                        // showCheckbox:true,
                        onlyIconControl:true,
                        data:r.data,
                        text: {
                            defaultNodeName: '未命名' //节点默认名称
                            ,none: '文集暂无文档' //数据为空时的提示文本
                            },
                        click: function(obj){
                            //console.log(obj.data); //得到当前点击的节点数据
                            // console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                            // console.log(obj.elem); //得到当前节点元素
                            if(obj.data.level != 3){
                                $('#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("获取下级文档失败！")
                }
            });
        }
    });
    //带pid参数自动选择文集
    var sel_pro_list = $('dl.layui-anim dd');
    for(var i = 0;i < sel_pro_list.length; i++){
        if(sel_pro_list[i].getAttribute('lay-value') == '{{pid}}'){
            var sel_pro = 'dd[lay-value=' + sel_pro_list[i].getAttribute('lay-value') + ']';
            $('#project').siblings("div.layui-form-select").find('dl').find(sel_pro).click();
        }
    };
    //发布文档
    createDoc = function(){
        $('button.layui-btn').attr("disabled",true);
        $('button.layui-btn').addClass('layui-btn-disabled');
        var data = {
            'project':$("#project").val(),
            'parent_doc':$("#parent-doc").val(),
            'doc_name':$("#doc-name").val(),
            'doc_tag':$("#tagsinputval").val(),
            'content':editor.getHTML(),//获取editor解析的HTML
            'pre_content':editor.getValue(),
            'sort':$("#sort").val(),
            'open_children':$('input:radio[name="open-children"]:checked').val(),
        }
        console.log(data)
        if(data.doc_name == ""){
            layer.msg('请输入文档标题！');
            $('button.layui-btn').attr("disabled",false);
            $('button.layui-btn').removeClass('layui-btn-disabled');
        }
        else if(data.project == ""){
            layer.msg('请选择文集！');
            $('button.layui-btn').attr("disabled",false);
            $('button.layui-btn').removeClass('layui-btn-disabled');
        }
        else{
            //发布按钮设为禁用
            $("#create_doc").attr({"disabled":"disabled"});
            layer.load(); // 加载提示
            $.post("{% url 'create_doc' %}",data,function(r){
                if(r.status){
                    //创建成功
                    layer.closeAll("loading"); //关闭加载层
                    layer.msg('发布文档成功，即将跳转到文档页面',function(){
                        md_changed = false;
                        //跳转到发布的文档
                        window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
                    });
                }else{
                    //创建失败
                    layer.closeAll("loading"); //关闭加载层
                    layer.msg('发布文档失败:'+r.data);
                    //恢复按钮状态
                    $('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');
        var data = {
            'project':$("#project").val(),
            'parent_doc':$("#parent-doc").val(),
            'doc_name':$("#doc-name").val(),
            'doc_tag':$("#tagsinputval").val(),
            'content':editor.getHTML(),
            'pre_content':editor.getValue(),
            'sort':$("#sort").val(),
            'status':0,
            'open_children':$('input:radio[name="open-children"]:checked').val(),
        }
        console.log(data)
        if(data.doc_name == ""){
            layer.msg('请输入文档标题！');
            $('button.layui-btn').attr("disabled",false);
            $('button.layui-btn').removeClass('layui-btn-disabled');
        }
        else if(data.project == ""){
            layer.msg('请选择文集！');
            $('button.layui-btn').attr("disabled",false);
            $('button.layui-btn').removeClass('layui-btn-disabled');
        }
        else{
            layer.load(1);
            $.post("{% url 'create_doc' %}",data,function(r){
                if(r.status){
                    //保存成功
                    layer.closeAll("loading");
                    md_changed = false;
                    layer.msg('保存草稿成功',function(){
                        window.location.href = "/modify_doc/"+r.data.doc+"/";
                    });
                }else{
                    //创建失败
                    layer.closeAll("loading");
                    layer.msg('保存草稿失败:'+r.data);
                    $('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','300px'],
          area:['50%','50%'],
        });
    });
    //清除所选上级文档
    $("#clearParentDoc").click(function(){
        $('#parent-doc').val("");
        $("span.layui-tree-txt").each(function(i){
            var $me = $(this)
            $me.removeClass('selected-parent-doc')
        });
        layer.msg("你取消了当前文档的上级文档")
    });
    //插入模板
    insertTemp = function(doctemp_id){
        $.post("{% url 'get_doctemp' %}",{'doctemp_id':doctemp_id},function(r){
            if(r.status){
                console.log(r.data)
                // editor.insertValue(r.data);
                editor.setValue(r.data);
                layer.closeAll()
            }else{
                layer.msg(r.data)
            }
        });
    };
    //删除模板
    delTemp = function(doctemp_id){
        layer.open({
            title:'删除模板',
            content:'确认删除此模板？',
            btn:['确定','取消'],
            yes:function(index,layero){

            },
        });
    };
    //插入本地文本文件
    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");
    };
</script>
{% endblock %}

{% block custom_div %}
<!-- 插入文档模板div块 -->
<div class="doctemp-list " id="doctemp-list" style="display: none;padding:5px;">
    <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;width:90%;">
      <colgroup>
        <col width="">
        <col width="">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>模板名称</th>
          <th class="layui-hide-xs">创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for temp in doctemp_list %}
        <tr>
          <td>{{ temp.name }}</td>
          <td class="layui-hide-xs">{{ temp.create_time }}</td>
          <td>
              <a class="layui-btn layui-btn-normal layui-btn-sm" href="javascript:void(0);" onclick="insertTemp('{{temp.id}}');">选择模板</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
</div>
<!-- 结束插入文档模板div块 -->

<!-- 新建文集div块 -->
<div style="padding: 20px;display:none;" id="create-project-div">
    <input class="layui-input" type="text" id="pname" style="margin-bottom:10px;" placeholder="输入文集名" required  lay-verify="required">
    <textarea name="desc" id="desc" placeholder="输入文集简介，不超过100个字，超出将被截断"  maxlength="100" class="layui-textarea"></textarea>
    <div class="layui-form-item" style="margin-top:10px;">
        <label class="layui-form-label" style="text-align:left;padding:9px 0px;">文集权限</label>
        <div class="layui-input-block">
            <select name="project-role" lay-verify="" class="layui-select" id="project-role">
                <!--<option value="">选择文集权限</option>-->
                <option value="0">公开</option>
                <option value="1">私密</option>
            </select>
        </div>
    </div>
    <div style="color:red;font-size:12px;">*在可个人中心对文集权限进行进一步控制</div>
</div>
<!-- 结束新建文集div块 -->
{% endblock %}