<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<div id="breadcrumb">
    <a href="#" title="Go to Home" class="tip-bottom"><i
            class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>

<div class="container-fluid">
    <div class="widget-box">
        <div class="widget-title">
            <h5>Dynamic table</h5>
        </div>
        <!-- 树 -->
        <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
            <div class="widget-title">
                <h5>Tree Title</h5>
            </div>
            <div id="jstree" class="jstree jstree-default" role="tree" aria-multiselectable="true"
                 tabindex="0" style="height: 400px;color: black"></div>
        </div>
        <!-- 列表 -->
        <div class="widget-content nopadding" style="margin-left: 300px;">
            <div class="widget-title" style="height: 53px;">
                <div>
                    <div class="form-inline" role="form" id="inBoxQueryDiv"
                         style=" margin-top: 12px;margin-left: 25px;float: left;">
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">IP：</span>
                            <input type="text" id="" class="form-control" placeholder=""/>
                        </div>
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">IP：</span>
                            <input type="text" id="" class="form-control" placeholder=""/>
                        </div>
                        <button id="submit" class="btn btn-default">搜索</button>
                    </div>
                    <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
                </div>
            </div>
            <div id="table"></div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var data = [];
        for (var i = 0; i < 20; i++) {
            data.push({
                moName: i,
                moHostIp: "用户" + i,
                moType: i % 3 == 0 ? 0 : 1,
                moStatus: "normal"
            });
        }
        $("#table").table({
            striped: true,
            panelClass: "panel-success",
            pagination: true,
            columns: [{
                title: "监控网元",
                field: "moName"
            }, {
                title: "主机地址",
                field: "moHostIp"
            }, {
                title: "网元类型",
                field: "moType"
            }, {
                title: "网元状态",
                field: "moStatus"
            }, {
                title: "操作",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");
                    var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
                    //修改
                    editBtn.click(function () {
                        editTemplate(rowData.inboxTemplateId);
                    });
                    div.append("&nbsp;");
                    var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
                    delBtn.click(function () {

                    });
                    return div;
                }
            }],
            data: data
        });

    });

</script>

