define('navPanel', ['components/common', 'dataModel', 'modal'], function (common, dataModel, modal) {
    var template = '\
<div class="nav-panel">\
    <div class="nav-left">\
        <ul>\
            <li data-nav="apphomepage">'+ SystemEnv.getHtmlNoteName(4106) /* 自定义页面 */ +'</li>\
            <li data-nav="layout">'+ SystemEnv.getHtmlNoteName(4107) /* 布局新建 */ +'</li>\
            <li data-nav="list">'+ SystemEnv.getHtmlNoteName(4108) /* 布局列表 */ +'</li>\
            <li data-nav="custom">'+ SystemEnv.getHtmlNoteName(4749) /* 自定义链接 */ +'</li>\
            <li data-nav="jscode">'+ SystemEnv.getHtmlNoteName(4634) /* 脚本 */ +'</li>\
        </ul>\
    </div>\
    <div class="nav-main">\
        <div class="apphomepage"> {{navContent}} </div>\
        <div class="layout"> {{navContent}} </div>\
        <div class="list"> {{navContent}} </div>\
        <div class="custom"> <textarea placeholder="'+ SystemEnv.getHtmlNoteName(4750) /* 请输入自定义链接 */ +'" class="area-control"></textarea> <div class="btn fill block">'+ SystemEnv.getHtmlNoteName(3451) /* 确定 */ +'</div> </div>\
        <div class="jscode"> <textarea class="area-control" placeholder="'+ SystemEnv.getHtmlNoteName(4751) /* 请输入脚本 */ +'"></textarea> <div class="btn fill block">'+ SystemEnv.getHtmlNoteName(3451) /* 确定 */ +'</div> </div>\
    </div>\
</div>';

    var cssText = '\
    .nav-panel { margin: 3px 0; width: 350px;vertical-align: top; position: fixed; border-radius: 0 0 3px 3px; box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.1); background: #fff; top:0; left:-999px; display: block; overflow: hidden; height: 240px; z-index: 110; box-sizing: content-box; }\
    .nav-panel.pos-top {margin-top: -5px;}\
    .nav-panel .btn, .nav-panel .form-control { margin-top: 10px; }\
    .nav-panel .area-control, .nav-panel .form-control { margin-top: 7px; }\
    .nav-panel .area-control { height: 180px; }\
    .nav-panel .nav-search { padding: 0 8px 5px 8px; }\
    .nav-panel:after { content: " "; display: table; clear: both; }\
    .nav-panel ul { padding: 0; margin: 0; }\
    .nav-panel ul li { cursor: pointer; padding: 10px 0; font-size: 13px; text-align: center; color: #333; border-bottom: 1px solid #e1e1e1; }\
    .nav-panel ul li:hover { background: #f1f1f1; color: #555;}\
    .nav-panel ul li.active { color: #5897fb; font-weight: bold; background: #fff; box-shadow: inset 4px 0 0 #5897fb; }\
    .nav-panel .nav-left { width: 90px; overflow: hidden; float: left; height: 100%; background: #eee; }\
    .nav-panel .nav-main { width: 260px; border: 0px solid; outline: none; height: 100%; float: left; }\
    .nav-panel .nav-main > div { padding: 0; clear: both; display: none; height: 100%; background-color: #fff; }\
    .nav-panel .nav-main .custom, .nav-panel .nav-main .jscode { padding: 5px 10px 0 10px; } \
    .nav-panel .nav-container { overflow-y: auto; overflow-x: hidden; height: calc(100% - 41px); } \
    .nav-panel .nav-container .noresult-tip { display: none; font-size: 12px; padding: 10px; }\
    .nav-panel .nav-container.noresult .noresult-tip { display: block; }\
    .nav-panel .nav-container > span { display: block; font-size: 13px; color: #666; padding: 5px 10px; border: 0; cursor: pointer;}\
    .nav-panel .nav-container > span.selected.over { background: #f1f1f1; color: #444; }\
    .nav-panel .nav-container > span:hover, .nav-panel .nav-container > span.selected.over:hover, .nav-panel .nav-container > span.selected { background: #5897fb; color: #fff; }\
';

    common.importCssText('navPanel', cssText);

    var sourcetypes = {
        PAGE_LIKN: 1,
        CUSTOM_LINK: 2,
        JS_CODE: 3
    };

    var navPanel = function(settings) {
        if (navPanel.instance) return navPanel.instance; // 单例
        settings = settings || {}
        this.$el = null; // 导航面板元素
        this.target = null; // 触发打开事件的目标元素
        this.afterSelected = settings.afterSelected || navPanel.afterSelected; // 选择navname后回调
        this.afterClose = settings.afterClose || function(el) { // 关闭navpanel的回调
            el.removeClass("sbToggle-btc-reverse");
        };

        navPanel.instance = this;
    }

    navPanel.pt = navPanel.prototype;

    navPanel.getNavsModel = function(isync) {
        return dataModel.get('navsModel', isync);
    };

    navPanel.renderNavs = function() {
        var navs = navPanel.getNavsModel(true),
            navTemplate = '<span id={{uiid}}>{{uiname}}</span>',
            match = false,
            items = [],
            panelEl;

        for (var itemname in navs) {
            match = itemname.match(/.*?homepage|layout|list.*?/g);

            if (!match) continue;

            items = navs[itemname] || items;
            if(~itemname.indexOf('list')) {
                items = items.filter(function(item) {
                    return item.ishide == 0;
                });
            }
            panelEl = $(common.getClass(match));

            if (items.length > 0) { // 存在nav数据则渲染
                panelEl.find('.nav-container')
                    .append(common.tempEngine(navTemplate, items));
            } else { // 不存在 则不渲染并清空panel
                panelEl.empty();
            }
        }
    };

    navPanel.renderNavLink = function ($target, nav) {
        var $navLink = $target.find(".nav-link");
        var uiid = nav.uiid;
        var istabBar = nav.istabBar;
        var sourcetype = nav.sourcetype;
        var isNotNeedLink = sourcetype != sourcetypes.PAGE_LIKN || (nav.istabBar && nav.ishomepage);

        // 标签栏 首页需不能跳转
        if (isNotNeedLink) {
            return $navLink.remove();
        };

        if (!$navLink.length) {
            $navLink = $("<div class='ellipsis nav-link'><a href='javascript:;'></a></div>");
            $target.append($navLink);
        }

        getNavname(uiid, function(name) {
            $navLink.find("a")
                .text(name)    
                .attr("title", nav.url||name)
                .data("uiid", String(uiid))
                .off("click.nav")
                .on("click.nav", function(e) {
                    var $link = $(this);
                    var uiid = $link.data("uiid");
                    var pageName = '<span class="main-color">' + $link.text() + '</span>';

                    modal.confirm(SystemEnv.getHtmlNoteName(5205) + " - " + pageName, { // 是否切换到页面
                        title: SystemEnv.getHtmlNoteName(3821), // 确认
                        skin: "layer-e9 layer-btn-text",
                        btn: [SystemEnv.getHtmlNoteName(5204), SystemEnv.getHtmlNoteName(5203)] // 切换 留在本页
                    }, function(index) {
                        if (!~uiid.indexOf("homepage_")) {
                            openAppUi(uiid);
                        } else {
                            openHomepage(common.toInt(uiid));
                        }
                        modal.close(index);
                    });
                    e.stopPropagation();
                });
        });
    };

    /** TabBar插件需要兼容老数据 */
    navPanel.getSourcetype = function (sourcetype, isTabBar) {
        if (!isTabBar) return sourcetype;

        return sourcetype <= 3 && sourcetypes.PAGE_LIKN ||
            sourcetype == 4 && sourcetypes.CUSTOM_LINK ||
            sourcetype == 5 && sourcetypes.JS_CODE;
    }

    navPanel.afterSelected = function(nav) {
        var suffix = this.find('input').attr('id').replace(/.*?(_.*)/, '$1'),
            sourcetype = parseInt(nav.sourcetype),
            uiview = $('#uiview' + suffix);

        $('#source' + suffix).val(sourcetype);

        sourcetype = navPanel.getSourcetype(sourcetype, nav.istabBar);

        switch (sourcetype) {
            case sourcetypes.PAGE_LIKN:
                uiview.val(nav.uiname);
                $('#ui' + suffix).val(nav.uiid);
                break;
            case sourcetypes.CUSTOM_LINK:
                uiview.val(nav.custom);
                $('#custom' + suffix).val(nav.custom);
                break;
            case sourcetypes.JS_CODE:
                uiview.val(SystemEnv.getHtmlNoteName(4634)); // 脚本
                $('#jscode' + suffix).val(nav.jscode);
        }
        
        navPanel.renderNavLink(this, nav);
    };

    navPanel.pt.render = function() {
        var np = this;

        np.$el && np.destory();
        
        np.create().events().customEvents().position();

        navPanel.getNavsModel()
            .then(function() {
                navPanel.renderNavs();
                np.$el.trigger('selected:nav');                
            });
    };

    navPanel.pt.create = function() {
        var navContent = '\
            <div class="nav-search"> <input class="form-control no-outline" placeholder="'+ SystemEnv.getHtmlNoteName(4748) /* 请输入检索项 */ +'" /> </div>\
            <div class="nav-container"> <div class="noresult-tip">'+ SystemEnv.getHtmlNoteName(4752) /* 未找到结果 */ +'</div> </div>\
        ';

        template = common.tempEngine(template, { navContent: navContent });
        this.$el = $(template);

        $('body').append(this.$el);

        return this;
    };

    navPanel.pt.events = function() {
        var np = this,
            $el = np.$el;
        var selectNavname = function(newnav) {
            var nav = np.target.data('nav') || {};
            var index = $el.find(".active").index() + 1;

            if(nav.istabBar) {
                newnav.sourcetype = index;
            }

            newnav = $.extend(nav, newnav);
            np.target.data('nav', newnav);
            np.afterSelected.call(np.target, newnav);
            np.close();
        }

        $el.find('ul').on('click.nav', 'li', function() { // navtab
            var navtabEl = $(this),
                panel = common.getClass(navtabEl.data('nav'));

            navtabEl.addClass('active').siblings().removeClass('active');
            $(panel).show().siblings().hide();
            setTimeout(function(panel) { // 切换navtab 自动focus input/textarea
                var panel = $(panel);

                return function() {
                    if (panel.find('input').length > 0) {
                        return panel.find('input').focus();
                    }
                    panel.find('textarea').focus();
                };
            }(panel));
        });

        $el.find('.nav-main').on('click', 'span', function() { // select nav
            var nav = $(this);

            selectNavname({
                sourcetype: 1,
                uiid: nav.attr('id'),
                uiname: nav.text()
            });
        }).on('input', '.nav-search input', function() { // search nav
            var inputEl = $(this),
                val = common.toLowerCase(inputEl.val()),
                navContainer = inputEl.parent().next(),
                navEls = navContainer.find('span'),
                hasresult = false, // 是否存在搜索结果
                ismatch = false; // 是否匹配搜索项

            if (navEls.length == 0) return;

            navEls.each(function(index, navEl) {
                navEl = $(navEl);
                ismatch = common.toLowerCase(navEl.text()).indexOf(val) != -1;
                hasresult = ismatch || hasresult;

                navEl.toggle(ismatch);
            });

            navContainer.toggleClass('noresult', !hasresult);
        }).on('mouseover', 'span', function() { // hover 背景色改变
            var selectedNav = $(this).parent().find('.selected')

            if (!selectedNav.hasClass('over')) selectedNav.addClass('over');
        });

        $el.find('.custom .btn').one('click', function() { // 自定义链接
            selectNavname({
                sourcetype: 2,
                custom: $(this).siblings('textarea').val()
            });
        });

        $el.find('.jscode .btn').one('click', function() { // 脚本编辑
            selectNavname({
                sourcetype: 3,
                jscode: $(this).siblings('textarea').val()
            });
        });

        $el.off('click').on('click', function(e) { // 禁止冒泡关闭
            e.stopPropagation();
        });

        $('body').one('click.navPanel', function() { // 全局关闭
            np.close();
        });

        return np;
    };

    navPanel.pt.customEvents = function() {
        var np = this,
            $el = np.$el;

        $el.on('selected:nav', function() {
            var navmain = $el.find('.nav-main'),
                nav = np.target.data('nav') || {},
                sourcetype = parseInt(nav.sourcetype),
                navEl, navtabEl, navParent;
            
            sourcetype = navPanel.getSourcetype(sourcetype, nav.istabBar);

            switch (sourcetype) {
                case 1: // 自定义, 布局
                    navEl = $(common.getId(nav.uiid));
                    navParent = navEl.parent();
                    navtab = navEl.parents().eq(1).attr('class') || 'apphomepage';
                    navtabEl = $('[data-nav=' + navtab + ']');
                    navEl.addClass('selected');
                    setTimeout(function() { // 如果页面未被删除, 则滚动到被选项的位置
                        navEl.length > 0 && navParent.scrollTop(navEl.offset().top - navParent.offset().top - navParent.scrollTop());
                    });
                    break;
                case 2: // 自定义链接
                    navEl = navmain.find('.custom textarea');
                    navtabEl = $('[data-nav="custom"]');
                    navEl.val(nav.custom);
                    setTimeout(function() {
                        navEl.focus();
                    });
                    break;
                case 3: // 脚本编辑
                    navEl = navmain.find('.jscode textarea');
                    navtabEl = $('[data-nav="jscode"]');
                    navEl.val(nav.jscode); // 脚本
                    break;
                default:
                    navtabEl = $('[data-nav="apphomepage"]'); // 默认打开自定义panel 当页面不存在(删除)
            }

            navtabEl.trigger('click', sourcetype);
        });

        return this;
    };

    navPanel.pt.position = function() {
        var position = common.position(this.target, this.$el);
        
        this.$el.toggleClass('pos-top', !!position);

        return this;
    };

    navPanel.pt.destory = function() {
        this.$el.remove();
    }

    navPanel.pt.close = function() {
        var np = this;

        np.destory();
        np.afterClose(np.target);
    };

    function getNavItems() {
        var navItems = navPanel.getNavsModel(true);

        return navItems.nav_items.filter(function(item) {
            return (item.uiid + "").indexOf("homepage_") != -1;
        });
    }

    function getNavname(uiid, handler) {
        if (!uiid) return;
        
        var item = null;

        getNavItems().every(function (navItem) {
            if (String(navItem.uiid) === String(uiid)) {
                item = navItem;
                return;
            }
            return true;
        });

        if (item) return handler(item.uiname);
    }

    return {
        run: function(settings) {
            return new navPanel(settings);
        },
        show: function(target, settings) {
            var panel = new navPanel(settings||{});

            panel.target = $(target);
            panel.render();
        },
        close: function() {
            var panel = new navPanel();

            panel.close();
        },
        setNav: function(el, nav) {
            var $el = $(el);
            $el.data('nav', nav);
            navPanel.renderNavLink($el, nav);
        },
        getNavname: getNavname,
        getNavItems: getNavItems,
        getListItems: function() {
            var navItems = navPanel.getNavsModel(true);
            
            return navItems.list_items;
        },
        loadNavItems: function(callback) {
            navPanel.getNavsModel()
                .then(function() {
                    callback();
                });
        }
    };
});