{% extends 'app_doc/editor/create_base_2.html' %}
{% load static %}
{% load i18n %}
{% block title %}新建文档 - Editormd编辑模式{% 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>
            <button class="layui-btn layui-btn-primary layui-btn-sm mrdoc-btn-default" id="doc-cache-btn" title="查看浏览器缓存">
                本地缓存
            </button>
        </div>

        {% include 'app_doc/editor/tpl_left_create_custom.html' %}
    </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_div %}
    {% include 'app_doc/editor/tpl_editor_div_doc.html' %}
{% 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(status){
        $('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.getMarkdown(),
            'sort':$("#sort").val(),
            'status':status,
            '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"); //关闭加载层
                    window.localStorage.removeItem('mrdoc_doc_cache') // 清空文档缓存
                    if(status === 1){
                        layer.msg('发布成功，即将跳转到文档页面',function(){
                            md_changed = false;
                            //跳转到发布的文档
                            window.location.href = "/project-" + r.data.pro + "/doc-" + r.data.doc
                        });
                    }else{
                        layer.msg('保存成功，即将跳转到文档编辑页面',function(){
                            md_changed = false;
                            //跳转到文档修改
                            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');
                }
            });
        }
    };

    $("#pub_doc").click(function(){
        createDoc(1);
    })
    $("#save_doc").click(function(){
        createDoc(0);
    })

    //选择文档模板
    $("#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){
                editor.insertValue(r.data);
                layer.closeAll()
            }else{
                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-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 %}