define(['mUtil', "Component"],function(mUtil, Component) {
	var TabBar = function(options) {
		var _tabBar = {};
		
		Component.super(this, options);
		
		this.type = "TabBar";
		this.tpl = this.type + "_html";
		this.css = this.type + "_css";
		
		var vm = this.viewModel = {
			tabs : [],
			badge : null,
			isFixedTop: false
		};
		
		this.beforeMount = function(){
			vm.pageid = this.$container.attr("id");
			vm.remindApis = [];

			vm.tabs.forEach(function(item){
				var icon = item.icon;
				var isNoImg = !icon || mUtil.isObject(icon) && !icon.normal && !icon.active;
				var _getItemClass = function() {
					if(isNoImg) return "wev-tabbar-noimg";
					if(icon.normal && icon.active && icon.normal != icon.active) return;

					return "wev-tabbar-singleimg";
				}, _getIcon = function() {
					var o = { normal: "", active: "" };

					if(isNoImg) return o;
					if(mUtil.isString(icon)) return { normal: icon, active: icon };

					o.normal = icon.normal || icon.active;
					o.active = icon.active || icon.normal;
					return o;
				};
				if(item.remind && item.remindapi && item.remindapi.api){
				    item.uuid = item.remindapi.uuid = mUtil.UUID();
				    item.apiid = item.remindapi.api.id;
                    vm.remindApis.push(item.remindapi);
                    delete item.remindapi;
                }
				item.itemClass = _getItemClass();
				item.icon = _getIcon();
			});
			if(vm.badge === true){
        		vm.badge = mUtil.getActionUrl(this.type, {action:"getBadge", "mec_id": this.id}, this.pageid);
    		}

            var permItems = vm.tabs.filter(function(item){
                return item.permission;
            });
            if(permItems.length){
                var perms = permItems.map(function(item){
                    return item.permission;
                });
                return this.judgePermission(perms).done(function(res){
                    if(res.status == '1'){
                        var permRes = res.data;
                        permRes.forEach(function(hasPerm, index){
                            if(!hasPerm){
                                vm.tabs.splice(vm.tabs.indexOf(permItems[index]), 1);
                            }
                        });
                    } else {
                        vm.tabs = [];
                    }
                }).fail(function(){
                    vm.tabs = [];
                });
            }
		};
		
		this.mounted = function(){
			var that = this;
			var $page = this.$container,
				$abbr = this.$el,
                position = vm.isFixedTop ? 'page-header' : 'page-footer',
				$content = $page.children(".page-content"),
				$comp = $abbr.children(".wev-comp-" + this.type);

			this.$once("moveComponent", function(){
                var $pageBound = $page.children('.' + position),
					$scroller = $content.children(".page-scroller");
                if(!$pageBound.length){
                    $pageBound = $("<div class=\""+position+"\"></div>");
                    vm.isFixedTop && $content.before($pageBound) || $content.after($pageBound);
                }

                if(!$abbr.parent().hasClass(position)){
                    vm.isFixedTop && $pageBound.prepend($abbr).show() || $pageBound.append($abbr).show();
                }

                $scroller.addClass("tabpanel in").attr("data-form", "show_hide").siblings(".tabpanel").each(function() {
                    this.firstintoBind = false;
                });

                var attrName = vm.isFixedTop ? "header-height" : "footer-height";
                var posCss = vm.isFixedTop ? "top" : "bottom";

                if($pageBound.height()){
                    $pageBound.attr(attrName, $pageBound.height());
                    $content.css(posCss, $pageBound.height() + "px");
                }else{
                    if($pageBound.attr(attrName)){
                        $content.css(posCss, $pageBound.attr(attrName) + "px");
                    }else{
                        $content.css(posCss, "0px");
                    }
                }
			});

			$comp.on("click", ".wev-tabbar-item", function(){
				var $that = $(this),
					index = $that.index(),
					tabItem = vm.tabs[index],
                    $pageHeader = $page.children('.page-header'),
                    $pageFooter = $page.children('.page-footer'),
					$abbr = $page.children(".page-header, .page-footer").children('abbr, .wev-topsearch-nav').not('[data-type="TabBar"]');

				if(index === 0) {
					//ios 首页头部有内容时 其他tab下拉能看到前一个页面bug
                    $abbr.show();
				} else {
				    $abbr.hide();
				}

                $content.css("top", $pageHeader.height() + "px");
				$content.css("bottom", $pageFooter.height() + "px");
				if(!$that.hasClass("wev-tabbar-active")){
					$that.addClass("wev-tabbar-active").siblings(".wev-tabbar-item.wev-tabbar-active").removeClass("wev-tabbar-active");
                } else {
                    var pageId = $that.attr('href').replace('#page_', '').replace('_scroller', '');
                    Mobile_NS.refresh(pageId);
				}
				
				mUtil.eval(tabItem.click, that.pageid);
			});
			
			_tabBar.loadBadge();
		};
		
		this.refreshBadge = function(){
			_tabBar.loadBadge();
		};

        this.judgePermission = function(perms) {
            var actionUrl = mUtil.getActionUrl(this.type, {action: "judgePermission"}, this.pageid);
            return $.ajax({
                url: mUtil.completeUrl(actionUrl),
                data: {
                    perms: JSON.stringify(perms)
                },
                type: 'POST',
                dataType: 'json'
            });
        }
		
		_tabBar.loadBadge = function(){
			if(vm.badge == null){
        		return;
        	}
        	var $badges = $(".wev-badge", this.$el);
        	require(["remindHelper"], function(helper){
				helper.renderBadge(vm.badge, $badges, vm.remindApis);
        	});
		};
		
		_tabBar.loadBadge = _tabBar.loadBadge.bind(this);
    };

    return Component.init(TabBar);
});