<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'} ">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <style>
        .ztree * {font-size: 16px;}
        .layui-btn-xs {font-size: 16px;}
    </style>
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein" style="padding: 0;">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 0px;">
            <div class="layui-row">
                <div class="layui-col-xs5">
                    <div class="selector-tree-wrapper">
                        <ul id="leftTree" class="ztree"></ul>
                    </div>
                </div>
                <div class="layui-col-xs7">
                    <div class="selector-body-wrapper">
                        <div id="selectUsers" class="selector-body-content-user layui-btn-container"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button type="button" class="layui-btn confirm">确认</button>
                        <button type="button" class="layui-btn layui-btn-primary close">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'mobile', 'ztree', 'restajax', 'common'], function() {
        var $ = layui.$;
        var $win = $(window);
        var layer = layui.mobile.layer;
        var restAjax = layui.restajax;
        var common = layui.common;
        var selectedUsers = top.dialog.dialogData.selectedUsers;
        var token = top.token;
        var selectDepartmentUserArray = [];

        function closeBox() {
            top.dialog.dialogData.selectedUsers = null;
            top.layer.closeAll();
        }
        // 初始化框架
        function initFrame() {
            var height = $win.height() - 80;
            $('.selector-tree-wrapper').css({
                marginTop: '5px',
                height: height +'px',
                border: '1px dotted silver'
            });
            $('.selector-body-wrapper').css({
                marginTop: '5px',
                height: (height - 10) +'px',
                border: '1px dotted silver'
            });
        }
        // 初始化数据
        var initTimeout = null;
        var isInited = false;
        function initCheckData(zTree) {
            if(isInited) {
                return;
            }
            if(selectedUsers) {
                if(selectedUsers.length == 0) {
                    return;
                }
                var loadLayerIndex;
                restAjax.post(restAjax.path('app/user/listdepartmentuserbyuserdepartmentid', []), {
                    selectedUsers: selectedUsers
                }, {
                    headers: {
                        token: token
                    }
                }, function(code, data) {
                    var nodes = zTree.transformToArray(zTree.getNodes());
                    for(var i = 0, node = nodes[i]; node = nodes[i++];) {
                        for(var j = 0, item = data[j]; item = data[j++]; ) {
                            if(node.id == ('u_'+ item.userId) && node.pId == item.departmentId) {
                                zTree.checkNode(node, true, true);
                                break;
                            }
                        }
                    }
                    selectUser(zTree.getCheckedNodes(true));
                }, function(code, data) {
                    layer.open({content: data.msg, skin: 'msg', time: 2});
                }, function() {
                    loadLayerIndex = layer.open({type: 2, content: '加载中...'});
                }, function() {
                    layer.close(loadLayerIndex);
                });
            }
            isInited = true;
        }
        // 初始化树
        function initThree() {
            var setting = {
                check: {
                    enable: true
                },
                async: {
                    enable: true,
                    autoLoad: false,
                    type: 'get',
                    url: restAjax.path('app/department/listztreedepartmentwithuser', []),
                    autoParam:['id'],
                    otherParam:{},
                    headers: {token: token},
                    dataFilter: function(treeId, parentNode, childNodes) {
                        if (!childNodes) return null;
                        for (var i=0, l=childNodes.length; i<l; i++) {
                            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                        }
                        return childNodes;
                    }
                },
                callback: {
                    onClick: function(event, treeId, treeNode) {
                        if(treeNode.checked) {
                            zTree.checkNode(treeNode, false, true);
                        } else {
                            zTree.checkNode(treeNode, true, true);
                        }
                        selectUser(zTree.getCheckedNodes(true));
                    },
                    onAsyncSuccess: function(event, treeId, treeNode) {
                        if(initTimeout != null) {
                            clearTimeout(initTimeout)
                        }
                        var subNodes = zTree.getNodesByParam('pId', treeNode.id, null);
                        for(var i = 0, item = subNodes[i]; item = subNodes[i++];) {
                            if(item.id.indexOf('u_') < 0) {
                                zTree.expandNode(item, true, false, false);
                            }
                        }
                        initTimeout = setTimeout(function() {
                            initCheckData(zTree);
                        }, 500);
                    }
                },
                view: {
                    fontCss: {
                        'color': 'black'
                    }
                }
            };
            var zTree = $.fn.zTree.init($('#leftTree'), setting);
            zTree.addNodes(null, {id: '0', pId: '-1', name: '根节点', url: 'javascript:void(0);', icon: 'assets/images/tree/tree-department.png', isParent: 'true'});
            common.refreshTree('leftTree');
        }
        initFrame();
        initThree();
        // 选择人员
        function selectUser(checkedNodes) {
            selectDepartmentUserArray.splice(0, selectDepartmentUserArray.length);
            $('#selectUsers').empty();
            for(var i = 0, item = checkedNodes[i]; item = checkedNodes[i++];) {
                if(item.title && item.title != '') {
                    selectDepartmentUserArray.push({
                        userId: item.id.substring(2, item.id.length),
                        userName: item.name,
                        userTitle: item.title,
                        departmentId: item.pId,
                    });
                    $('#selectUsers').append('<span id="selected_user_'+ item.id +'" class="layui-btn layui-btn-xs">'+ item.title +' </span>');
                }
            }
            top.dialog.dialogData.selectedDepartmentUsers = selectDepartmentUserArray;
        }
        $('.confirm').on('click', function() {
            closeBox();
        });
        $('.close').on('click', function() {
            closeBox();
        })
    });
</script>
</body>
</html>