<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>中间件状态</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <style>
        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }

        #vdlist {
            width: 1720px;
            min-width: 1720px;
        }

        body {
            overflow: hidden;
        }

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body class="mbody pdt5 pdb5">
<div class="left-menu fl" id="pw"
     style="overflow-y: scroll;position:absolute;top:5px;z-index:904;bottom:0px;left:20px;width:240px;padding-top:0;background:rgba(255,255,255,0.3);color: #333;">
    <div id="tree" class="ztree" style="padding: 5px 0;"></div>
</div>
<div class="fr form-inline" id="mif">
    <div class="form-group  mr10 fr mb3" style="margin-bottom: 3px" id="fliteData">
        <label>筛选数据：</label>
        <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeh   older="空格分开多条件筛选数据">
        <button type="button" id="saveMiddRun" onclick="saveMiddRun()" style="margin-top: -4px"
                class="btn  btn-primary"><i class="glyphicon glyphicon-cog"></i>新增
        </button>
    </div>
    <table id="midRunId" class="table table-striped table-bordered dataTable no-footer width100">
        <thead>
        <tr role="row">
            <th class="text-center">名称</th>
            <th class="text-center">网络参数</th>
            <th class="text-center">端口号</th>
            <th class="text-center">更新时间</th>
            <th class="text-center">处理人员</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
    </table>
