// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;

// 设置默认值,目的是隐藏图层
jq("#rect").css("width", "0px;");
jq("#rect").css("height", "0px;");
//让你要画的图层位于最上层
jq("#rect").css("z-index", "10000000");

// 记录鼠标按下时的坐标
var startX = 0;
var startY = 0;
// 记录鼠标抬起时候的坐标
var endX = startX;
var endY = startY;

// var rectItems;

//处理鼠标按下事件
function down(event) {
    console.log(event, window.basFlow.rectItems, 'eventeventevent')
    var obj = window.event ? event.srcElement : evt.target;
    console.log(obj.id, 'ididid')
    if (obj.id.indexOf('DRAW') > -1) {
        //重置容器框初始样式
        // jq("#rect").attr("style", "position: absolute; background-color: rgb(195, 213, 237);opacity:0.6;border: 1px dashed rgb(0, 153, 255);z-index: 9");
        jq("#rect").attr("style", "position: absolute;border: 2px dashed rgb(0, 153, 255);z-index: 9");
        jq("#rect").empty();
        //清空框选中的项
        if (window.basFlow.rectItems)
        window.basFlow.rectItems.length = 0;

        // 鼠标按下时才允许处理鼠标的移动事件
        select = true;
        // 取得鼠标按下时的坐标位置
        // startX = event.clientX;
        // startY = event.clientY;
        startX = event.clientX - jq('.GooFlow_workArea').offset().left;
        startY = event.clientY - jq('.GooFlow_workArea').offset().top;

        console.log(startX, startY)

        //startX = event.offsetX;
        //startY = event.offsetY;

        //设置你要画的矩形框的起点位置
        jq("#rect").offset().left = startX;
        jq("#rect").offset().top = startY;

        //jq("#rect").css("left", startX);
        //jq("#rect").css("top", startY);
    }
}

//鼠标抬起事件
function moveUp(event) {
    console.log(select, 'moveUp')
    if (select) {
         // 去掉任务 所有选中的状态
         for (var index = 0; index < basFlow.curId.length; index++) {
            if (basFlow.curId[index]) {
              if (/CONTROL/.test(basFlow.curId[index])) {
                basFlow.controls[basFlow.curId[index]].blur();
              }
            }
          }
        var w = jq("#rect").width();
        var h = jq("#rect").height();
        if (w > 10 && h > 10) {
            jq("#rect").css("display", "block");
            window.basFlow.rectItems = new Array();

            //查找被框选中的元素  ------start
            var obj = jq(".GooFlow_workArea");
            var childs = obj.children('.control');
            console.log(childs)
            for (var i = 0; i < childs.length; i++) {
                if (childs[i].id == "rect") {
                    continue;
                } else {
                    var x = 0, y = 0;
                    var child = jq("#" + childs[i].id);
                    var childleft = child.offset().left - jq('.GooFlow_workArea').offset().left;
                    var childtop = child.offset().top - jq('.GooFlow_workArea').offset().top;
                    //var childleft = parseInt(child.css("left").replace("px", ""));
                    //var childtop = parseInt(child.css("top").replace("px", ""));

                    x = childleft;
                    y = childtop;

                    var rectleft = parseInt(jq("#rect").css("left").replace("px", ""));
                    var recttop = parseInt(jq("#rect").css("top").replace("px", ""));
                    if (x > rectleft && y > recttop && (x + child.width()) < (rectleft + jq("#rect").width()) &&
                        (y + child.height()) < (recttop + jq("#rect").height()) && jq("#" + childs[i].id).attr('data-type') !== 'process') {
                            window.basFlow.rectItems.push(childs[i]);

                        if (child.hasClass("PanelSty_Checked")) {
                            child.removeClass("PanelSty_Checked");
                            child.find("#ui-resizable-nw").removeClass("ui-resizable-nw");
                            child.find("#ui-resizable-n").removeClass("ui-resizable-n");
                            child.find("#ui-resizable-ne").removeClass("ui-resizable-ne");
                            child.find("#ui-resizable-e").removeClass("ui-resizable-n");
                            child.find("#ui-resizable-se").removeClass("ui-resizable-se");
                            child.find("#ui-resizable-s").removeClass("ui-resizable-s");
                            child.find("#ui-resizable-sw").removeClass("ui-resizable-sw");
                            child.find("#ui-resizable-sw").removeClass("ui-resizable-sw");
                            child.find("#ui-resizable-w").removeClass("ui-resizable-w");
                        }
                    }
                }
            }
            //查找被框选中的元素  ------end


            //重新设置框选容器的大小、位置，并将被框选中的元素移入框选容器   -------start
            if (window.basFlow.rectItems.length > 0) {
                var left = 0, top = 0, maxW = 0, minW = 0, maxH = 0, minH = 0;
                for (var i = 0; i < window.basFlow.rectItems.length; i++) {
                    var item = jq("#" + window.basFlow.rectItems[i].id);
                    var itemleft = item.offset().left - jq('.GooFlow_workArea').offset().left;
                    var itemtop = item.offset().top - jq('.GooFlow_workArea').offset().top;
                    //var itemleft = parseInt(item.css("left").replace("px", ""));
                    //var itemtop = parseInt(item.css("top").replace("px", ""));

                    if (i != 0) {
                        if (itemleft <= left)
                            left = itemleft;
                        if (itemtop <= top)
                            top = itemtop;

                        if ((itemleft + item.width()) >= maxW)
                            maxW = itemleft + item.width();
                        if (itemleft <= minW)
                            minW = itemleft;

                        if ((itemtop + item.height()) >= maxH)
                            maxH = itemtop + item.height();
                        if (itemtop <= minH)
                            minH = itemtop;

                    }
                    else {
                        left = itemleft;
                        top = itemtop;

                        maxW = itemleft + item.width();
                        minW = left;
                        maxH = itemtop + item.height();
                        minH = top;
                    }
                }
                jq("#rect").css("left", left);
                jq("#rect").css("top", top);
                jq("#rect").width(Math.abs(maxW - minW));
                jq("#rect").height(Math.abs(maxH - minH));
            } else {
                jq("#rect").css("display", "none");
            }
            //重新设置框选容器的大小、位置，并将被框选中的元素移入框选容器   -------end
        } else {
            jq("#rect").css("display", "none");
        }
    }

    //鼠标抬起,就不允许在处理鼠标移动事件
    select = false;

    // AddBorder(jq("#rect"));
    // jq("#rect").resizable({
      //   // helper: ".ui-resizable-handle",
      //   // handles: 'e',
      //   start: function (event, ui) {
      //     console.log('resizableresizable', ui)
      //   }
      // })
}

