$(document).ready(function () {
    sendAjax("post", "getNgixnStatus", null, "json", drawData, errorFunc);
});

/**
 * 展示画布 和 数据
 * @param resp
 */
function drawData(resp) {
    var data = resp.data;

    var canvas = document.getElementById('canvas');
    var stage = new JTopo.Stage(canvas);
    //显示工具栏
    showJTopoToobar(stage);
    var scene = new JTopo.Scene();
    stage.add(scene);
    scene.background = contextPath + "img/bg.jpg";

    var appNodeX = 100;
    var appNodeY = 50;
    var appNodeW = 30;
    var appNodeH = 26;
    var appNode =  newNode(scene,appNodeX,appNodeY,appNodeW,appNodeH,'APP');

    var askServer = newNode(scene,appNodeX+600,appNodeY+100,appNodeW,appNodeH,'问询服务器');
    var link = newFoldLink(scene,appNode, askServer, '问询');
    link.arrowsRadius = 10;

    var awsElb = newNode(scene,appNodeX+200,appNodeY+200,appNodeW,appNodeH,'awsElb');

    var awsNginx = newNode(scene,appNodeX+200,appNodeY+300,appNodeW,appNodeH,'awsNginx');
    var link = newLink(scene,awsElb, awsNginx);
    link.arrowsRadius = 10;

    var awsGateway1 = newNode(scene,appNodeX+150,appNodeY+400,appNodeW,appNodeH,'awsGateway');
    var awsGateway2 = newNode(scene,appNodeX+250,appNodeY+400,appNodeW,appNodeH,'awsGateway');

    var qqElb = newNode(scene,appNodeX+400,appNodeY+200,appNodeW,appNodeH,'qqElb');
    //var link = newFoldLink(scene,appNode, qqElb, '域名');
    //link.arrowsRadius = 10;

    var qqNginx = newNode(scene,appNodeX+400,appNodeY+300,appNodeW,appNodeH,'qqNginx');
    var link = newLink(scene,qqElb, qqNginx);
    link.arrowsRadius = 10;

    var qqGateway1 = newNode(scene,appNodeX+350,appNodeY+400,appNodeW,appNodeH,'qqGateway');
    var qqGateway2 = newNode(scene,appNodeX+450,appNodeY+400,appNodeW,appNodeH,'qqGateway');

    var appServerSe1 = newNode(scene,appNodeX+100,appNodeY-100,1,1);
    var appServerSe2 = newNode(scene,appNodeX+100,appNodeY+500,1,1);
    newLink(scene,appServerSe1, appServerSe2,"",10);

    var awsQqSe1 = newNode(scene,appNodeX+300,appNodeY-100,1,1);
    var awsQqSe2 = newNode(scene,appNodeX+300,appNodeY+500,1,1);
    newLink(scene,awsQqSe1, awsQqSe2,"",10);

    var app = newNode(scene,appNodeX,appNodeY-50,1,1,'app');
    var aws = newNode(scene,appNodeX+200,appNodeY-50,1,1,'aws');
    var qq = newNode(scene,appNodeX+400,appNodeY-50,1,1,'qq');


    if('aws' == data.luaType){//app全部直连到aws
        var link = newLink(scene,appNode, awsElb, '直连');
        link.arrowsRadius = 10;
    }else if('qq' == data.luaType){//app全部直连到qq
        var link = newLink(scene,appNode, qqElb, '直连');
        link.arrowsRadius = 10;
    }else{//app分散直连
        var link = newLink(scene,appNode, awsElb, '直连');
        link.arrowsRadius = 10;
        var link = newLink(scene,appNode, qqElb, '直连');
        link.arrowsRadius = 10;
    }

    if('aws' == data.awsApiNginx){//aws nginx 指向aws gateway
        var link = newLink(scene,awsNginx, awsGateway1,"online");
        link.arrowsRadius = 10;
    }else{//aws nginx 指向qq gateway
        var link = newLink(scene,awsNginx, qqGateway1,"online");
        link.arrowsRadius = 10;
    }

    if('aws' == data.awsGrayNginx){//aws nginx gray 指向aws gateway
        var link = newLink(scene,awsNginx, awsGateway2,"gray");
        link.arrowsRadius = 10;
    }else{//aws nginx 指向qq gateway
        var link = newLink(scene,awsNginx, qqGateway2,"gray");
        link.arrowsRadius = 10;
    }

    if('aws' == data.qqApiNginx){//qq nginx 指向aws gateway
        var link = newLink(scene,qqNginx, awsGateway1,"online");
        link.arrowsRadius = 10;
    }else{//qq nginx 指向qq gateway
        var link = newLink(scene,qqNginx, qqGateway1,"online");
        link.arrowsRadius = 10;
    }

    if('aws' == data.qqGrayNginx){//qq nginx gray 指向aws gateway
        var link = newLink(scene,qqNginx, awsGateway2,"gray");
        link.arrowsRadius = 10;
    }else{//aws nginx 指向qq gateway
        var link = newLink(scene,qqNginx, qqGateway2,"gray");
        link.arrowsRadius = 10;
    }

    if('aws' == data.defaultDns){
        var link = newFoldLink(scene,appNode, awsElb, 'defaultDns');
        link.arrowsRadius = 10;
    }else{
        var link = newFoldLink(scene,appNode, qqElb, 'defaultDns');
        link.arrowsRadius = 10;
    }

    if('aws' == data.qqDns){
        var link = newFoldLink(scene,appNode, awsElb, 'otherDns');
        link.arrowsRadius = 10;
    }else{
        var link = newFoldLink(scene,appNode, qqElb, 'otherDns');
        link.arrowsRadius = 10;
    }
}



