define(['mUtil', "Component", "idangerous"],function(mUtil, Component) {
    var NoticeBar = function(options) {
        var _noticeBar = {}, swiper;
        
        Component.super(this, options);
        
        this.type = "NoticeBar";
        this.tpl = this.type + "_html";
        this.keysOfSkipedVarParse = ['config'];
        this.css = this.type + "_css";

        var vm = this.viewModel = {
            header: {
                text: '',
                icon: ''
            },
            items: [],
            height: 40,
            autoplay: 3000,
            direction: "horizontal",
            totalSize: -1
        };
        
        this.beforeMount = function(){
            var pageid = this.pageid;
            if(vm.config){
                var dsInstance = mUtil.getInstance(vm.config.source, pageid), config = vm.config;
                if(!dsInstance){
                    mUtil.getLabel(6066, "数据来源配置不正确", function(label){
                        mUtil.console.error(label);
                    });
                    return;
                }
                
                if(dsInstance.getData){
                    var items = [],
                        data = dsInstance.getData(),
                        template = config.template;
                    
                    template = _noticeBar.replace(config.keymap, template);
                    
                    var totalSize = vm.totalSize;
                    if(mUtil.isArray(data)){
                        data.every(function(item, i){
                            if(totalSize == -1 || (totalSize != -1 && i < totalSize)){
                                items.push({
                                    content: mUtil.replaceValAndVarParser(template, data[i]),
                                    data: data[i]
                                });
                                return true;
                            }
                            return false;
                        });
                    }else{
                        items.push({
                            content: mUtil.replaceValAndVarParser(template, data),
                            data: data
                        });
                    }
                    vm.items = items;
                }else{
                    mUtil.getLabel(6067, "当前数据集控件版本较低，缺少getData方法", function(label){
                        mUtil.console.error(label);
                    });
                }
            }
            vm.items.forEach(function(item, i) {
                item.indexid = mUtil.UUID();
            });
        };
        
        this.mounted = function(){
            var that = this,
                $el = this.$el,
                $page = this.$container,
                $noticeHeader = this.$el.find(".wev-notice-header"),
                $swipeWrapper = this.$el.find(".swiper-container");
                
            var initSwiper = function(){
                var height = $noticeHeader.find("span").height() || vm.height;
                $swipeWrapper.find(".swiper-slide").each(function(){
                    var h = $(this).height();
                    height = h > height ? h : height;
                });
                
                $noticeHeader.css("height", height);
                $swipeWrapper.css("height", height);
                swiper = new Swiper($swipeWrapper[0], {
                    loop: vm.items.length > 1,
                    autoplayDisableOnInteraction: false,
                    height: height,
                    autoplay: vm.autoplay,
                    mode: vm.direction,
                    onInit: function(){
                        $swipeWrapper.find(".swiper-slide-duplicate").each(function(){
                            var newGroupId = mUtil.UUID();
                            $(this).find("img[data-groupid]").data("groupid", "duplicate_group_" + newGroupId);
                        });
                    }
                });
            }, initAfterParseVar = function(){
                var interval = setInterval(function(){
                    if($swipeWrapper.find("em[class^='var_']").length == 0){
                        initSwiper();
                        clearInterval(interval);
                    }
                }, 50);
            };
            vm.needParseVar ? initAfterParseVar() : initSwiper();
            
            var $pageScroller = $page.children(".page-content").children(".page-scroller");
            var isInTabbar = $page.hasClass("tabpanel") || $pageScroller.hasClass("tabpanel"),
                $topPage, tabPageId, $tabbarNav;
            if(isInTabbar){
                if($pageScroller.hasClass("tabpanel")){
                    $page = $pageScroller;
                }
                $topPage = $page.closest(".page"),
                tabPageId = $page.attr("id"),
                $tabbarNav = $topPage.find("a[href='#"+tabPageId+"']");
            }
            
            var mutationListener = function(){
                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type == "attributes") {
                            var attributeName = mutation.attributeName,
                                classList = mutation.target.classList,
                                pageShow = attributeName == 'style' && mutation.target.style.display !== 'none',
                                tabbarShow = attributeName == 'class' && classList.contains("wev-tabbar-item") && classList.contains('wev-tabbar-active'),
                                tabShow = attributeName == 'class' && classList.contains("wev-tab-panel") && !classList.contains('wev-tabpanel-hidden'),
                                pageShowAndInHiddenTab = pageShow && $el.closest(".wev-tabpanel-hidden").length > 0,
                                tabbarShowAndInHiddenTab = tabbarShow && $el.closest(".wev-tabpanel-hidden").length > 0,
                                pageShowAndInHiddenTabbar = pageShow && $el.closest(".tabpanel.out").length > 0;
                            
                            if(pageShow || tabShow || tabbarShow){
                                if(pageShowAndInHiddenTab || tabbarShowAndInHiddenTab || pageShowAndInHiddenTabbar) return;
                                swiper.startAutoplay();
                            }else{
                                swiper.stopAutoplay();
                            }
                        }
                    });
                });
                observer.observe(isInTabbar ? $topPage[0] : $page[0], {
                    attributes: true,  //configure it to listen to attribute changes,
                    attributeFilter: ['style']
                });
                
                isInTabbar && observer.observe($tabbarNav[0], {
                    attributes: true,
                    attributeFilter: ['class']
                });
                
                var $tabpanel = $el.closest(".wev-tab-panel");
                $tabpanel.length && observer.observe($tabpanel[0], {
                    attributes: true,
                    attributeFilter: ['class']
                });
            }
            mutationListener();
            
            $swipeWrapper.on("click", ".swiper-slide, .wev-file", function(e){
                var $this = $(this);
                var indexid = $this.data("index"), currData = {};
                var isImg = e.target.tagName.toLowerCase() === "img";
                var isFile = $this.hasClass("wev-file");
                
                vm.items.every(function(item) {
                    if(item.indexid != indexid) return true;
                    currData = item;
                    return false;
                });
                
                var stopPropagation = false;                
                if (vm.callback && mUtil.isFunction(vm.callback.click)) {
                    vm.callback.click.call(this, currData);
                    stopPropagation = true;
                }
                if(vm.dataurl && vm.dataurl.url){
                    var url = _noticeBar.replace(vm.dataurl.keymap, vm.dataurl.url);
                    var dataurl = mUtil.replaceVal(url, currData.data);
                    if (dataurl.indexOf("javascript") === 0) {
                        mUtil.eval(dataurl, that.pageid);
                    } else {
                        $u(dataurl);
                    }
                    stopPropagation = true;
                }
                if(stopPropagation){
                    e.stopPropagation();
                    e.preventDefault();
                }
            });
            mUtil.renderVarParser(vm.needParseVar);
        };
        
        _noticeBar.replace = function(keymap, template){
            var joinKey = "";
            Object.keys(keymap).forEach(function(key){
                key = key.replace('[', '\\[').replace(']', '\\]');
                if(key.indexOf("[id\\]")> -1 || key.indexOf("[text\\]") > -1){
                    joinKey = key + (joinKey ? "|" + joinKey : joinKey);
                } else {
                    joinKey += (joinKey ? "|" + key : key);
                }
            });
            joinKey && (template = template.replace(new RegExp(joinKey, "gm"), function(match){
                var value = keymap[match];
                if(value.indexOf("[id]")> -1) value = value.replace("[id]", "_original");
                if(value.indexOf("[text]")> -1) value = value.replace("[text]", "");
                return '{' + value + '}'
            }));
            return template;
        };
    };

    return Component.init(NoticeBar);
});