/// <reference path="jquery-3.3.1.min.js" />
/// <reference path="ke.js" />
/// <reference path="ke.ui.js" />
(function ($) {
    var base = $.fn.layout.methods;
    //宽高自适应控件
    $.fn.fit = function () {
        this._extend($.fn.layout, arguments);
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.width = 1;
            this.skin.height = 1;
            this.skin.css += "fit";
            this.skin.html = this.html();
        }
        this.initSize = function () {
            var par = this.autoSizeBox;
            if (par[0].tagName == "BODY" || par[0].tagName == "FORM") {
                par = ke.ui;
            }
            var w = par.width();
            var h = par.height();
            var items = this.parent().children();
            for (var i = 0; i < items.length; i++) {
                if (items[i] != this[0] && items[i].tagName != "SCRIPT" && items[i].tagName != "STYLE") {
                    var $el = $(items[i]);
                    var dis = $el.css("position");
                    if (dis != "absolute" && dis != "fixed" && $el.is(":visible"))
                        h -= $el._height();
                }
            }
            this._setSize(true, w, h);
            ke.ui.size(this);
        }
        return this;
    }
    //tab选项卡
    $.fn.tab = function () {
        var con = this;
        function getHeaderItem(opt) {
            var temp = {};
            if (opt.closable)
                temp.btnClose = "<div class=\"icon-btn icon-cross\">&nbsp;</div>";
            return ke.format("<div class=\"tab-header-item unselect\" {tabId}>{title}{btnClose}</div>", opt, temp);
        }
        function getBodyItem(opt) {
            var htm = "<div class=\"keui-panel tab-body-item {className}\" {attributes} style=\"{style}\" data-options=\"hidden:true";
            if (opt.data.url)
                htm += ",url:'{url}'";
            if (opt.data.urlParms) {
                var name = (opt.data.urlParms.name || opt.data.urlParms.toString().match(/function\s*([^(]*)\(/)[1]);
                htm += ",urlParms:" + name;
            }
            htm += "\">{html}</div>";
            return ke.format(htm, opt, opt.data);
        }
        function getTabOptions(con, index, el, config) {
            var opt = new ke.options(el, config);
            opt.parse({ closable: con.skin.closable, title: "tab" + index, tabId: "", urlParms: null });
            opt.index = index;
            opt.id = con.skin.id;
            if (el) opt.html = el.innerHTML;
            if (opt.tabId) opt.tabId = " id=\"" + opt.tabId + "\" ";
            opt.data.title = "";
            opt.data.hidden = true;
            return opt;
        }
        function scroll(fll) {
            var of = con.$headBox;
            var left = of.position().left;
            var items = of.children();
            if (!fll) {
                var width = con.$head.width() - 42;
                for (var i = 0; i < items.length; i++) {
                    var el = $(items[i]);
                    var t = parseInt(el.position().left + el._width());
                    if (t > (width - left)) {
                        left = width - t; break;
                    }
                }
            }
            else {
                for (var i = items.length - 1; i >= 0; i--) {
                    var t = parseInt($(items[i]).position().left);
                    if (t < Math.abs(left)) {
                        left = t * -1; break;
                    }
                }
            }
            of.animate({ left: left });
        }
        function getIndex(el) {
            var items = con.$headBox.children();
            for (var i = 0; i < items.length; i++) {
                if (el == items[i])
                    return i;
            }
            return -1;
        }
        function renderScroll() {
            var w = con.$headBox.width();
            if (w > con.$head.width()) {
                con.$headBox.addClass("tab-header-overflow");
                con.$head.append("<div class=\"button tab-header-scroll-left\"><</div><div class=\"button tab-header-scroll-right\">></div>");
                con.$head.find(".button").click(function (e) {
                    scroll($(e.target).hasClass("tab-header-scroll-left"));
                });
            }
            else {
                con.$headBox.removeClass("tab-header-overflow").css({ left: 0 });
                con.$head.find(".button").remove();
            }
        }

        this._extend($.fn.layout, arguments);
        this.initSkin = function () {
            this.skin.parse({ closable: false, tabIndex: 0, tabs: {}, position: 'top' });
            this.skin.css += " tab";
            var hh = "";
            var by = "";
            var items = this.children();
            for (var i = 0; i < items.length; i++) {
                var opt = getTabOptions(this, i, items[i], null);
                hh += getHeaderItem(opt);
                by += getBodyItem(opt);
            }
            hh = "<div class=\"tab-header\"><div class=\"tab-header-box\">" + hh + "</div></div>";
            by = "<div class=\"tab-body clear\">" + by + "</div>";
            if (this.skin.position == "top")
                this.skin.html = hh + by;
            else
                this.skin.html = by + hh;
        }
        this.initHandler = function () {
            this.$head = this.find(".tab-header");
            this.$headBox = this.$head.find(".tab-header-box");
            this.$body = this.find(".tab-body");
            this.$head.click(this, function (e) {
                var el = e.target;
                var con = e.data;
                if (el.className.indexOf("icon-btn") > -1)
                    con.close(getIndex(el.parentNode));
                else if (el.className.indexOf("tab-header-item") > -1)
                    con.select(getIndex(el));
            });
        }

        this.initSize = function (first) {
            var wh = this.getSize();
            this._setSize(true, wh[0], wh[1]);
            this.$head._setSize(false, wh[0]);
            this.$body._setSize(true, wh[0], this.height() - this.$head._height());
            renderScroll();
            if (first) {
                base.initSize.call(this, first);
                this.select(this.skin.tabIndex);
            }
        }
        //溢出情况下呈现滚动条
        this.select = function (i) {
            var cls = "tab-active";
            if (!$.isNumeric(i)) {
                i = getIndex(i);
            }
            this.$headBox.find("." + cls).removeClass(cls);
            this.$headBox.children().eq(i).addClass(cls);
            this.controls.forEach(function (d, k) {
                if (k != i) d.hide();
            }); 
            this.controls[i].show();
            this.controls[i].initSize();
            this.skin.tabIndex = i;
            this.trigger("tabShow");
            return this.controls[i];
        }
        this.close = function (i) {
            if (i == null) i = this.skin.tabIndex;
            var items = this.$headBox.children();
            if (i == this.skin.tabIndex) {
                if (i > 0)
                    this.select(i - 1);
                else if (items.length > 1 && i == 0) {
                    this.select(1);
                    this.skin.tabIndex = 0;
                }
            }
            $(items[i]).remove();
            ke.ui.destroy(this.controls[i]);
            items = this.$headBox.children();
            renderScroll();
        }
        this.add = function (config) {
            var opt = getTabOptions(this, this.controls.length, null, config);
            this.$headBox.append(getHeaderItem(opt));
            this.$body.append(getBodyItem(opt));
            renderScroll();
            ke.ui.render(this.$body, this);
            return this.select(opt.index);
        }
        this.tabShow = function () { ke.bindOrTrriger(this, "tabShow", arguments); }
        this.setHeaderTitle = function (title, i) {
            var items = this.$headBox.children();
            $(items[i || this.skin.tabIndex]).html(title + (this.skin.closeable ? "<div class=\"icon-btn icon-close\">&nbsp;</div>" : "")).attr("title", title);
        }
        return this;
    }
    //流式布局，默认内嵌元素50%平分
    $.fn.float = function () {
        this._extend($.fn.layout, arguments);
        function calClass(groups, l) {
            groups.forEach(function (el, i) {
                var cls = "";
                if (groups.length == 1)
                    cls = "f-fixed";
                else if (i == 0)
                    cls = "f-left";
                else if (i == groups.length - 1 && l <= 0.01)
                    cls = "f-right";
                else
                    cls = "f-center";
                el.className += " " + cls;
            });
        }
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.parse({ columns: 1, marginH: 16, marginV: 8, fitHeight: false });
            this.skin.css += " float-layout clear";
            var items = this.children();
            this.skin.id = (this.skin.id || "kefloat" + ($(".float-layout").length + 1));
            var id = " " + this.skin.id + "-";
            var groups = [];
            var l = 1;
            var rate = 1 / this.skin.columns;
            for (var i = 0; i < items.length; i++) {
                var el = items[i];
                if (el.className.indexOf("keui-") > -1) {
                    var w = this.skin.getSize("width", el);
                    if (w < 0) {
                        w = rate;
                        el.style.width = rate * 100 + "%";
                    }
                    l = ke.getFloat(l - w, 2);
                    if (l >= 0)
                        groups.push(el);
                    else {//计算css
                        calClass(groups, l);
                        l = 1 - w;
                        groups = [];
                        groups.push(el);
                    }
                }
            }
            calClass(groups, l);
            this.skin.html = this.html();
        }
        this.initSize = function (first) {
            var wh = this.getSize();
            this._setSize(true, wh[0], this.skin.height > 0 ? wh[1] : null);
            if (first) {
                var css = "";
                var mx = this.skin.marginH / 2 + "px";
                var top = this.skin.marginV + "px ";
                var id = this.skin.id;
                css += "\n#" + id + " .f-fixed{ margin-top:" + top + ";float:left;}";
                css += "\n#" + id + " .f-left{ margin:" + top + mx + " 0px 0px" + ";float:left;}";
                css += "\n#" + id + " .f-center{ margin:" + top + " " + mx + " 0px " + mx + ";float:left;}";
                css += "\n#" + id + " .f-right{ margin:" + top + " 0px 0px " + mx + ";float:right;}";
                css = "<style type=\"text/css\">" + css + "\n</style>";
                this.append(css);
            }
            base.initSize.call(this, first);
        }
        return this;
    }
    //列布局
    $.fn.columnLayout = function () {
        this._extend($.fn.layout, arguments);
        var avg = [];
        var fixed = [];
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.css += " column-layout clear";
            var items = this.children();
            for (var i = 0; i < items.length; i++) {
                var el = $(items[i]).addClass("fll");
                var w = this.skin.getSize("width", items[i]);
                if (w > 0)
                    fixed.push({ index: i, width: w });
                else
                    avg.push(i);
            }
            this.skin.html = this.html();
        }
        this.initSize = function () {
            var wh = this.getSize();
            var h = this.skin.height > 0 ? wh[1] : null;
            this._setSize(true, wh[0], h);
            h = this.height();
            var w = this.width();
            var leftWidth = w;
            var items = this.children();
            fixed.forEach(function (d, i) {
                var el = ke.setElSize(items[d.index], d.width > 1 ? null : w * d.width, h);
                if (el.is(":visible") || el[0].className.indexOf("keui-") > -1)
                    leftWidth -= el._width();
            });
            avg.forEach(function (d) {
                ke.setElSize(items[d], leftWidth / avg.length, h);
            })
            ke.ui.size(this);
        }
        return this;
    }
    //行布局
    $.fn.rowLayout = function () {
        this._extend($.fn.layout, arguments);
        var avg = [];
        var fixed = [];
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.css = "row-layout";
            if (this.skin.height < 0)//默认为100%高度
                this.skin.height = 1;
            var items = this.children();
            for (var i = 0; i < items.length; i++) {
                var h = this.skin.getSize("height", items[i]);
                if (h > 0)
                    fixed.push({ index: i, height: h });
                else
                    avg.push(i);
            }
            this.skin.html = this.html();
        }
        this.initSize = function () {
            var wh = this.getSize();
            this._setSize(true, wh[0], wh[1]);
            var h = this._height();
            var leftHeight = h;
            var items = this.children();
            fixed.forEach(function (d, i) {
                var el = ke.setElSize(items[d.index], null, d.height > 1 ? null : h * d.height);

                if (el.is(":visible") || el[0].className.indexOf("keui-") > -1)
                    leftHeight -= el._height();
            });
            avg.forEach(function (d) {
                ke.setElSize(items[d], null, leftHeight / avg.length);
            });

            ke.ui.size(this);
        }
        return this;
    }

    //居中控件
    $.fn.center = function () {
        this._extend($.fn.layout, arguments);
        this.initSkin = function () {
            base.initSkin.call(this);
            this.skin.html = this.html();
        }
        this.initSize = function () {
            var par = this.autoSizeBox;
            var w, h;
            if (par[0].tagName == "BODY" || par[0].tagName == "FORM") {
                w = $(window).width();
                h = $(window).height();
            }
            else {
                w = par.width();
                h = par.height();
            }

            this.css({ marginTop: (h - (this.height() || this.skin.height)) / 2, marginLeft: (w - this.width()) / 2 });
        }
        return this;
    }


})(jQuery);