/**
 * "切向*"按钮点击事件，打开确认操作对话框
 * @param cloudName 源中心名称
 * @param target 目标中心名称
 * @param onlineOrGray 切换：线上/灰度
 */
function initSwitch(cloudName, target, onlineOrGray) {
    var arr = getNoChangeIpArr(cloudName, onlineOrGray);
    if (undefined === arr || null === arr || 0 === arr.length) {
        prompt("提示", "无可切换的gateway！");
        return;
    }

    var dialog = $("<div>").appendTo($("body"));
    dialog.dialog({
        title: "你确定切换吗",
        backdrop: "static",
        content: "你确定要将" + cloudName + "上的" + onlineOrGray + "流量切向" + target + "吗？",
        buttons: [{
            text: "否",
            className: "btn-danger",
            onclick: function () {
                dialog.dialog("hide");
            }
        }, {
            text: "是",
            className: "btn-success",
            onclick: function () {
                var param = {
                    cloudName: cloudName,
                    target: target,
                    onlineOrGray: onlineOrGray,
                    noChangeIps: JSON.stringify(arr)
                };
                sendAjax("post", "viewToChangeNginxConf", param, "text", viewToChangeSuccess, errorFunc);
                dialog.dialog("hide");
            }
        }]
    });
}

/**
 * 打开对话框，展示切换后的配置
 * @param resp 切换后的响应数据
 */
function viewToChangeSuccess(resp) {
    var data = JSON.parse(resp);
    var dialog = $("<div>").appendTo($("body"));
    dialog.dialog({
        title: "切换结果",
        backdrop: "static",
        content: "<pre>" + data.data.result + "</pre>",
        buttons: [{
            text: "否",
            className: "btn-danger",
            onclick: function () {
                dialog.dialog("hide");
            }
        }, {
            text: "确定",
            className: "btn-success",
            onclick: function () {
                var param = {
                    cloudName: data.data.cloudName
                };
                sendAjax("post", "switchNginxConf", param, "text", switchSuccess, errorFunc);

                dialog.dialog("hide");
                toWait();
            }
        }]
    }).find(".modal-body").css({
        height: "650px"
    });
}

/**
 * 切换配置成功，跳转回首页
 */
function switchSuccess() {
    window.location.href = getUrlBasePath() + "/nginxswitch/toNginxSwitch";
}