<script>
    var treeData = [];
    var nodeId2id = function (nodeid) {
        if (nodeid == "#") {
            return 0;
        } else {
            return nodeid.split("_")[1];
        }
    };

    var getPath = function (nodeid) {
        var paths = [];
        var num = 0;
        var currentId = nodeid;
        while (currentId != "#") {
            var node = $("#jstree").jstree().get_node(currentId);
            console.log(node);
            paths.push(node.text);
            num++;
            currentId = node.parent
        }

        var strPath = "";
        for (var i = 0; i < num; i++) {
            strPath += paths.pop() + "/";
        }

        return strPath;

    }

    var openTree = function (node_id, level) {
//        console.log("open tree" + node_id);
        var node = $("#jstree").jstree().get_node(node_id);
        $("#jstree").jstree("open_node", node)
        var children = node.children;
//        console.log("open children" +children);
        if (level <= 1)
            return;
        level--;
        $.each(children, function (n, data) {
            openTree(data, level);
        });
    }

    var addType = function (node) {
        var rel = 0;
        var pid;
        var name;
        var isleaf;
        $('#modal_type_update').hide();
        $('#modal_type_del').hide();
        $('#modal_type_add').show();
        $('#myModalLabel').html("添加类型");
        $('#tx_type_id').val(nodeId2id(node.id));
        $('#tx_type_action').val("add");
        $('#tx_new_type_isleaf').val(1);
        $('#tx_new_type_parent').val(getPath(node.id));

        $('#myModal').modal({keyboard: true});

        return rel;
    };
    var delType = function (id) {
        var rel = 0;
        $('#myModalLabel').html("确认删除?");
        $('#tx_type_action').val("del");
        $('#modal_type_update').hide();
        $('#modal_type_add').hide();
        $('#modal_type_del').show();
        $('#tx_type_id').val(nodeId2id(id));
        $('#myModal').modal({keyboard: true});
        return rel;
    };
    var updateType = function (id, oldName) {
        var rel = 0;
        $('#myModalLabel').html("更新类型");
        $('#tx_type_action').val("update");
        $('#tx_type_id').val(nodeId2id(id));
        $('#tx_update_type_name_old').val(oldName);
        $('#modal_type_update').show();
        $('#modal_type_add').hide();
        $('#modal_type_del').hide();
        $('#myModal').modal({keyboard: true});

        return rel;
    };

    var doAddType = function () {
        var pid = $('#tx_type_id').val();
        var name = $('#tx_new_type_name').val();
        var isleaf = 1;
        $.get("type/add", {"pid": pid, "name": name, "isleaf": isleaf},
                function (data, state) {
                    $.toaster('添加成功', '添加', 'info');
                    refreshTypeTree();
                }
        );
    }
    var doUpdateType = function () {
        var id = $('#tx_type_id').val();
        var name = $('#tx_update_type_name_new').val();
        console.log("update " + id + " name " + name);
        $.get("type/update", {"id": id, "name": name},
                function (data, state) {
                    $.toaster('更新成功', '更新', 'info');
                    refreshTypeTree();
                }
        );
    }
    var doDelType = function () {
        var id = $('#tx_type_id').val();
        console.log("delete " + id);
        $.get("type/del", {"id": id},
                function (data, state) {
                    $('#jstree').jstree("delete_node", $("#" + id));
                }
        );
    }
    $("#btn4type").click(function () {
        console.log("frw");
        if ($("#tx_type_action").val() == "add") {
            doAddType();
        }
        else if ($("#tx_type_action").val() == "update") {
            doUpdateType();
        } else if ($("#tx_type_action").val() == "del") {
            doDelType();
        }
        $('#myModal').dialog('hide');
    });


    var refreshTypeTree = function () {
        console.log("refresh tree");
        treeData = [];  //重置
        $.get("type/all", function (data, state) {
            console.log(state)
            var jsonData = JSON.parse(data);
            $.each(jsonData.data, function (n, val) {
                var treeNode = {};
                treeNode.id = "node_" + val.typeId;
                treeNode.parent = (val.typeParentId == 0 ? "#" : "node_" + val.typeParentId);
                treeNode.text = val.typeName;
                treeNode.data = val.typeIsLeaf;
                treeData.push(treeNode)
            })
            $('#jstree').jstree(true).settings.core.data = treeData;
            $('#jstree').jstree().refresh(true, true);

            setInterval("openTree('#', 3)", 300);  //展开三层
        });
    }

    $(function () {


        $('#jstree').jstree({
            "plugins": ["themes", "checkbox", "contextmenu", "ui", "types", "crrm", "core", "status"],
            'core': {
                "themes": {
                    "icons": false
                },
                'data': treeData,
                'check_callback': true
            },
            'contextmenu': {
                "select_node": false,
                "items": {
                    "ADD": {
                        "label": "添加类型",
                        "action": function (obj) {
                            var inst = jQuery.jstree.reference(obj.reference);
                            var clickedNode = inst.get_node(obj.reference);
                            console.log(obj);
                            console.log(clickedNode);
                            console.log("add operation--clickedNode's id is:" + clickedNode.id);
                            addType(clickedNode);
                        }
                    }, "UPDATE": {
                        "label": "修改类型",
                        "action": function (obj) {
                            var inst = jQuery.jstree.reference(obj.reference);
                            var clickedNode = inst.get_node(obj.reference);
                            updateType(clickedNode.id, clickedNode.text);
                        }
                    }, "DEL": {
                        "label": "删除类型",
                        "action": function (obj) {
                            var inst = jQuery.jstree.reference(obj.reference);
                            var clickedNode = inst.get_node(obj.reference);
                            console.log("del operation--clickedNode's id is:" + clickedNode.id);
                            delType(clickedNode.id);
                        }
                    }, "ADDM": {
                        "label": "添加服务对象",
                        "action": function (obj) {
                            var inst = jQuery.jstree.reference(obj.reference);
                            var clickedNode = inst.get_node(obj.reference);
                            console.log(obj);
                            addMObjType(clickedNode);
                        }
                    }
                }
            }
        }).bind("loaded.jstree", function (event, data) {
            openTree("#", 3);  //展开三层
        });

        refreshTypeTree();

    });

</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 300px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    添加类型
                </h4>
            </div>
            <div class="modal-body">
                <div id="modal_type_add">
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">父节点：</span>
                        <input type="text" id="tx_new_type_parent" width="50" readonly="true" class="form-control"
                               placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">Name：</span>
                        <input type="text" id="tx_new_type_name" width="50" class="form-control" placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">子节点：</span>
                        <input type="checkbox" id="cb_new_type_isleaf" style="margin-left: 30px" name="appName"
                               value="JAVA">
                    </div>
                </div>
                <div id="modal_type_update">
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">原名称：</span>
                        <input type="text" id="tx_update_type_name_old" readonly="true" class="form-control"
                               placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">新名称：</span>
                        <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
                    </div>
                </div>
                <div id="modal_type_del">
                    确认删除该类型节点?
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="tx_type_action"/>
                <input type="hidden" id="tx_type_id"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="btn4type" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>