$(
    //加载页面 初始化页面
    queryAllMonitorService()
);


//设置定时器，一分钟刷新一次页面
/*timename = setInterval("queryAllMonitorService();", 60 * 1000);*/

//查询monitor所有服务信息，并且刷新页面展示
function queryAllMonitorService() {
    $("#monitorTable").table(
        {
        url: contextPath + "/monit/service/allMonit",
        striped: true,
        panelClass: "panel-success",
        loadFilter: function (data) {
            console.log(data.data)
            return defaultLoadFilter(data);
        },
        columns: [
            {
                title: "IP",
                field: "ip"
            },
            {
                title: "标签",
                field: "tags"
            },
            {
                title: "详情",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");

                    //详情
                    var editBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("详情").appendTo(div);
                    editBtn.click(function () {
                        searchService(rowData);
                    });
                    return div;
                }
            }
        ],
        /*            data: data*/
    });
}

function searchService(rowData) {
    $.ajax({
        "url": "/monit/service/searchService",
        "type": 'POST',
        "dataType": "json",
        "data": {
            monitorId: rowData.monitorId
        },
        success: function (resp) {

            console.log(resp);

            genarateMonitorDashboard(resp.data);
        },
        error: function (e) {

            localAlert("Error", "操作失败：" + e.data);

            $("#monitorTable").reload();
        }
    });
}


$("#searchHostInfoBtn").click(
    function () {

    }
);

//生成monitor dashboard展示页面
function genarateMonitorDashboard(data) {

    var innerHTML = "";
    var info = data;
    console.log("monitorId: " + info.monitorId);
    innerHTML += "<div class='blanksegmentation'></div>";
    innerHTML += "<div class='panel panel-default'>";

    //genarate panel header httpInfo
    innerHTML += genarateHttpInfoDiv(info.httpInfo, info.monitorId);

    //genarate panel body serviceInfos events
    innerHTML += genarateServiceInfosTables(info.servicesInfo, info.eventsInfo, info.monitorId);

    innerHTML += "</div>";

    document.getElementById("body_div").innerHTML = innerHTML;
}

//HttpInfo panel header
function genarateHttpInfoDiv(httpInfo, monitorId) {
    console.log("httpInfo: " + httpInfo);
    var innerHTML = "<div class='panel-heading'>";
    innerHTML += genarateSpanText("address: " + httpInfo.address, 20);
    innerHTML += genarateSpanText("port: " + httpInfo.port, 20);
    innerHTML += genarateSpanText("ssl: " + httpInfo.ssl, 20);
    innerHTML += "<a href=\"javascript:deleteBtnOnClicked(\'" + monitorId + "\')\"><span class='glyphicon glyphicon-trash' style='color: #FF0000;font-size:18px'></span></a>";
    innerHTML += "</div>";
    return innerHTML;
}

//serviceInfos Table events Table
function genarateServiceInfosTables(serviceInfos, events, monitorId) {

    var innerHTML = "<div class='panel-body'>";

    //genarate serviceInfo table<th>
    innerHTML += "<table class='table table-bordered mb30'>";
    innerHTML += "<thead><tr><th style='width: 25%;'>serviceName</th><th style='width: 20%;'>serviceStatus</th><th style='width: 10%;'>system</th>";
    innerHTML += "<th style='width: 15%;'>start</th><th style='width: 15%;'>stop</th><th style='width: 15%;'>restart</th></tr></thead><tbody>";

    //genarate serviceInfo table<tr>
    for (var i in serviceInfos) {
        var service = serviceInfos[i];
        innerHTML += "<tr>"
        innerHTML += "<td>" + service.serviceName + "</td>";

        //status == NORMAL status font turn green, start button unclickable, and the others potition, turn red stop button unclickable
        if (serviceInfos[i].serviceStatus == "NORMAL") {
            innerHTML += "<td style='color:#008000;font-weight:bold'>" + service.serviceStatus + "</td>";
            innerHTML += "<td>" + service.system + "</td>";
            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'start')\">Start</button></td>";
            innerHTML += "<td><button class='btn btn-danger btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'stop')\">Stop</button></td>";
            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'restart')\">Restart</button></td>";
        } else {
            innerHTML += "<td style='color:#FF0000;font-weight:bold'>" + serviceInfos[i].serviceStatus + "</td>";
            innerHTML += "<td>" + serviceInfos[i].system + "</td>";
            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'start')\">Start</button></td>";
            innerHTML += "<td><button class='btn btn-danger btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'stop')\">Stop</button></td>";
            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'restart')\">Restart</button></td>";
        }
        innerHTML += "</tr>";
    }
    innerHTML += "</tbody></table>";

    //genarate events table<th>
    innerHTML += "<table class='table table-bordered mb30'>";
    innerHTML += "<thead><tr><th>collected_sec</th><th>service</th><th>type</th>";
    innerHTML += "<th>message</th></tr></thead><tbody>";
    for (var i in events) {
        var event = events[i];
        innerHTML += "<tr>"
        innerHTML += "<td>" + event.collected_sec + "</td>";
        innerHTML += "<td>" + event.service + "</td>";
        innerHTML += "<td>" + event.type + "</td>";
        innerHTML += "<td>" + event.message + "</td>";
        innerHTML += "</tr>";
    }
    innerHTML += "</tbody></table>"

    innerHTML += "</div>";
    return innerHTML;
}

//生成data的json字符串
function buildBody(monitorId, serviceName, actionType) {

    var actionItem = new Object();
    actionItem['hostId'] = monitorId;
    actionItem['service'] = serviceName;
    actionItem['action'] = actionType;

    var actions = new Array();
    actions.push(actionItem);

    var body = new Object();
    body['actions'] = actions;
    return JSON.stringify(body);
}

//启停按钮的动作方法
function actionBtnOnClicked(monitorId, serviceName, actionType) {

    var body = buildBody(monitorId, serviceName, actionType);
    console.log(body);

    if (actionType == "delete") {
        deleteBtnOnClicked(monitorId);
        return;
    }

    $.ajax({
        "url": "/monit/hosts/oneAction",
        "type": 'POST',
        "dataType": "json",
        "data": {
            hostId: monitorId,
            service: serviceName,
            action: actionType
        },
        success: function (resp) {
            console.log(resp);
            queryAllMonitorService();
        },
        error: function (e) {
            localAlert("Error", "操作失败：" + e.data);
            queryAllMonitorService();
        }
    });
}

//delete按钮的动作方法
function deleteBtnOnClicked(monitorId) {
    var url = "/monit/hosts/delete/" + monitorId;
    console.log(url)
    $.ajax({
        "url": url,
        "type": 'POST',
        "dataType": "json",
        success: function (data) {
            queryAllMonitorService();
        },
        error: function (e) {
            queryAllMonitorService();
        }
    });
}

function genarateSpanText(text, size) {
    return "<span style='font-size:" + size + "px;margin-right:20px'>" + text + "</span>";
}