/**
 * 获取不切换的服务器ip（由于线上和灰度同在nginx.conf配置中，模板须设计两个占位符，所以切换某一处时，须将不切换的ip提交到后台）
 * @param cloudName 切换的中心aws/qcloud
 * @param onlineOrGray  切换线上/灰度
 * @returns {Array} 不切换服务器的ip列表
 */
function getNoChangeIpArr(cloudName, onlineOrGray) {
    var list = $("." + cloudName + ("online" === onlineOrGray ? "grayapigateway" : "apigateway") + "Ips");
    if (undefined === list || null === list || 0 === list.length) {
        return [];
    }
    var result = [];
    list.each(function () {
        result.push($(this).text().split(":")[0]);
    });
    return result;
}

/**
 * 提示函数
 * @param title 标题
 * @param content 内容
 */
function prompt(title, content) {
    var dialog = $("<div>").appendTo($("body"));
    dialog.dialog({
        title: title,
        backdrop: "static",
        content: content,
        buttons: [{
            text: "确定",
            className: "btn-success",
            onclick: function () {
                dialog.dialog("hide");
            }
        }]
    });
}

/**
 * 发送ajax请求
 * @param type 请求方法post/get
 * @param url 请求url
 * @param data 请求参数数据
 * @param dataType 请求参数类型
 * @param success 请求成功回调函数
 * @param error 请求异常回调函数
 */
function sendAjax(type, url, data, dataType, success, error) {
    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: dataType,
        success: success,
        error: error
    });
}

/**
 * ajax请求异常回调函数
 */
function errorFunc() {
    layer.msg("Token异常", {icon: 2});
}

/**
 * 打开等待对话框
 */
function toWait() {
    $("<div>").appendTo($("body")).dialog({
        title: "提示",
        backdrop: "static",
        content: "正在切换，请稍后..."
    });
}



// 节点
function newNode(scene,x, y, w, h, text) {
    var node = new JTopo.Node(text);
    node.setLocation(x, y);
    node.setSize(w, h);
    scene.add(node);
    return node;
}

// 简单连线
function newLink(scene,nodeA, nodeZ, text, dashedPattern) {
    var link = new JTopo.Link(nodeA, nodeZ, text);
    link.lineWidth = 3; // 线宽
    link.dashedPattern = dashedPattern; // 虚线
    link.bundleOffset = 60; // 折线拐角处的长度
    link.bundleGap = 20; // 线条之间的间隔
    link.textOffsetY = 3; // 文本偏移量（向下3个像素）
    link.strokeColor = '0,200,255';
    scene.add(link);
    return link;
}

// 折线
function newFoldLink(scene,nodeA, nodeZ, text, direction, dashedPattern) {
    var link = new JTopo.FoldLink(nodeA, nodeZ, text);
    link.direction = direction || 'horizontal';
    link.arrowsRadius = 15; //箭头大小
    link.lineWidth = 3; // 线宽
    link.bundleOffset = 60; // 折线拐角处的长度
    link.bundleGap = 20; // 线条之间的间隔
    link.textOffsetY = 3; // 文本偏移量（向下3个像素）
    link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
    link.dashedPattern = dashedPattern;
    scene.add(link);
    return link;
}

// 二次折线
function newFlexionalLink(scene,nodeA, nodeZ, text, direction, dashedPattern) {
    var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
    link.direction = direction || 'horizontal';
    link.arrowsRadius = 10;
    link.lineWidth = 3; // 线宽
    link.offsetGap = 35;
    link.bundleGap = 15; // 线条之间的间隔
    link.textOffsetY = 10; // 文本偏移量（向下15个像素）
    link.strokeColor = '0,250,0';
    link.dashedPattern = dashedPattern;
    scene.add(link);
    return link;
}

// 曲线
function newCurveLink(scene,nodeA, nodeZ, text) {
    var link = new JTopo.CurveLink(nodeA, nodeZ, text);
    link.lineWidth = 3; // 线宽
    scene.add(link);
    return link;
}