{include file="public/head"}
<div class="layui-fluid layui-rg-bg">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md3 layui-col-lg2">
            <div class="layui-card">
                <div class="layui-card-header"><button class="layui-btn layui-btn-xs refresh"><i class="layui-icon layui-icon-refresh"></i> 刷新目录</button></div>
                <div class="layui-card-body">
                    <div id="nav_table" style="width:200px;height:360px;overflow-x:auto;overflow-y:auto;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md9 layui-col-lg10">
            <blockquote class="layui-elem-quote" style="background-color:#fff">点击左侧目录进行目录内容管理。当前目录：<font class="localpath"></font>
            <div class="layui-inline" style="float:right;"><div class="layui-input-inline"><a class="layui-btn layui-btn-xs reloadmodel"><i class="layui-icon layui-icon-refresh"></i> {:lang("reload")}</a></div></div>
            </blockquote>
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-inline">
                        <div class="layui-input-inline"><button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-disabled countnum"></button></div>
                        <div class="layui-input-inline">
                            <div class="layui-inline">
                            <style type="text/css">
                                .search .layui-input,.search .layui-form-select dl dd{height: 32px !important;line-height: 32px !important;}
                                .search .layui-form-select dl{top:38px;}
                            </style>
                            <div class="layui-form layui-inline search">
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" name="filename" placeholder="文件标题，如1.html">
                                </div>
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm createfile">创建</button>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table id="data_table" class="layui-table" lay-filter="data_table"></table>
                    {:pagedebug()}
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/foot"}
<script type="text/html" id="action">
    {{#  if(d.edit){ }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon layui-icon-edit'></i>{:lang('edit')}</a></div>
    {{#  } else { }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-primary layui-btn-xs layui-disabled"><i class='layui-icon layui-icon-edit'></i>{:lang('edit')}</a></div>
    {{#  } }}
    <div class="layui-input-inline"><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class='layui-icon layui-icon-delete'></i>{:lang('del')}</a></div>
</script>
<script>
    layui.use(['table','form','element','tree'],function(){
        var $ = layui.jquery;
        var table = layui.table, form = layui.form;
        var tree = layui.tree;
        var element = layui.element;
        loading = layer.load(1, {shade: [0.1, '#fff']});
        // 渲染树
        tree.render({
            elem: '#nav_table',
            data: {$dirlist|raw},
            showCheckbox: false,  //是否显示复选框
            showLine: true,
            isJump: false, //是否允许点击节点时弹出新窗口跳转
            text: {none: '暂无内容'},
            click: function(obj){
                var d = obj.data; //得到当前行数据
                var title = d.title;
                var path = d.path;
                table.reload('data_table',{
                    where: {path:path}
                })
            }
        });
        table.render({
            elem: '#data_table',
            url: '{:url("template")}',
            method: 'POST',
            even: true,
            cols: [[
            {type:'numbers'},
            {field:'title', title:'文件名称'},
            {field:'path', title:'路径'},
            {field:'size',width: 100, title:'文件大小',sort:true},
            {field:'ext',width: 80, title:'类型'},
            {field:'isReadable',width: 80, align: 'center', title:'可读',templet:function(d){
                if(d.isReadable) {
                    return '<i class="layui-icon layui-icon-ok" style="color:#009688;font-weight:bold;"></i>';
                } else {
                    return '<i class="layui-icon layui-icon-close"></i>';
                }
            }},
            {field:'isWritable',width: 80, align: 'center', title:'可写',templet:function(d){
                if(d.isWritable) {
                    return '<i class="layui-icon layui-icon-ok" style="color:#009688;font-weight:bold;"></i>';
                } else {
                    return '<i class="layui-icon layui-icon-close" style="color:#FF5722;font-weight:bold;"></i>';
                }
            }},
            {field:'mtime', title:'修改时间',width: 170,sort:true},
            {toolbar:'#action',width: 140, align: 'center', title: '{:lang("act")}', fixed: 'right'}
            ]],
            limit: Number.MAX_VALUE,
            done: function (res) {
                $('.countnum').text('记录数：' + res.count + '条');
                if(res.path) {
                    $('.localpath').text(res.path);
                }
                layer.close(loading);
            }
        });
        
        // 点击事件
        table.on('tool(data_table)', function(obj) {
            var data = obj.data;
            var event = obj.event;
            if(event === 'del'){
                layer.confirm('确认{:lang("del")}模板'+data.title+'吗？<Br>删除后不可回复！',{title:'{:lang("del")}'},function(){
                    $.ajax({
                        url: '{:url("delfile")}',
                        data: data,
                        dataType: 'JSON',
                        type: 'POST',
                        success: function(result){
                            if(result.code==1) {
                                layer.msg('<i class="layui-icon layui-icon-ok" style="font-size:42px;font-weight:bold;color:#5FB878;"></i><br>' + result.msg,{time:2000},function(){
                                    table.reload('data_table');
                                })
                            } else {
                                layer.msg('<i class="layui-icon layui-icon-close" style="font-size:42px;font-weight:bold;color:#FF5722;"></i><br>' + result.msg,{time:2000},function(){
                                    return false;
                                })
                            }
                        }
                    })
                })
                return false;
            }else if(event === 'edit'){
                var url = "{:url('editfile')}?path="+data.path+"&title="+data.title;
                openlayer(url,'{:lang("edit")}');
            }
        });
        // 创建
        $(".createfile").click(function(){
            var filename = $("input[name='filename']").val();
            var path = $('.localpath').text();
            if(path=='') {
                layer.msg('请选择目录');
                return false;
            }
            if(filename=='') {
                layer.msg('请输入要创建的文件名');
                return false;
            }
            var reg = new RegExp('[\\\\/:*?\"<>|]');
            if (reg.test(filename)) {
                layer.msg("文件名不能包含【\\\\/:*?\"<>|】这些非法字符!");
                return false;
            }
            $.ajax({
                url: '{:url("createfile")}',
                type: 'POST',
                dataType: 'json',
                data: {filename:filename,path:path},
                success: function(result){
                    layer.close(loading);
                    if(result.code==1) {
                        layer.msg('<i class="layui-icon layui-icon-ok" style="font-size:42px;font-weight:bold;color:#5FB878;"></i><br>' + result.msg,{time:2000},function(){
                            table.reload('data_table');
                        })
                    } else {
                        layer.msg('<i class="layui-icon layui-icon-close" style="font-size:42px;font-weight:bold;color:#FF5722;"></i><br>' + result.msg,{time:2000},function(){
                            return false;
                        })
                    }
                }
            });
        })
        // 重新加载
        $('.reloadmodel').click(function(){
            table.reload('data_table');
        })
    });
</script>