//鼠标移动事件,最主要的事件
function move(event) {
    /*
    这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
    我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
    */
    if (select) {
        // 取得鼠标移动时的坐标位置
        // endX = event.clientX;
        // endY = event.clientY;
        endX = event.clientX - jq('.GooFlow_workArea').offset().left;
        endY = event.clientY - jq('.GooFlow_workArea').offset().top;

        //endX = event.offsetX;
        //endY = event.offsetY;

        var r = jq("#rect");

        // 设置拉框的大小    
        jq("#rect").width(Math.abs(endX - startX));
        jq("#rect").height(Math.abs(endY - startY));

        jq("#rect").css("display", "block");

        // A part
        if (endX < startX && endY < startY) {
            jq("#rect").css("left", endX);
            jq("#rect").css("top", endY);
        }

        // B part
        if (endX > startX && endY < startY) {
            jq("#rect").css("left", startX);
            jq("#rect").css("top", endY);
        }

        // C part
        if (endX < startX && endY > startY) {
            jq("#rect").css("left",endX);
            jq("#rect").css("top", startY);
        }

        // D part
        if (endX > startX && endY > startY) {
            jq("#rect").css("left", startX);
            jq("#rect").css("top", startY);
        }

        /*
        这两句代码是最重要的,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
        拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
        这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
        这两行代码是拉框最核心的部分.
        */
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }

}

function AddBorder(obj) {
    jq(obj).append(jq('<div id="ui-draggable-e1" class="ui-draggable-border" style="height: 100%; width: 5px;  right:0px;bottom: 0px; "></div>'));
    jq(obj).append(jq('<div id="ui-draggable-n1" class="ui-draggable-border" style="height: 5px; width: 100%;  top:0px;"></div>'));
    jq(obj).append(jq('<div id="ui-draggable-w1" class="ui-draggable-border" style="height: 100%; width: 5px; bottom: 0px;"></div>'));
    jq(obj).append(jq('<div id="ui-draggable-s1" class="ui-draggable-border" style="height: 5px; width: 100%; bottom:0px;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-e" class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-s" class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-se" class="ui-resizable-handle ui-resizable-se" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-n" class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-w" class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-ne" class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-nw" class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>'));
    jq(obj).append(jq('<div id="ui-resizable-sw" class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>'));
}


jq(function () {
    // if (jq("#rect")) {
    //     console.log(1111111)
    // } else {
    //     console.log(22222)
    //     return
    // }
    // if (jq("#rect")) {
        // jq('.GooFlow_workArea').append('<div id="rect" class="moveRect" style="position: absolute; background-color: rgb(195, 213, 237); opacity: 0.6; border: 1px dashed rgb(0, 153, 255); display: none;"></div>');
 
        // jq("#rect").draggable();
        // jq(".moveRect").draggable({
        //     handle: ".moveRect",
        //     cursor: 'move',
        //     containment: ".GooFlow_workArea",
        //     scroll: false,
        //     start: function (event, ui) {
        //         console.log(11111111111)
        //         begintop = jq(this).offset().top;
        //         beginleft = jq(this).offset().left;
        //     },
        //     drag: function (event, ui) {
        //         console.log(2222222222)
        //         var endtop = ui.position.top;
        //         var endleft = ui.position.left;

        //         topdiff = endtop - begintop;
        //         leftdiff = endleft - beginleft;
        //     },
        //     stop: function (event, ui) {
        //         console.log(333333333333)
        //         //重新设置容器框内元素位置
        //         if (window.basFlow.rectItems) {
        //             for (var i = 0; i < window.basFlow.rectItems.length; i++) {
        //                 var item = jq("#" + window.basFlow.rectItems[i].id);
        //                 item.css("top", item.offset().top + topdiff);
        //                 item.css("left", item.offset().left + leftdiff);
        //             }
        //         }
        //     }
        // });
        // jq('.GooFlow_workArea').on('dragstart', '#rect', function (event, ui) {
        //     console.log(111111111)
        // })
        // jq('.GooFlow_workArea').on('drag', '#rect', function (event, ui) {
        //     console.log(2222222)
        // })
        // jq('.GooFlow_workArea').on('dragstop', '#rect', function (event, ui) {
        //     console.log(3333333333)
        // })
    // }
});