<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'} ">
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/minimal.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/system.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/menu.css"/>
</head>
<body>
    <div id="content" class="edit-content full-height">
        <div class="tile color window-tree full-height">
            <form id="form" class="form-horizontal full-height" role="form" parsley-validate>
                <div id="selectNodes" class="tree-nodes-wrap"></div>
                <div class="tree-wrap">
                    <ul id="ztree" class="ztree"></ul>
                </div>
                <div class="form-group form-footer edit-button-footer">
                    <div class="col-sm-offset-4 col-sm-8 text-center">
                        <button type="button" class="btn btn-primary" onclick="submitForm()">确定</button>
                        <button type="button" class="btn btn-default" onclick="closeBox()">关闭</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/js/vendor/zTree3/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script type="text/javascript">
        var selectTree = top.DialogBox.dialogTreeData;
        var zTree;
        var defaultNodes = selectTree.selectedNodes;
        var selectedNodes = [];
        function initNodes() {
            for(var i = 0; i < defaultNodes.length; i++) {
                var item = defaultNodes[i];
                if(typeof(item[selectTree.primaryKey]) != 'undefined' && item[selectTree.primaryKey] != null && item[selectTree.primaryKey] != '') {
                    selectedNodes.push(item);
                } else {
                    defaultNodes.splice(i, 1);
                    i--;
                }
            }
        }
        initNodes();
        function closeBox() {
            top.DialogBox.closeBox();
        }
        function submitForm() {
            top.DialogBox.dialogTreeData.selectedNodes = selectedNodes;
            closeBox();
            return false;
        }
        // 删除选中的节点
        function removeSelectNodes(nodeId) {
            for(var i = 0; i < selectedNodes.length; i++) {
                var item = selectedNodes[i];
                if(nodeId == item[selectTree.primaryKey]) {
                    $('#selectNode_'+ nodeId).remove();
                    selectedNodes.splice(i, 1);
                }
            }
            // 清空树选中状态
            if(selectTree.check.enable) {
                var nodes = zTree.getCheckedNodes(true);
                for(var i = 0, item = nodes[i]; item = nodes[i++];) {
                    if(nodeId == item[selectTree.primaryKey]) {
                        zTree.checkNode(item, false, true);
                        break;
                    }
                }
            }
        }
        // 初始化选中的节点
        function showSelectNodes() {
            $('#selectNodes').empty();
            for(var i = 0; i < selectedNodes.length; i++) {
                var item = selectedNodes[i];
                if(typeof(item[selectTree.primaryKey]) == 'undefined' || item[selectTree.primaryKey] == null || item[selectTree.primaryKey] == '') {
                    selectedNodes.splice(i, 1);
                    i--;
                    continue;
                }
                $('#selectNodes').append('<span id="selectNode_'+ item[selectTree.primaryKey] +'" class="btn btn-success btn-xs selected-node">'+ item.name +' <i class="fa fa-close" onclick="removeSelectNodes(\''+ item[selectTree.primaryKey] +'\')"></i></span>')
            }
        }
        // 初始化节点
        function initSelectNodes() {
            showSelectNodes();
            var nodes = zTree.getNodes();
            for(var i = 0, item = nodes[i]; item = nodes[i++];) {
                for(var j = 0, node = selectedNodes[j]; node = selectedNodes[j++];) {
                    if(item[selectTree.primaryKey] == node[selectTree.primaryKey]) {
                        zTree.checkNode(item, true, true);
                        break;
                    }
                }
            }
        }
        // 节点是否已经选择
        function isNodeSelect(nodeId) {
            for(var i = 0, item = selectedNodes[i]; item = selectedNodes[i++];) {
                if(nodeId == item[selectTree.primaryKey]) {
                    return true;
                }
            }
            return false;
        }
        $(function() {
            var layerIndex;
            var apiUri = selectTree.apiUri;
            var isHttp = /^http:\/\/|^https:\/\/.*/i.test(apiUri);
            var otherParams = selectTree.otherParams;
            var requestUrl;
            var requestMethod;
            var autoLoad = false;
            if(isHttp) {
                requestMethod = 'post';
                requestUrl = top.restAjax.path('api/tree/listtree/{resultType}', [selectTree.resultType]);
                otherParams.apiUri = selectTree.apiUri;
                otherParams.method = selectTree.method;
                if(selectTree.defaultParams != null) {
                    for(var i in selectTree.defaultParams) {
                        otherParams['defaultKeyAndValue_'+ i] = selectTree.defaultParams[i];
                    }
                }
            } else {
                requestUrl = apiUri;
                requestMethod = selectTree.method;
                if(selectTree.defaultParams != null) {
                    for (var i in selectTree.defaultParams) {
                        otherParams[i] = selectTree.defaultParams[i];
                    }
                }
            }
            // 根节点不存在自动加载
            if(typeof(selectTree.rootNode) == 'undefined' || selectTree.rootNode == null) {
                autoLoad = true;
            }
            var setting = {
                async: {
                    autoLoad: autoLoad,
                    url: requestUrl,
                    autoParam: selectTree.autoParams,
                    enable: true,
                    type: requestMethod,
                    otherParam: otherParams,
                    dataFilter: selectTree.dataFilter
                },
                data: {
                    key: {
                        checked: selectTree.data.checked,
                        children: selectTree.data.children,
                        isParent: selectTree.data.isParent,
                        name: selectTree.data.name,
                        title: selectTree.data.title
                    },
                },
                check: selectTree.check,
                callback: {
                    onClick: function(event, treeId, treeNode) {
                        if(!selectTree.check.enable) {
                            if(treeNode[selectTree.primaryKey] == '0') {
                                selectedNodes.splice(0, 1);
                            } else {
                                if(selectedNodes.length == 0) {
                                    selectedNodes.push(treeNode);
                                } else {
                                    selectedNodes.splice(0, 1, treeNode);
                                }
                            }
                            showSelectNodes();
                        }
                    },
                    onCheck: function(event, treeId, treeNode) {
                        if(!isNodeSelect(treeNode[selectTree.primaryKey])) {
                            if(treeNode[selectTree.primaryKey] == '0') {
                                zTree.checkNode(treeNode, false, true);
                                return;
                            } else {
                                selectedNodes.push(treeNode);
                            }
                            showSelectNodes();
                        } else {
                            removeSelectNodes(treeNode[selectTree.primaryKey]);
                        }
                    },
                    onAsyncSuccess: function(event, treeId, treeNode, msg) {
                        var nodes = zTree.getNodes();
                        if(nodes.length == 0) {
                            top.DialogBox.msg('暂无数据');
                            return;
                        }
                        // 自动打钩
                        if(selectTree.check.enable) {
                            if(typeof(treeNode) != 'undefined') {
                                var childNodes = treeNode[selectTree.data.children];
                                if(typeof(childNodes) != 'undefined' && childNodes != null && childNodes.length > 0) {
                                    for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
                                        for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
                                            if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
                                                zTree.checkNode(item, true, true);
                                                break;
                                            }
                                        }
                                    }
                                }
                            } else {
                                var rootNodes = zTree.getNodesByFilter(function (node) { return node.level == 0 });
                                for(var i = 0, item = rootNodes[i]; item = rootNodes[i++];) {
                                    for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
                                        if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
                                            zTree.checkNode(item, true, true);
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    },
                }
            };
            zTree = $.fn.zTree.init($("#ztree"), setting);
            if(typeof(selectTree.rootNode) != 'undefined' && selectTree.rootNode != null) {
                if(typeof(selectTree.rootNode[selectTree.primaryKey]) != 'undefined' && selectTree.rootNode[selectTree.primaryKey] != null && selectTree.rootNode[selectTree.primaryKey] != '') {
                    zTree.addNodes(null, selectTree.rootNode);
                }
            } else {
                if(!autoLoad) {
                    var rootNode = {pId: '-1', name: '根节点', url: 'javascript:;', isParent: 'true'};
                    rootNode[selectTree.primaryKey] = '0';
                    zTree.addNodes(null, rootNode);
                }
            }
            refreshTree('ztree');
            initSelectNodes();
        }, function(code, data) {
            top.DialogBox.msg(data.msg);
        }, function() {
            layerIndex = top.DialogBox.msg(TextMessage.loading, {icon: 16, time: 0, shade: 0.3});
        }, function() {
            top.DialogBox.close(layerIndex);
        });
    </script>
</body>
</html>