(function ($) {
    var defaults = {
        processData: {}, //步骤节点数据
        //processUrl:'',//步骤节点数据
        fnRepeat: function () {
            alert("步骤连接重复");
        },
        fnClick: function () {
            alert("单击");
        },
        fnDbClick: function () {
            alert("双击");
        },
        canvasMenus: {
            "one": function (t) { alert('画面右键') }
        },
        processMenus: {
            "one": function (t) {
                alert('步骤右键');
            }
        },
        canvasLabMenu: {
            "one": function (t) { alert('标签右键') }
        },
        /*右键菜单样式*/
        menuStyle: {
            border: '1px solid #5a6377',
            minWidth: '150px',
        },
        itemStyle: {
            color: '#333',
            fontSize: '12px',
            border: '0',
            /*borderLeft:'5px solid #fff',*/
            padding: '5px 15px 5px 10px'
        },
        itemHoverStyle: {
            border: '0',
            cursor: 'pointer',
            /*borderLeft:'5px solid #49afcd',*/
            color: '#fff',
            /*backgroundColor: '#2980b9'*/
        },
        mtAfterDrop: function (params) {

            //alert('连接成功后调用');
            //alert("连接："+params.sourceId +" -> "+ params.targetId);
        },
        //这是连接线路的绘画样式
        connectorPaintStyle: {
            lineWidth: 3,
            strokeStyle: "#4f7bba",
            joinstyle: "round"
        },
        //鼠标经过样式
        connectorHoverStyle: {
            lineWidth: 3,
            strokeStyle: "#32b291"
        }

    }; /*defaults end*/
    var initEndPoints = function () {
        $(".process-flag").each(function (i, e) {
            var p = $(e).parent();
            jsPlumb.makeSource($(e), {
                parent: p,
                anchor: "Continuous",
                endpoint: ["Dot", { radius: 1 }],
                connector: ["Flowchart", { stub: [5, 5] }],
                connectorStyle: defaults.connectorPaintStyle,
                hoverPaintStyle: defaults.connectorHoverStyle,
                dragOptions: {},
                maxConnections: -1
            });
        });
    }

    /*设置隐藏域保存关系信息*/
    var aConnections = [];
    var setConnections = function (conn, remove) {
        if (!remove) aConnections.push(conn);
        else {
            var idx = -1;
            for (var i = 0; i < aConnections.length; i++) {
                if (aConnections[i] == conn) {
                    idx = i; break;
                }
            }
            if (idx != -1) aConnections.splice(idx, 1);
        }
        if (aConnections.length > 0) {
            var s = "";
            for (var j = 0; j < aConnections.length; j++) {
                var from = $('#' + aConnections[j].sourceId).attr('process_id');
                var target = $('#' + aConnections[j].targetId).attr('process_id');
                s = s + "<input type='hidden' value=\"" + from + "," + target + "\">";
            }
            $('#leipi_process_info').html(s);
        } else {
            $('#leipi_process_info').html('');
        }
        jsPlumb.repaintEverything(); //重画
    };

    /*Flowdesign 命名纯粹为了美观，而不是 formDesign */
    $.fn.Flowdesign = function (options) {

        var _canvas = $(this);
        //右键步骤的步骤号
        _canvas.append('<input type="hidden" id="leipi_active_id" value="0"/><input type="hidden" id="leipi_copy_id" value="0"/>');
        _canvas.append('<div id="leipi_process_info"></div>');


        /*配置*/
        $.each(options, function (i, val) {
            if (typeof val == 'object' && defaults[i])
                $.extend(defaults[i], val);
            else
                defaults[i] = val;
        });
        /*画布右键绑定*/
        var contextmenu = {
            bindings: defaults.canvasMenus,
            menuStyle: defaults.menuStyle,
            itemStyle: defaults.itemStyle,
            itemHoverStyle: defaults.itemHoverStyle
        }
        $(this).contextMenu('canvasMenu', contextmenu);

        jsPlumb.importDefaults({
            DragOptions: { cursor: 'pointer' },
            EndpointStyle: { fillStyle: '#225588' },
            Endpoint: ["Dot", { radius: 1 }],
            ConnectionOverlays: [
                ["Arrow", { location: 1 }],
                ["Label", {
                    location: 0.1,
                    id: "label",
                    cssClass: "aLabel"
                }]
            ],
            Anchor: 'Continuous',
            ConnectorZIndex: 5,
            HoverPaintStyle: defaults.connectorHoverStyle
        });
        if ($.browser.msie && $.browser.version < '9.0') { //ie9以下，用VML画图
            jsPlumb.setRenderMode(jsPlumb.VML);
        } else { //其他浏览器用SVG
            jsPlumb.setRenderMode(jsPlumb.SVG);
        }


        //初始化原步骤
        var lastProcessId = 0;
        var processData = defaults.processData;
        if (processData.list) {
            $.each(processData.list, function (i, row) {
                var nodeDiv = document.createElement('div');
                var nodeId = "window" + row.id, badge = 'badge-inverse', icon = 'icon-star';


                if (lastProcessId == 0)//第一步
                {
                    badge = 'badge-info';
                    icon = 'icon-play';
                }
                if (row.icon) {
                    icon = row.icon;
                }
                $(nodeDiv).attr("id", nodeId)
                    .attr("style", row.style)
                    .attr("process_to", row.process_to)
                    .attr("process_id", row.id)
                    .addClass("process-step btn btn-small")//给节点名称添加一个span元素
                    .html('<span class="process-flag badge ' + badge + '"  alt=' + nodeId + ' title="点击右键,执行相关操作" ><i class="' + icon + ' icon-white"></i></span>&nbsp;<span id="span_' + row.id + '"   title="点击右键,执行相关操作" >' + row.process_name + '</span>')
                    .mousedown(function (e) {
                        if (e.which == 3) { //右键绑定
                            _canvas.find('#leipi_active_id').val(row.id);
                            contextmenu.bindings = defaults.processMenus;

                            var nodeID = document.getElementById("leipi_active_id");
                            if (nodeID.value.indexOf("S_") != -1) {
                               // $(this).contextMenu('processMenu', contextmenu);
                                return;
                            }
                               
                            var node = new Entity("BP.WF.Node", nodeID.value);
                            //如果是第一个节点，把接收人规则文字换成可启动流程的人员
                            if (nodeID.value.substr(nodeID.value.length - 2) == "01")
                                $('#pmNodeAccepterRole span').text("设置发起人");
                            else
                                $('#pmNodeAccepterRole span').text("设置接受人");


                            if (node.RunModel == 0) {
                                $('#pmfun span').text("线型:" + nodeID.value);
                            }
                            if (node.RunModel == 1) {
                                $('#pmfun span').text("合流:" + nodeID.value);
                            }
                            if (node.RunModel == 2) {
                                $('#pmfun span').text("分流:" + nodeID.value);
                            }
                            if (node.RunModel == 3) {
                                $('#pmfun span').text("分合流:" + nodeID.value);
                            }
                            if (node.RunModel == 4) {
                                $('#pmfun span').text("子线程:" + nodeID.value);
                            }

                            if (node.FWCSta == 0) {
                                $('#pmWorkCheck span').text("审核组件-禁用");
                            }
                            if (node.FWCSta == 1) {
                                $('#pmWorkCheck span').text("审核组件-启用");
                            }
                            if (node.FWCSta == 2) {
                                $('#pmWorkCheck span').text("审核组件-只读");
                            }

                            $(this).contextMenu('processMenu', contextmenu);
                            ////$(this).contextMenu('processMenu3', contextmenu);
                            //$(this).mouseenter(function () {
                            //	$(this).contextMenu('processMenu3', contextmenu);
                            //});
                        }
                    });
                _canvas.append(nodeDiv);
                //索引变量
                lastProcessId = row.id;
            }); //each
        }

        //显示标签
        var labNoteData = defaults.labNoteData;
        if (labNoteData.list) {
            $.each(labNoteData.list, function (i, lab) {
                var labDiv = document.createElement('div');
                var labId = "lab" + lab.id, badge = 'badge-inverse';
                $(labDiv).attr("id", labId)
                    .attr("style", lab.style)
                    .attr("process_id", lab.id)
                    .addClass("process-lab")
                    .html('<span class="process-flag badge ' + badge + '"></span>&nbsp;<span id="lab_span_' + lab.id + '">' + lab.process_name + '</span>')
                    .mousedown(function (e) {
                        if (e.which == 3) { //右键绑定
                            _canvas.find('#leipi_active_id').val(lab.id);
                            contextmenu.bindings = defaults.canvasLabMenu;
                            $(this).contextMenu('canvasLabMenu', contextmenu);
                        }
                    })
                    .dblclick(function (e) {
                        console.log('e', e.currentTarget.id);
                        var activeId = e.currentTarget.id.replace('lab', ''); //右键当前的ID
                        var windowtext = $("#lab" + activeId).text();
                        windowtext = windowtext.replace(/(^\s*)|(\s*$)/g, ""); //去掉左右空格.
                        $("#alertModal3 div:eq(2) button").attr("class", "btn btn-primary savetext" + activeId);
                        $("#alertModal3 div:eq(2) button").attr("onclick", "saveLabName(\"" + activeId + "\")");
                        var xiuNodename = '<input style="width:90%" id="TB_LAB_' + activeId + '" type="text" value="' + windowtext + '">'
                        $("#lab" + activeId + " span").html();
                        labAlert(xiuNodename);
                    });
                _canvas.append(labDiv);
            });
        }

        var timeout = null;
        //点击或双击事件,这里进行了一个单击事件延迟，因为同时绑定了双击事件
        $(".process-step").live('click', function () {
            //激活
            _canvas.find('#leipi_active_id').val($(this).attr("process_id")),
                clearTimeout(timeout);
            var obj = this;
            timeout = setTimeout(defaults.fnClick, 300);
        }).live('dblclick', function () {
            clearTimeout(timeout);
            defaults.fnDbClick();
        });

        //使节点可拖动
        jsPlumb.draggable(jsPlumb.getSelector(".process-step"), { containment: $("#flowdesign_canvas") });
        initEndPoints();

        //使标签可拖动
        jsPlumb.draggable(jsPlumb.getSelector(".process-lab"), { containment: $("#flowdesign_canvas") });
        initEndPoints();

        //绑定添加连接操作。画线-input text值  拒绝重复连接
        jsPlumb.bind("jsPlumbConnection", function (info) {
            if (info.sourceId == info.targetId) {
                jsPlumb.detach(info);
                return;
            }

            setConnections(info.connection)
        });
        //绑定删除connection事件
        jsPlumb.bind("jsPlumbConnectionDetached", function (info) {
            setConnections(info.connection, true);
        });

        //绑定删除确认操作
        jsPlumb.bind("click", function (c) {

            fAlert("", 0, c);
            $("#lineDel").unbind("click");
            $("#lineSet").unbind("click");
            $("#lineLabSave").unbind("click");
            //删除节点方向连接线
            $("#lineDel").click(function () {

                //获取连接线连接的ID
                var fromNodeID = c.sourceId.replace('window', '');
                var toNodeID = c.targetId.replace('window', '');

                //获取流程编号
                var flowNo = GetQueryString("FK_Flow");
                if (window.confirm("您确定要删除从节点[" + fromNodeID + "]，到节点[" + toNodeID + "]吗？") == false)
                    return;

                var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_CCBPMDesigner2018");
                hander.AddPara("FK_Node", fromNodeID);
                hander.AddPara("FK_Flow", flowNo);
                hander.AddPara("ToNode", toNodeID);
                var data = hander.DoMethodReturnString("Direction_Delete");
                if (data.indexOf('err@') == 0) {
                    alert(data); //删除失败的情况.
                    return;
                }

                jsPlumb.detach(c);

            });

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

                var fromNodeID = c.sourceId.replace('window', '');
                var targetId = c.targetId.replace('window', '');

                var flowNo = GetQueryString("FK_Flow");
                var url = "";
                if (GetHrefUrl().indexOf("/WF/Admin/CCBPMDesigner") == -1)
                    url = basePath + "/WF/Admin/";
                else
                    url = "../";
                url += "Cond2020/ConditionLine.htm?FK_Flow=" + flowNo + "&FK_MainNode=" + fromNodeID + "&FK_Node=" + fromNodeID + "&ToNodeID=" + targetId + "&CondType=2&Lang=CH&t=" + new Date().getTime();
                $("#LineModal").hide();
                $(".modal-backdrop").hide();
                var w = window.innerWidth - 240;
                var h = window.innerHeight - 120;

                CondDir(fromNodeID);
                return;
                OpenEasyUiDialog(url, flowNo + fromNodeID + "DIRECTION" + targetId, "设置方向条件" + fromNodeID + "->" + targetId, w, h, "icon-property", true, null, null, null, function () {

                });

            })
            $("#lineLabSave").click(function () {

                //获取连接线连接的ID
                var fromNodeID = c.sourceId.replace('window', '');
                var toNodeID = c.targetId.replace('window', '');

                //获取流程编号
                var flowNo = GetQueryString("FK_Flow");
                var dirLabId = "TB_Direction_LAB_" + fromNodeID + "_" + toNodeID;
                var des = $("#" + dirLabId).val();
                des = des.replace(/(^\s*)|(\s*$)/g, "");

                var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_CCBPMDesigner2018");
                hander.AddPara("FK_Node", fromNodeID);
                hander.AddPara("FK_Flow", flowNo);
                hander.AddPara("ToNode", toNodeID);
                hander.AddPara("Des", des);
                var data = hander.DoMethodReturnString("Direction_Save");
                if (data.indexOf('err@') == 0) {
                    alert(data); //删除失败的情况.
                    return;
                }

                c.removeOverlay("des_" + fromNodeID + "_" + toNodeID);
                c.addOverlay(['Label', {
                    label: '<label style="font-size:14px;margin-bottom:25px;margin-left:-20px;color:#00a6ac;">' + des + '</label>', width: 12, length: 12, location: 0.5, id: "des_" + fromNodeID + "_" + toNodeID, events: {
                        click: function (labelOverlay, originalEvent) {
                        }
                    }
                }])
            })

            // if(confirm("你确定取消连接吗?是：取消 否：方向指向"))
            // {
            //     jsPlumb.detach(c);
            // }
            // else
            // {
            //     window.open('');
            // }


        });



        //连接成功回调函数
        function mtAfterDrop(params) {
            //console.log(params)
            //创建一个实体. 保存连接线
            var dir = new Entity("BP.WF.Template.Direction");
            dir.FK_Flow = flowNo;
            dir.Node = $('#' + params.sourceId).attr('process_id');
            dir.ToNode = $('#' + params.targetId).attr('process_id');
            dir.MyPK = dir.FK_Flow + "_" + dir.Node + "_" + dir.ToNode;
            dir.DirType = 2;
            dir.Save();
            //defaults.mtAfterDrop({ sourceId: $("#" + params.sourceId).attr('process_id'), targetId: $("#" + params.targetId).attr('process_id') });

        }

        jsPlumb.makeTarget(jsPlumb.getSelector(".process-step"), {
            dropOptions: { hoverClass: "hover", activeClass: "active" },
            anchor: "Continuous",
            maxConnections: -1,
            endpoint: ["Dot", { radius: 1 }],
            paintStyle: { fillStyle: "#ec912a", radius: 1 },
            hoverPaintStyle: this.connectorHoverStyle,
            beforeDrop: function (params) {
                if (params.sourceId == params.targetId) return false; /*不能链接自己*/
                var j = 0;
                $('#leipi_process_info').find('input').each(function (i) {
                    var str = $('#' + params.sourceId).attr('process_id') + ',' + $('#' + params.targetId).attr('process_id');
                    if (str == $(this).val()) {
                        j++;
                        return;
                    }
                })
                if (j > 0) {
                    defaults.fnRepeat();
                    return false;
                } else {
                    mtAfterDrop(params);
                    return true;
                }
            }
        });
        //reset  start
        var _canvas_design = function () {

            //连接关联的步骤
            $('.process-step').each(function (i) {
                var sourceId = $(this).attr('process_id');
                //var nodeId = "window"+id;
                var prcsto = $(this).attr('process_to');
                var toArr = prcsto.split(",");
                var processData = defaults.processData;
                $.each(toArr, function (j, targetId) {
                    if (targetId != '' && targetId != 0) {
                        //检查 source 和 target是否存在
                        var is_source = false, is_target = false;
                        $.each(processData.list, function (i, row) {
                            if (row.id == sourceId) {
                                is_source = true;
                            } else if (row.id == targetId) {
                                is_target = true;
                            }
                            if (is_source && is_target)
                                return true;
                        });

                        if (is_source && is_target) {
                            var desid = sourceId + "_" + targetId;
                            var linedes = processData.process_des.filter(function (el) { return el.id == desid; })[0].des;
                            jsPlumb.connect({
                                source: "window" + sourceId,
                                target: "window" + targetId,
                                overlays: [
                                    ['Label', {
                                        label: '<label style="font-size:14px;margin-bottom:25px;margin-left:-20px;color:#00a6ac;">' + (linedes == null ? '' : linedes) + '</label>', width: 12, length: 12, location: 0.5, id: "des_" + sourceId + "_" + targetId, events: {
                                            click: function (labelOverlay, originalEvent) {
                                            }
                                        }
                                    }]]
                                /* ,labelStyle : { cssClass:"component label" }
                                ,label : id +" - "+ n*/
                            });
                            return;
                        }
                    }
                })
            });
        } //_canvas_design end reset
        _canvas_design();

        //-----外部调用----------------------

        var Flowdesign = {

            addProcess: function (row) {

                if (row.id <= 0) {
                    return false;
                }
                var nodeDiv = document.createElement('div');
                var nodeId = "window" + row.id, badge = 'badge-inverse', icon = 'icon-star';

                if (row.icon) {
                    icon = row.icon;
                }
                $(nodeDiv).attr("id", nodeId)
                    .attr("style", row.style)
                    .attr("process_to", row.process_to)
                    .attr("process_id", row.id)
                    .addClass("process-step btn btn-small")
                    .html('<span class="process-flag badge ' + badge + '"><i class="' + icon + ' icon-white"></i></span>&nbsp;<span id="span_' + row.id + '">' + row.process_name + '</span>')
                    .mousedown(function (e) {
                        if (e.which == 3) { //右键绑定
                            _canvas.find('#leipi_active_id').val(row.id);
                            contextmenu.bindings = defaults.processMenus;
                            var nodeID = document.getElementById("leipi_active_id");
                            var node = new Entity("BP.WF.Node", nodeID.value);


                            $('#pmAttribute span').text("节点属性");


                            if (node.RunModel == 0) {
                                $('#pmfun span').text("普通" + nodeID.value);
                            }

                            if (node.RunModel == 1) {
                                $('#pmfun span').text("合流");
                            }

                            if (node.RunModel == 2) {
                                $('#pmfun span').text("分流");
                            }

                            if (node.RunModel == 3) {
                                $('#pmfun span').text("分合流");
                            }

                            if (node.RunModel == 4) {
                                $('#pmfun span').text("子线程");
                            }

                            if (node.FWCSta == 0) {
                                $('#pmWorkCheck span').text("审核组件-禁用");
                            }
                            if (node.FWCSta == 1) {
                                $('#pmWorkCheck span').text("审核组件-启用");
                            }
                            if (node.FWCSta == 2) {
                                $('#pmWorkCheck span').text("审核组件-只读");
                            }

                            $(this).contextMenu('processMenu', contextmenu);
                        }
                    });

                _canvas.append(nodeDiv);
                //使之可拖动 和 连线
                jsPlumb.draggable(jsPlumb.getSelector(".process-step"));
                initEndPoints();
                //使可以连接线
                jsPlumb.makeTarget(jsPlumb.getSelector(".process-step"), {
                    dropOptions: { hoverClass: "hover", activeClass: "active" },
                    anchor: "Continuous",
                    maxConnections: -1,
                    endpoint: ["Dot", { radius: 1 }],
                    paintStyle: { fillStyle: "#ec912a", radius: 1 },
                    hoverPaintStyle: this.connectorHoverStyle,
                    beforeDrop: function (params) {
                        var j = 0;
                        $('#leipi_process_info').find('input').each(function (i) {
                            var str = $('#' + params.sourceId).attr('process_id') + ',' + $('#' + params.targetId).attr('process_id');
                            if (str == $(this).val()) {
                                j++;
                                return;
                            }
                        })
                        if (j > 0) {
                            defaults.fnRepeat();
                            return false;
                        } else {
                            return true;
                        }
                    }
                });
                return true;

            },
            addLabProcess: function (lab) {

                if (lab.id <= 0) {
                    return false;
                }
                var labDiv = document.createElement('div');
                var labId = "lab" + lab.id, badge = 'badge-inverse';

                $(labDiv).attr("id", labId)
                    .attr("style", lab.style)
                    .attr("process_id", lab.id)
                    .addClass("process-lab")
                    .html('<span class="process-flag badge ' + badge + '"></span>&nbsp;<span id="lab_span_' + lab.id + '">' + lab.process_name + '</span>')
                    .mousedown(function (e) {
                        if (e.which == 3) { //右键绑定
                            _canvas.find('#leipi_active_id').val(lab.id);
                            contextmenu.bindings = defaults.canvasLabMenu;
                            $(this).contextMenu('canvasLabMenu', contextmenu);
                        }
                    });

                _canvas.append(labDiv);
                //使之可拖动 和 连线
                jsPlumb.draggable(jsPlumb.getSelector(".process-lab"));
                initEndPoints();
                return true;

            },
            delProcess: function (activeId) {
                if (activeId <= 0) return false;

                $("#window" + activeId).remove();
                return true;
            },
            delLabNote: function (activeId) {
                if (activeId <= 0) return false;

                $("#lab" + activeId).remove();
                return true;
            },
            getActiveId: function () {
                return _canvas.find("#leipi_active_id").val();
            },
            copy: function (active_id) {
                if (!active_id)
                    active_id = _canvas.find("#leipi_active_id").val();

                _canvas.find("#leipi_copy_id").val(active_id);
                return true;
            },
            paste: function () {
                return _canvas.find("#leipi_copy_id").val();
            },
            getProcessInfo: function () {
                try {
                    /*连接关系*/
                    var aProcessData = {};
                    $("#leipi_process_info input[type=hidden]").each(function (i) {
                        var processVal = $(this).val().split(",");
                        if (processVal.length == 2) {
                            if (!aProcessData[processVal[0]]) {
                                aProcessData[processVal[0]] = { "top": 0, "left": 0, "process_to": [] };
                            }
                            aProcessData[processVal[0]]["process_to"].push(processVal[1]);
                        }
                    })
                    /*位置*/
                    _canvas.find("div.process-step").each(function (i) { //生成Json字符串，发送到服务器解析
                        if ($(this).attr('id')) {
                            var pId = $(this).attr('process_id');
                            var pLeft = parseInt($(this).css('left'));
                            var pTop = parseInt($(this).css('top'));
                            if (!aProcessData[pId]) {
                                aProcessData[pId] = { "top": 0, "left": 0, "process_to": [] };
                            }
                            aProcessData[pId]["top"] = pTop;
                            aProcessData[pId]["left"] = pLeft;

                        }
                    })
                    return JSON.stringify(aProcessData);
                } catch (e) {
                    return '';
                }

            },
            getLabNoteInfo: function () {
                try {
                    var aLabNoteData = {};
                    /*位置*/
                    _canvas.find("div.process-lab").each(function (i) { //生成Json字符串，发送到服务器解析
                        if ($(this).attr('id')) {
                            var pId = $(this).attr('process_id');
                            var pLeft = parseInt($(this).css('left'));
                            var pTop = parseInt($(this).css('top'));
                            if (!aLabNoteData[pId]) {
                                aLabNoteData[pId] = { "top": 0, "left": 0 };
                            }
                            aLabNoteData[pId]["top"] = pTop;
                            aLabNoteData[pId]["left"] = pLeft;

                        }
                    })
                    return JSON.stringify(aLabNoteData);
                } catch (e) {
                    return '';
                }

            },
            clear: function () {
                try {

                    jsPlumb.detachEveryConnection();
                    jsPlumb.deleteEveryEndpoint();
                    $('#leipi_process_info').html('');
                    jsPlumb.repaintEverything();
                    return true;
                } catch (e) {
                    return false;
                }
            }, refresh: function () {
                try {
                    //jsPlumb.reset();
                    this.clear();
                    _canvas_design();
                    return true;
                } catch (e) {
                    return false;
                }
            }
        };
        return Flowdesign;


    } //$.fn
})(jQuery);