</div>
</body>
<input type="hidden" id="middIndex">
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/highchart/highstock.js"></script>
<script src="${ctx}/js/plugin/highchart/export.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    $("#interval").val("月份");
    var resultData;
    $(document).ready(function () {
        var pw = $(window).width() - document.getElementById("pw").offsetWidth - 25;
        var ph = $(window).height();
        $("#mif").css("width", pw);
        $("#mif").css("height", ph);
        var phs = document.getElementById("mif").offsetHeight - 30;
        $("#fru").css("height", phs * 0.8);
        $("#frd").css("height", phs * 0.2);
        var getshow = getshows;
        getTree();
        getMiddRunDetails();
    })


    var dataTable = null;
    var treeObj = null;
    var setting = {
        check: {
            enable: true,
            chkDisabledInherit: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            fontCss: setHighlight // 高亮一定要设置，setHighlight是自定义方法
        },
        callback: {
            beforeCheck: beforeCheck,
            onClick: zTreeOnClick
        }
    };
    var getshows, getMiddRunDetailss, midname;
    var nowIndex, middname;
    // tree节点选中之前进行判断
    var className = "dark";

    function beforeCheck(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        return (treeNode.doCheck !== false);
    }

    var typeId = "";

    function zTreeOnClick() {
        var zTree = $.fn.zTree.getZTreeObj("tree");

        if (zTree != null) {
            var nodes = zTree.getSelectedNodes();   //获取树控件选中对象集合

            // 关闭所有节点的高亮
            var allNodes = treeObj.transformToArray(treeObj.getNodes());
            for (var i = 0; i < allNodes.length; i++) {
                allNodes[i].highlight = false;
                treeObj.updateNode(allNodes[i]);
            }

            // 高亮并展开搜索到的节点
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].highlight = true;
                treeObj.updateNode(nodes[i]); // 更新节点，让高亮生效
            }

            nowIndex = nodes[0].rd_Index;
            middname = nodes[0].name;
            if (nowIndex == "0") {
                getMiddRunDetails();
            } else {
                getMiddRunDetail(nowIndex);
            }
        }
    }

    function getname() {
        return typeId;
    }

    function getTree() {
        jQuery.ajax({
            type: 'POST',
            dataType: "json",
            url: '/pqs9900/middRun/getTree',
            data: {},
            async: false,
            error: function () {
                console.log("获取终端树请求发送失败！");
            },
            success: function (data) {
                var datalist = [];
                for (var i = 0; i < data.length; i++) {
                    var str = '';

                    str += '{' + "id:" + data[i].id;
                    str += ',' + "name:'" + data[i].name + "'";
                    str += ',' + "nodeIndex:" + data[i].nodeIndex;
                    str += ',' + "nodeType:" + data[i].nodeType;
                    str += ',' + "ppId:" + data[i].ppId;
                    if (data[i].nodeType == "0") {
                        str += ',' + "open:" + true;
                    } else {
                        str += ',' + "open:" + false;
                    }
                    str += ',' + "describe:" + data[i].describe;
                    str += ',' + "rd_Index:'" + data[i].rdIndex + "'";
                    str += ',' + "pId:" + data[i].pId + '}';
                    datalist.push(str);
                }
                datalist = eval('[' + datalist + ']');// string->json数组

                var zNodes = datalist;

                treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
                var treeObj1 = $.fn.zTree.getZTreeObj("tree");
                treeObj1.expandAll(true);
            }
        });
    }

    // 设置高亮字体
    function setHighlight(treeId, treeNode) {
        return (!!treeNode.highlight) ? {color: "#000000", "font-weight": "bold"} : {
            color: "#666",
            "font-weight": "normal"
        };
    }

    function zTreeOnAsyncSuccess() {
        var zTree = $.fn.zTree.getZTreeObj("tree");

        var nodes = zTree.getNodes();
        zTree.expandNode(nodes[0], true);

        var childNodes = zTree.transformToArray(nodes[0]);


        var i = 0;
        for (i = 0; i < childNodes.length; i++) {
            var type = childNodes[i].level;
            if (type == 1) {

                var subvname = childNodes[i].nodeType;
                zTree.expandNode(subvname, true);
                zTree.expandNode(childNodes[i], true);

                var middIndex = childNodes[i].rd_Index;
                middname = childNodes[i].name;
                nowIndex = middIndex;
                // 关闭所有节点的高亮
                var allNodes = treeObj.transformToArray(treeObj.getNodes());
                for (var n = 0; n < allNodes.length; n++) {
                    allNodes[n].highlight = false;
                    treeObj.updateNode(allNodes[n]);
                }

                // 高亮并展开搜索到的节点
                childNodes[i].highlight = true;
                treeObj.updateNode(childNodes[i]); // 更新节点，让高亮生效

                break;
            }
        }
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getMiddRunDetail(nowIndex, middname, startTime, endTime);
    }

    function getMiddRunDetails() {
        $.ajax({
            type: "POST",
            url: "/pqs9900/middRun/getMiddRunDetails",
            data: '',
            async: false,
            success: function (data) {
                initTable(data);
                resultData = data;
                startQuery();
            }
        })
    }

    function getMiddRunDetail(middIndex) {
        // $.ajax({
        //     type: "POST",
        //     url: "/pqs9900/middRun/getShow",
        //     data: {
        //         middIndex:middIndex,
        //         startTime:startTime,
        //         endTime:endTime
        //     },
        //     async: false,
        //     beforeSend: function () {
        //         i = ityzl_SHOW_LOAD_LAYER();
        //     },
        //     success: function (data) {
        //         getshows=data;
        //         midname=middname;
        //         //***********关闭loading
        //         ityzl_CLOSE_LOAD_LAYER(i);
        //     }
        // })
        $.ajax({
            type: "POST",
            url: "/pqs9900/middRun/getMiddRunDetail",
            data: {
                middIndex: middIndex
            },
            async: false,
            success: function (data) {
                initTable(data);
                resultData = data;
                startQuery();
            }
        })
    }

    function add0(m) {
        return m < 10 ? '0' + m : m
    }

    function initTable(data) {
        var height = $(window).height() - 238;
        var length = Math.floor(height / 28);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#midRunId").DataTable();
        //dataTable.clear().draw();
        dataTable = $('#midRunId').DataTable({
            order: [],
            columnDefs: [
                {
                    orderable: false,
                    targets: [1, 2, 4, 5]
                }
            ],
            data: data.body,
            destroy: true,
            searching: true,
            dom: 'rtip',
            pageLength: length,
            columns: [
                {width: "7%", data: 'name'},
                {width: "7%", data: 'ip'},
                {width: "10%", data: 'port'},
                {
                    width: "8%", data: 'updateTime', render: function (data, type, full, meta) {
                        var date = new Date(data);
                        var YY = date.getFullYear() + '-';
                        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
                        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                        return YY + MM + DD + " " + hh + mm + ss;
                    }
                },
                {width: "9%", data: 'userIndex'},
                {
                    width: "20%", data: 'middIndex', render: function (data, type, full, meta) {
                        var extarButton = "";
                        var modifyButton = "";
                        var deleteButton = "";
                        var buttons = "";
                        if (full.item !== "system") {
                            extarButton = "<button type='button' class='btn  btn-primary  mr10' onclick='selectByIndex(\"" + full.middIndex + "\")' ><i class='fa fa-edit'></i>查看详情</button>";
                            modifyButton = "<button type='button' class='btn  btn-primary  mr10' onclick='updateUserByIndex(\"" + full.middIndex + "\")' ><i class='fa fa-edit'></i>修改</button>";
                            deleteButton = "<button type='button' class='btn  btn-danger  mr10' onclick='deleteUserByIndex(\"" + full.middIndex + "\")' ><i class='fa fa-trash'></i>删除</button>";
                        }
                        if (full.state == 0) {
                            buttons = "";
                        } else {
                            buttons = extarButton + modifyButton + deleteButton;
                        }
                        return buttons;
                    }
                }
            ],
            language: {
                url: '/pqs9900/json/chine.json',
                "sEmptyTable": "没有内容"
            },
            'fnDrawCallback': function (oTable) {
                $("#usertId_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#usertId").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        modifyCss(dataTable);
    }

    $("#query").click(function () {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getMiddRunDetail(nowIndex, middname, startTime, endTime);
        getMiddRunDetailss(getMiddRunDetails);
        getShow(getshows)
    })

    function modifyCss(dataTable) {
        dataTable.buttons().container().css("display", "inline-block");
        dataTable.buttons().container().css("float", "right");
        dataTable.buttons().container().css("top", "4px");
        dataTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }

    //特殊处理，表头紧缩问题--start
    var it = null;

    function startQuery() {
        //实时刷新时间单位为毫秒
        it = setInterval('refreshQuery()', 100);

    }

    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#usertId").width();
        if (width > 100) {
            initTable(resultData);
            window.clearInterval(it)
        }
    }

    //特殊处理，表头紧缩问题--end


    //详情
    function selectByIndex(index) {
        $("#middIndex").val(index);
        layer.open({
            type: 2,
            title: '详情',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['100%', '100%'],
            content: 'middRunDetail', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }
    //新增中间件
    function saveMiddRun(){
        layer.open({
            type: 2,
            title: '详情',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['30%', '60%'],
            content: 'saveMiddRun', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }
    //修改中间件
    function updateUserByIndex(middIndex){
        $("#middIndex").val(middIndex);
        layer.open({
            type: 2,
            title: '修改',
            shadeClose: true,
            resize: false,
            shade: 0.3,
            area: ['30%', '60%'],
            content: 'updateMiddRun', //iframe的url
            scrollbar: false,
            end: function () {
                layer.close();
            }
        });
    }
    function deleteUserByIndex(middIndex){
        layer.confirm('确定删除？', function (index) {
            $.ajax({
                type: "POST",
                url: "/pqs9900/middRun/deleteMiddRun",
                dataType: "text",
                data: {
                    middIndex: middIndex
                },
                success: function (data) {
                    var info = $.parseJSON(data);
                    if (info.code == 500) {
                        layer.msg(info.message, {
                            icon: 5,
                            time: 1000
                        }, function () {
                            getTree();
                            getMiddRunDetails();
                        });
                    } else if(info.code == 400){
                        layer.msg(info.message, {
                            icon: 5,
                            time: 1000
                        }, function () {
                            getTree();
                            getMiddRunDetails();
                        });
                    } else {
                        layer.msg(info.message, {
                            icon: 6,
                            time: 1000
                        }, function () {
                            getTree();
                            getMiddRunDetails();
                        });
                    }
                }

            });
            layer.close(index);
        })
    }
</script>
</html>
