{include file='common/head.html'}
<link rel="stylesheet" href="{APP_THEME_DIR}/zTree/zTreeStyle.css?v=1" type="text/css">
<script type="text/javascript" src="{APP_THEME_DIR}/zTree/jquery.ztree.core.min.js"></script>
<style>
body,html{height:100%;}
body{overflow-x:hidden;}
.layui-body{padding:0;}
.title-cate{position:fixed;z-index:999999999;padding:5px 5px 5px 15px;width:145px;height:25px;border-bottom:1px solid #dae6f0;background:#fff;color:#333;font-size:14px;line-height:25px;}
.title-cate i{margin-right:5px;}
.allshow{float:right;margin:5px;}
#aside{overflow:hidden;box-sizing:border-box;width:170px;border-right:5px solid #dae6f0;}
#aside,#content_main{position:absolute;height:100%;background:#fff;}
#content_main{top:0;right:0;z-index:0;display:block;visibility:visible;margin:0;padding:0;width:calc(100% - 170px);inset:0 0 0 170px;}
#content_body{position:absolute;top:0;right:0;bottom:0;left:0;}
.pReload{margin-bottom:5px;padding-left:10px;color:#999;font-size:12px;cursor:pointer;}
.pReload:hover{color:#333;}
.ztree{padding:40px 6px 10px!important;}
.ztree li{line-height:26px;}
.ztree .node_name{font-size:14px!important;}
.ztree li a{overflow:hidden;max-width:135px;vertical-align:middle;text-overflow:ellipsis;}
#aside:hover{overflow-y:auto;}
#aside:hover .ztree{overflow-x:auto;}
::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5;}
::-webkit-scrollbar-track{border-radius:10px;background-color:#f7f7f7;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);box-shadow:inset 0 0 6px rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb{border-radius:10px;background-color:#c8c8c8;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);box-shadow:inset 0 0 6px rgba(0,0,0,.1);}
</style>
<script>
    var zNodes = {$zNodes};

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeExpand: beforeExpand,
            onExpand: onExpand,
            onClick: onClick
        }
    };
    var curExpandNode = null;

    function beforeExpand(treeId, treeNode) {
        var pNode = curExpandNode ? curExpandNode.getParentNode() : null;
        var treeNodeP = treeNode.parentTId ? treeNode.getParentNode() : null;
        var zTree = $.fn.zTree.getZTreeObj("tree");
        for (var i = 0, l = !treeNodeP ? 0 : treeNodeP.children.length; i < l; i++) {
            if (treeNode !== treeNodeP.children[i]) {
                zTree.expandNode(treeNodeP.children[i], false);
            }
        };
        while (pNode) {
            if (pNode === treeNode) {
                break;
            }
            pNode = pNode.getParentNode();
        };
        if (!pNode) {
            singlePath(treeNode);
        }
    };

    function singlePath(newNode) {
        if (newNode === curExpandNode) return;
        if (curExpandNode && curExpandNode.open == true) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            if (newNode.parentTId === curExpandNode.parentTId) {
                zTree.expandNode(curExpandNode, false);
            } else {
                var newParents = [];
                while (newNode) {
                    newNode = newNode.getParentNode();
                    if (newNode === curExpandNode) {
                        newParents = null;
                        break;
                    } else if (newNode) {
                        newParents.push(newNode);
                    }
                }
                if (newParents != null) {
                    var oldNode = curExpandNode;
                    var oldParents = [];
                    while (oldNode) {
                        oldNode = oldNode.getParentNode();
                        if (oldNode) {
                            oldParents.push(oldNode);
                        }
                    }
                    if (newParents.length > 0) {
                        zTree.expandNode(oldParents[Math.abs(oldParents.length - newParents.length) - 1], false);
                    } else {
                        zTree.expandNode(oldParents[oldParents.length - 1], false);
                    }
                }
            }
        }
        curExpandNode = newNode;
    };

    function onExpand(event, treeId, treeNode) {
        curExpandNode = treeNode;
    };

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.expandNode(treeNode, null, null, null, true);
    }

    $(function() {
        $.fn.zTree.init($("#tree"), setting, zNodes);
        $(".ui-layout-north li:first-child").click();
    });
</script>
<div class="layui-body">
    <div id="aside">
        <div class="title-cate"><i class="layui-icon layui-icon-picture"></i> 图库管理 </div>
        <ul id="tree" class="ztree"></ul>
    </div>
    <div id="content_main">
        {if([$flag])}
        <iframe name="content_body" id="content_body" src="{url./admin/Media/get_images_path/flag/1}/num/{$info.num}" width="100%" height="100%" frameborder="0"></iframe>
        <button type="button" class="layui-btn layui-btn-warm" id="saveBtn" style="position:absolute;bottom:25px;right:50px;"> <i class="layui-icon layui-icon-carousel"></i> 确认使用</button>
        {if(check_level('batchadd'))}
        <button type="button" class="layui-btn uploadmuti" data-des="pics" style="position:absolute;bottom:25px;right:180px;"> <i class="layui-icon layui-icon-upload"></i> 上传多图 </button>
        {/if}
        {else}
        <iframe name="content_body" id="content_body" src="{url./admin/Media/get_images_path}" frameborder="0" width="100%" height="100%"></iframe>
        {if(check_level('batchadd'))}
        <button type="button" class="layui-btn uploadmuti" data-des="pics" style="position:absolute;bottom:25px;right:50px;"> <i class="layui-icon layui-icon-upload"></i> 上传多图 </button>
        {/if}
        {/if}
    </div>
</div>
<!-- 右侧主体结束 -->
<script>
    window.onload = function() {
        $('.node_name').each(function() {
            var reg = new RegExp("&#039;", "g"); //创建正则RegExp对象   
            var stringObj = $(this).text();
            var newstr = stringObj.replace(reg, "'");
            $(this).text(newstr);
        })
    }
</script>
{include file='common/foot.html'}
{if(check_level('batchadd'))}
<script type="text/javascript">
    layui.use(['element', 'upload'], function() {
        var element = layui.element;
        var upload = layui.upload;

        var sitedir = $('#sitedir').data('sitedir');
        var uploadurl = $("#preurl").data('preurl') + '/index/upload';
        //执行多图片上传实例
        var files = '';
        var uploadmutiInst = upload.render({
            elem: '.uploadmuti',
            url: uploadurl,
            field: 'upload',
            multiple: true,
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj) {
                layer.load(); //上传loading
            },
            done: function(res) {
                if (res.code == 1) {
                    if (files) {
                        files += ',' + res.data[0];
                    } else {
                        files += res.data[0];
                    }
                } else {
                    layer.msg('有文件上传失败：' + res.data);
                }
            },
            allDone: function(obj) {
                var item = this.item;
                var des = $(item).data('des');
                layer.closeAll('loading'); //关闭loading
                if (files != '') {
                    layer.msg('成功上传' + obj.successful + '个文件！', {
                        time: 500
                    }, function() {
                        location.reload();
                    });
                    files = '';
                } else {
                    layer.msg('全部上传失败！');
                }
            },
            error: function() {
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传发生错误！');
            }
        });
    });
</script>
{/if}
<script type="text/javascript">
    // 点击确认使用
    $("#saveBtn").click(function() {
        var frm = $("#content_body").contents();
        // 将选中的图片拼装数组
        var images_array = [];
        var images_name_array = [];
        frm.find("#list li").each(function() {
            var val = $(this).attr("data-url");
            var name = $(this).attr("data-name");
            if ($(this).hasClass("selected")) {
                images_array.push(val);
                images_name_array.push(name);
            }
        });
        // 若未选择图片就点确认则提示
        if (!images_array.length) {
            layer.msg('请至少选择一张图片', {
                icon: 2,
                time: 1000
            });
            return false;
        }
        if ('' != callBack && 'index.php' != callBack) {
            var str = "{$info.func}";
            var info = str.replace('.', '');

            function info_call_back(pathObj) {}
        }

        // 调用父级方法，传入图片数据
        var sitedir = "{$info.sitedir}";
        var callBack = "{$info.func}";
        var inputId = "{$info.inputId}";
        var inputType = "{$info.inputType}";
        var inputName = "{$info.inputName}";
        var num = "{$info.num}";

        if (num > 0) {
            if (num == 1 && undefined != images_array[0]) {
                $('#' + inputId, window.parent.document).val(images_array[0]);
                $('#' + inputId + '_box', window.parent.document).html("<dl><dt><img src='" + sitedir + images_array[0] + "' data-url='" + images_array[0] + "' alt='" + images_name_array[0] + "' ></dt><dd>删除</dd></dl>");
            } else if (num > 1) {
                if ($('#' + inputId, window.parent.document).val() == '') {
                    $('#' + inputId, window.parent.document).val(images_array.join(','));
                } else {
                    $('#' + inputId, window.parent.document).val($('#' + inputId, window.parent.document).val() + "," + images_array.join(','));
                }
                var html = '';
                for (var i = 0; i < images_array.length; i++) {
                    if (inputId == 'pics' || inputId == 'pics_batch') {
                        html += "<dl><dt><img src='" + sitedir + images_array[i] + "' data-url='" + images_array[i] + "' alt='" + images_name_array[i] + "'></dt><dd>删除</dd>" +
                            "<dt><input type='text' name='picstitle[]' value='" + images_name_array[i] + "' placeholder='标题' class='title-input' style='width:95%'/></dt>" +
                            "</dl>";
                    } else if (inputType == '3') {
                        html += "<dl><dt><img src='" + sitedir + images_array[i] + "' data-url='" + images_array[i] + "' alt='" + images_name_array[i] + "'></dt><dd>删除</dd>" +
                            "<dt><input type='text' name='" + inputId + "|title[]' value='" + images_name_array[i] + "' placeholder='标题' class='title-input' style='width:95%'/></dt>" +
                            "<dt><textarea name='" + inputId + "|desc[]' placeholder='描述' class='layui-textarea' style='display:unset;height:50px;min-height:50px;width:95%'></textarea></dt>" +
                            "</dl>";
                    } else {
                        html += "<dl><dt><img src='" + sitedir + images_array[i] + "' data-url='" + images_array[i] + "'></dt><dd>删除</dd>" + "</dl>";
                    }
                }
                $('#' + inputId + '_box', window.parent.document).append(html);
            }
            window.parent.layer.closeAll();
        }
    });
</script>