define('appdesigner', ['utils', 'modal', 'header', 'phone', 'leftMenu', 'pagesTree', 'pluginAttr', 'thumbnail', 'dataModel', 'appdesigner/constants', 'urlSelectPanel'], function (_u, modal) {
    var header = require('header'),
        leftMenu = require("leftMenu"),
        phone = require('phone'),
        pagesTree = require('pagesTree'),
        pluginAttr = require('pluginAttr'),
        thumbnail = require('thumbnail'),
        dataModel = require("dataModel"),
        constants = require('appdesigner/constants');
        
    var is = pagesTree.is,
        ajaxForNodeOp = pagesTree.ajaxForNodeOp,
        getPageTreeObj = pagesTree.getPageTreeObj,
        isIncludeHomepage = pagesTree.isIncludeHomepage;

    var excu = {
        setHomePage: function () {
            var currNode = pagesTree.getTreeNode(this),
                homeNode = pagesTree.getHomepage().node;

            if (currNode == homeNode) return;

            setHomePage(currNode, homeNode);
        },
        delNode: function () {
            var treeNode = pagesTree.getTreeNode(this),
                action = 'deletePage',
                mod = "designer",
                name = "<span class='highlight'>" + treeNode.name + "</span>",
                msg = constants.DEL_PAGE_TIP + name + ' ?';

            if (is('F', treeNode.id)) {
                var flag = isIncludeHomepage(treeNode);
                if(!flag){
                    //不存在首页
                    action = 'deletePageFolder';
                    msg = constants.DEL_GROUP_TIP + name + ' ?' +
                        '<div class="warn">' + constants.DEL_GROUP_WARN + '</div>';
                }
                else{
                    //存在首页
                    modal.alert(constants.NOT_DEL_GROUP_HOMEPAGE);
                    return;
                }
            }

            if (treeNode.typeRM == "formui") {
                action = 'deleteAppFormUI';
            }

            modal.confirm(msg, function (index) {
                $.when(removeNode(mod, action, _u.toInt(treeNode.id)))
                    .done(function (res) {
                        var data = res.data;

                        // 如果删除被选中节点, 则跳到首页
                        if (pagesTree.isSelectedNode(treeNode)) {
                            openHomepage(pagesTree.getHomepage().node);
                        }
                        pagesTree.removeTreeNode(treeNode);

                        if (data.api_delmodel != undefined) {
                            pagesTree.removeTreeNode(pagesTree.getParentNodeByModelId(data.api_delmodel));
                        }

                        modal.close(index);
                        thumbnail.hide();
                        _u.updateNavsModelEx();
                        _u.urlSelector();
                        var urlSelectPanel = require('urlSelectPanel');
                        urlSelectPanel.clearPageCache();
                    });
            });
        },
        markColor: markColor,
        copyPage: function () {
            var zTreeObj = getPageTreeObj(),
                tId = this.parents('.ztree-menu').data('tId') || "pages_1",
                treeNode = zTreeObj.getNodeByTId(tId),
                cNode;

            if (treeNode.hasOwnProperty("uitype")){
                cNode = zTreeObj.copyNode(zTreeObj.getNodeByTId("pages_1"), treeNode, 'inner');
            }else{
                cNode = zTreeObj.copyNode(treeNode, treeNode, 'next');
            }

            cNode.name = treeNode.name + ' - ' + constants.COPY;
            cNode.iconSkin = "diy01";
            cNode.ishomepage = "0";
            cNode.color = ""; // 重置节点的字体颜色
            cNode.isCopy = true;
            cNode.newName = cNode.name;
            cNode.warnflag = 0;
            cNode.desc = "";


            zTreeObj.updateNode(cNode);
            zTreeObj.editName(cNode);
            pagesTree.onEditName(cNode);

        },
        createGroup: function () {
            pagesTree.createNode(this, true);
        },
        createPage: function () {
            pagesTree.createNode(this, false);
        },
        createModule: function () {
            require(['moduleCreate'], function (moduleCreate) {moduleCreate.show();});
        },
        editNode: function () {
            var zTreeObj = getPageTreeObj(),
                treeNode = pagesTree.getTreeNode(this);

            zTreeObj.editName(treeNode); //节点进入可编辑状态
            pagesTree.onEditName(treeNode);
            modal.closeAll('tips');
        },
        save: function () {
            phone.savePageContent(header);
        },
        fullScreen: function () {
            this.attr("data-tip", constants.MIN);
            changeDirective(this, 'normalScreen', fullScreen);
            $('.context-menu').find('.icon-full-screen').trigger('click');
        },
        normalScreen: function () {
            this.attr("data-tip", constants.MAX);
            changeDirective(this, 'fullScreen', normalScreen);
            $('.context-menu').find('.icon-normal-screen').trigger('click');
        },
        sourceCode: function () {
            if (!phone.getIsPageLoaded()) return;

            header.sourcecode($(this));
        },
        pageSetting: function () {
            pluginAttr.setAttrView('attr');
        },
        transferPage: function () {
            var treeNode = pagesTree.getTreeNode(this),
                homePageNode = pagesTree.getHomepage().node;

            if (treeNode == homePageNode) return;


            require(['pageTransfer'], function (transfer) {
                transfer.show(_u.toInt(treeNode.id), function () {
                    // 转移当前页之后 需要打开首页
                    pagesTree.isSelectedNode(treeNode) && openHomepage(homePageNode);
                    pagesTree.removeTreeNode(treeNode);
                });
            });
        },
        shortcutHelp: function () {
            require(['appdesigner/shortcut'], function (shortcut) {
                shortcut.showHelp();
            });
        },
        publish: function () {
            var dlg = top.createTopDialog();
            var url = "/mobilemode/admin/version.jsp?appid=" + dataModel.get("appid");

            dlg.Width = 560;
            dlg.Height = $("body").height() * 0.7;
            dlg.URL = url;
            dlg.btn = false;
            dlg.Title = SystemEnv.getHtmlNoteName(4833);  // 应用发布
            dlg.show();
            dlg.onCloseCallbackFn = function (ispublish) {
                header.publish(ispublish);
            };
        },
        genStaticResources: function () {
            var content = constants.GENING_STATIC_RESOURCES;
            var index = $(this).data("index");

            genStaticResources(index, content);
        },
        updateStaticResources: function () {
            var content = constants.UPDATING_STATIC_RESOURCES;
            var index = $(this).data("index");

            genStaticResources(index, content);
        },
        preview: header.preview,
        inlinePreview: header.inlinePreview,
        refresh: header.refresh,
        qrCode: header.qrCode,
        exportApp: header.exportApp,
        restoreApp: header.restoreApp,
        setSkin: header.setSkin,
        pageLink: header.pageLink
    };
    
    function fullScreen() {
        $("#app").removeClass("normal-screen").addClass("full-screen");
    }

    function normalScreen() {
        $("#app").removeClass("full-screen").addClass("normal-screen");
    }
    
    /** 设置首页 */
    function setHomePage(currNode, homeNode) {
        return ajaxForNodeOp("designer", {
            action: 'setHomepage',
            data: {
                appid: _appid,
                id: _u.toInt(currNode.id)
            }
        }, function () {
            var zTreeObj = pagesTree.getPageTreeObj();
            var _changeMenus = function (tId, disabled) {
                var $menu = $('#' + tId + '_a').find('.ztree-menu');
                var $wrapper = $menu.find('[data-disabled]').parent();

                $wrapper.toggleClass('disabled', disabled);
            };

            currNode.ishomepage = 1;
            currNode.iconSkin = 'diy02';
            currNode.color = $('#' + currNode.tId + '_a').css('color');

            zTreeObj.updateNode(currNode);

            if (homeNode) {
                switch(homeNode.uitype){
                    case '0':
                        homeNode.iconSkin = 'diy04'; 
                        break;   
                    case '2':
                        homeNode.iconSkin = 'diy05';
                        break;
                    case '3':
                        homeNode.iconSkin = 'diy06';
                        break;
                    case '1':
                    default:
                        homeNode.iconSkin = 'diy01';
                }
                homeNode.ishomepage = 0;
                homeNode.color = $('#' + homeNode.tId + '_a').css('color');
                zTreeObj.updateNode(homeNode);
                _changeMenus(homeNode.tId, false);
            }
            
            _changeMenus(currNode.tId, true);
            pagesTree.setHomepage();
        });
    }

    /** 删除节点 */
    function removeNode(mod, action, id) {
        return ajaxForNodeOp(mod, {
            action: action,
            data: {
                appid: dataModel.get('appid'),
                id: id
            }
        });
    }

    /** 标记节点颜色操作 */
    function markColor() {
        var $el = $(this),
            color = $el.hasClass('cancel-markcolor')?'':$el.css("background-color"),
            tId = $el.parents('.ztree-menu').data('tId'),
            treeNode = getPageTreeObj().getNodeByTId(tId);

        $('#' + tId + '_a').css('color', color);
        return ajaxForNodeOp("designer", {
            action: 'markColorWithPage',
            data: {
                id: _u.toInt(treeNode.id),
                color: color
            }
        });
    }

    /** 生成静态资源 */
    function genStaticResources (closeIndex, content) {
        var index;
        
        modal.closeMsg(closeIndex);

        setTimeout(function () {
            index = modal.loading(content);
        }, 10);

        return _u.api("app", {
            action: "genOrSyncStaticResource",
            data: {
                appid: dataModel.get("appid")
            },
            notification: {
                success: constants.OPERATION_SUCCESS
            }
        }).then(function () {
            modal.closeMsg(index);
        });
    }

    /* 添加皮肤 */
    _skinId && header.changeSkinStyle("/mobilemode/skin/" + _skinId + "/_.css");

    require(['jquery.hover'], function () {
        var tipIndex;
        // 节点后功能菜单操作
        $('#pages').hoverIntent({
            selector: 'li[treenode]>a',
            interval: 50,
            timeout: 50,
            over: function () {
                if (!this.id) return;

                var $el = $(this),
                    treeNodeId = $el.parent()[0].id,
                    treeNodeObj = getPageTreeObj().getNodeByTId(treeNodeId),
                    pageId = treeNodeObj.id;

                if (isEditing(treeNodeId) || is('M', pageId)) return;

                if (is('SC', pageId) && treeNodeObj.thumbnail) {
                    thumbnail.show($el, treeNodeObj);
                }

                var $dropdownTrigger = $el.find(".dropdown-toggle");

                if ($dropdownTrigger.length) return $dropdownTrigger.show();
                // 添加至pages_x_a中, 由于w3c规范a标签中不应该含有a标签, 所以main-color不能为a标签, 否则搜索时调用unhighlight的$el.html()后a标签将被移至与pags_x_a同级
                $dropdownTrigger = $('<span class="dropdown-toggle"><span class="main-color"><i class="iconfont icon-arrow-down2 fa fa-small"></i></span></span>');
                $dropdownTrigger.on("click", function () { return false; });
                $el.append($dropdownTrigger);
            },
            out: function (e) {
                var $related = $(e.relatedTarget);

                if (!$related.parents().hasClass('ztree-menu')) {
                    $("body").find('.ztree-menu[data-type=hover]').removeClass('show');
                    $(this).find(".dropdown-toggle").hide();
                }

                thumbnail.hide();
            }
        })
        .hoverIntent({
            selector: '.dropdown-toggle',
            interval: 50,
            timeout: 50,
            over: function () {
                var $el = $(this),
                    treeNodeId = $el.closest("li")[0].id,
                    treeNodeObj = getPageTreeObj().getNodeByTId(treeNodeId),
                    pageId = treeNodeObj.id;
                var settings = {
                    type: "parent-menu",
                    datashow: false,
                    copyText: "/mobilemode/formbaseview.jsp?uiid="
                };

                if (!is('S|F', pageId)) {
                    settings.type = 'children-menu';
                } else if (is('F', pageId)) {
                    settings.datashow = true;
                }

                if (is('SC', pageId)) {
                    settings.datashow = true;
                    settings.copyText = "/mobilemode/appHomepageView.jsp?appHomepageId=";
                }

                initMenu.call(this, settings, treeNodeObj);
            },
            out: function () { }
        });

        function initMenu(settings, treeNode,position) {
            var $el = $(this),
                menuClass = _u.toClass(settings.type),
                $menu = $('body').find(menuClass);

            if (!$menu.length) {
                $menu = createMenu(settings.type);
            }

            var data = {
                tId: treeNode.tId,
                id: _u.toInt(treeNode.id),
                copyText: settings.copyText
            };
            $menu.data(data)
                .find("[data-show]").toggle(settings.datashow);

            require(["components/common"], function (common) {
                var ishomepage = pagesTree.getHomepage().node == treeNode;
                var isModule = is('M', treeNode.pId);
                if(position===undefined){
                    $menu.attr('data-type','hover');
                    common.position($el, $menu,'center');
                }else{
                    $menu.attr('data-type','click');
                    var menuWidth = $menu.outerWidth(),
                        menuHeight = $menu.outerHeight();
                    position.left -= menuWidth/2;
                    if(position.top+menuHeight>$('body').outerHeight()){
                        position.top -= menuHeight+$el.outerHeight(); 
                    }
                    $menu.css({ top: position.top, left: position.left });
                }
                $menu.find('[data-disabled]').parent().toggleClass('disabled', ishomepage);
                if(isModule){
                    $menu.find('.icon-transfer-page').parents('li').addClass('disabled');
                }
                if($menu.hasClass('parent-menu')){
                    $('body').find('.children-menu').removeClass('show');
                }else{
                    $('body').find('.parent-menu').removeClass('show');
                }
                $menu.addClass('show');
            });
        }

        function createMenu(menuType) {
            var menuId = _u.toId(menuType),
                menuTmp = $(menuId).html();
            $menu = $(menuTmp);

            $("body").append($menu);
            initMenuCopyEvent($menu[0].querySelectorAll("[data-copy]"));

            return $menu.on('click.hide', 'a', function (e) {
                var that = $(this),
                    directive = that.data("directive");

                e.stopPropagation(); // 阻止事件冒泡，执行父元素的onclick事件
                !that.parent().hasClass('disabled') && directive && excu[directive].call(that); // 由于事件冒泡被禁止，所以需要重新执行directive方法

                var $menu = that.parents('.ztree-menu'),
                    isCopy = that.data('copy');

                setTimeout(function () {
                    $menu.removeClass('show');
                }, !isCopy ? 0 : 500);
            }).on("mouseleave", function (e) {
                if($(this).attr('data-type')==='hover'){
                    $(this).removeClass("show");
                }
                $("#pages").find(".dropdown-toggle").hide();
            })
        }

        function initMenuCopyEvent(copyEles) {
            if (copyEles.length == 0) return;

            require(['clipboard'], function (Clipboard) {
                var clip = new Clipboard(copyEles, {
                    text: function (trigger) {
                        var $trigger = $(trigger),
                            $menu = $trigger.parents(".ztree-menu"),
                            prefix = $trigger.data('copy') != 'copyId' ? $menu.data("copyText") : '',
                            suffix = $menu.data('id');

                        return prefix + suffix;
                    }
                });
                clip.on('success', function (e) {
                    modal.tips(constants.COPIED, $(e.trigger), {
                        placement: "right",
                        time: 500,
                    });
                });
            });
        }
        //右击操作菜单
        $('#pages-container').on('mousedown.contextMenu','#pages li>a',function(e){
            if (e.buttons != 2) return ; // 非右击鼠标
            e.stopPropagation();
            $(this).parents('#pages').find('a').removeClass('curClickNode');
            $(this).addClass('curClickNode');
            var $this = $(this),
                top = $this.offset().top + $this.outerHeight(),
                left = e.pageX,
                position = {top:top,left:left};
            var $el = $this.find('.dropdown-toggle');
            if($el.length===0) return;
            var treeNodeId = $el.closest("li")[0].id,
                treeNodeObj = getPageTreeObj().getNodeByTId(treeNodeId),
                pageId = treeNodeObj.id;
            var settings = {
                type: "parent-menu",
                datashow: false,
                copyText: "/mobilemode/formbaseview.jsp?uiid="
            };

            if (!is('S|F', pageId)) {
                settings.type = 'children-menu';
            } else if (is('F', pageId)) {
                settings.datashow = true;
            }

            if (is('SC', pageId)) {
                settings.datashow = true;
                settings.copyText = "/mobilemode/appHomepageView.jsp?appHomepageId=";
            }

            initMenu.call(this, settings, treeNodeObj,position);
        })
        $('body').on('click',function(){
            $("body").find('.ztree-menu').removeClass('show');
            $('#pages').find('a').removeClass('curClickNode');
        })
        // 初始化所有的tooltip
        $('body').hoverIntent({
            interval: 300,
            selector: '[data-tip]',
            over: function () {
                var that = $(this),
                    content = that.attr('data-tip');

                tipIndex = modal.tips(content, that, that.data('placement'));
            },
            out: function () {
                modal.close(tipIndex); // 鼠标离开关闭tips
            }
        });
    });

    function isEditing(tId) {
        return $('#' + tId + '_input').length > 0;
    }
    
    /**
     *  初始化所有指令功能按钮
     */
    $('body').off('click.function', '[data-directive]')
        .on('click.function', '[data-directive]', function (e) {
            var that = $(this),
                directive = that.data("directive");

            directive && excu[directive] && excu[directive].call(that, e);
        });

    function changeDirective(dom, newDir, fn) {
        var originClass = dirToIconClass(dom),
            newClass = dirToIconClass(newDir);

        $(dom).data('directive', newDir)
            .find('i').removeClass(originClass)
            .addClass(newClass);
        typeof fn == 'function' && fn();
    }

    // 切换对应指令的icon
    function dirToIconClass(dom) {
        var iClass = function (dir) {
            return 'icon-' + dir.replace(/([A-Z])/g, '-$1').toLowerCase();
        };

        if (typeof dom == 'string')
            return iClass(dom);
        return iClass($(dom).data('directive'));
    }

    // 初始化尺子功能
    require(['rule'], function (Rule) {
        Rule();
    });

    /**
     * 右键菜单功能 // 需要暴露给外部调用
     */
    var rightMenu = function (container, ctx, force) {
        require(["contextMenu"], function (contextMenu) {
            var id, node, isMS;

            if (force) { // 供外部调用 手动执行菜单过滤
                id = dataModel.get("appHomepageId");
                node = pagesTree.getNodeByPageId(id);
                isMS = !!~node.pId.indexOf('M');
            }

            (ctx || contextMenu).init({
                container: container || 'body',
                items: [{
                    icon: "icon-save",
                    name: constants.SAVE,
                    shortcut: "Ctrl+S",
                    isshow: _whetherCanEdit,
                    handler: excu.save
                }, {
                    icon: "icon-preview",
                    name: constants.PREVIEW,
                    handler: excu.preview
                }, {}, {
                    icon: "icon-page",
                    name: constants.INIT_CONTENT,
                    isshow: isMS && _whetherCanEdit, // 只有模块布局有初始化内容
                    handler: function () {
                        modal.confirm(constants.INIT_CONTENT_TIP, {
                            loading: true
                        }, function (index) {
                            var appHomepageId = dataModel.get("appHomepageId");

                            _u.api("designer", {
                                action: "initHomepageContent",
                                data: { id: appHomepageId },
                                type: "post",
                                notification: {
                                    success: constants.INIT_CONTENT_SUCCESS + "!"
                                }
                            }).then(function () {
                                openHomepage(appHomepageId);
                                
                                require(['appdesigner'], function(_designer) {
                                	_designer.generateThumbnail(appHomepageId);
                                });
                                
                                modal.close(index);
                            }).fail(function () {
                                modal.close(index);
                            });
                        });
                    }
                }, {
                    icon: "icon-refresh",
                    name: constants.REFRESH,
                    handler: excu.refresh
                }, /*{
                    icon: "icon-full-screen",
                    name: constants.MAX,
                    handler: function (item) {
                        var fullScreenEl = $('[data-directive=fullScreen]');

                        if (~item.icon.indexOf('full')) { // 当前为最小化时      
                            item.icon = "icon-normal-screen";
                            item.name = constants.MIN;
                            fullScreenEl.attr("data-tip", constants.MIN);
                            changeDirective(fullScreenEl, 'normalScreen', fullScreen);
                        } else {
                            item.icon = "icon-full-screen";
                            item.name = constants.MAX;
                            fullScreenEl.attr("data-tip", constants.MAX);
                            changeDirective(fullScreenEl, 'fullScreen', normalScreen);
                        }
                    }
                },*/ {
                    icon: "icon-file-code",
                    name: constants.SOURCE_CODE,
                    handler: excu.sourceCode
                }, {
                    icon: "icon-skin",
                    name: constants.SKIN,
                    isshow: _whetherCanEdit,
                    handler: excu.setSkin
                }, {
                    icon: "icon-export",
                    name: constants.EXPORT,
                    isshow: _whetherCanDelete,
                    handler: excu.exportApp
                }, {
                    icon: "icon-qrcode",
                    name: constants.QR_CODE,
                    handler: excu.qrCode
                }, {
                    icon: "icon-backup",
                    name: constants.NEW_VERSION,
                    isshow: _whetherCanEdit,
                    handler: function () {
                        var _u = require("utils");
                        var name = 'app-backup?appid=' + dataModel.get("appid");
                        _u.openRcDialog(name,
                            constants.NEW_VERSION
                        );
                    }
                }, {
                    icon: "icon-savetemplate",
                    isshow: _whetherCanDelete,
                    name: constants.SAVE_AS_TEMPLATE,
                    handler: function () {
                        var tmpDlg = top.createTopDialog();//定义Dialog对象

                        tmpDlg.Model = true;
                        tmpDlg.Width = 720;//定义长度
                        tmpDlg.Height = 480;
                        tmpDlg.URL = "/mobilemode/admin/dialog/setup/saveAsTmp.jsp?appHomepageId=" + dataModel.get('appHomepageId');
                        tmpDlg.Title = constants.SAVE_AS_TEMPLATE;
                        tmpDlg.show();
                        tmpDlg.onCloseCallbackFn = function () {
                            leftMenu.initData("templet", true);
                            leftMenu.scrollToTop("templet");
                        }
                    }
                }, {
                    icon: "icon-staticpage",
                    name: constants.GE_STATIC_PAGE,
                    isshow: _whetherCanEdit,
                    handler: function () {
                        _u.api("designer", {
                            action: "generateStaticPage",
                            data: {
                                appid: dataModel.get("appid")
                            },
                            notification: {
                                success: constants.OPERATION_SUCCESS
                            }
                        });
                    }
                }, _anonymousAccessEnabled ? {
                    icon: "icon-page-url",
                    name: constants.ANONY_ADD,
                    handler: function () {
                        require(["pageLink"], function (link) {
                            link.showAnonymous();
                        });
                    }
                } : "", {
                    icon: "icon-Html",
                    name: constants.EXPORT_APP_AS_HTML,
                    isshow: _whetherCanDelete,
                    handler: function () {
                        require(["ad/exportHtml"], function (t) {
                            t.show();
                        });
                    }
                },
                  {
                    icon: "icon-setting",
                    name: constants.APP_SETTINGS,
                    isshow: _whetherCanEdit,
                    handler: function () {
                        var _u = require("utils");
                        var name = 'app-settings?appid=' + dataModel.get("appid");
                        _u.openRcDialog(name,
                          constants.APP_SETTINGS
                        );
                    }
                },
                  {}, {
                    icon: "icon-page-url",
                    name: constants.PAGE_ADDRESS,
                    handler: excu.pageLink
                }]
            });
            pagesTree.fallback.resolve();
        });
    };

    rightMenu();

    require(['appdesigner/shortcut']);

    // exports的方法
    return {
        openHomepage: function (id) {
            if (header.isSaving()) {
                return modal.warn(constants.DISABLED_SWITCH_PAGE_SAVING);
            }

            if (!$.isNumeric(id)) { // 传值为节点对象
                pagesTree.selectTreeNode(id);
                id = _u.toInt(id.id);
            }

            var node = pagesTree.getNodeByPageId(id);

            dataModel.update("appHomepageName", node.name);
            dataModel.update('appHomepageId', id);
            phone.getContent('update')
                .then(function () {
                    pluginAttr.updatePageAttr();
                });
            header.resetInlinePreview();

            var isMS = ~node.pId.indexOf('M') && node.uitype != 3; // 模块布局中的自定义页面

            pagesTree.toggleInitPageContent(isMS);

        },
        openAppUi: function (id) {
            var body = $('body');
            modal.iframe('/mobilemode/appuidesign.jsp?refresh=1&id=' + id, {
                area: [body.width() * 0.9 + 'px', body.height() * 0.9 + 'px'],
                maxmin: true,
                title: constants.LAYOUT_DESIGNER
            });
        },
        createMobileModelOnClick: function (formmodeappid, moduleid) {
            require(['moduleCreate'], function (mc) {
                mc.show(formmodeappid, moduleid);
            });
        },
        reloadThumbnail: function (id, thumbnail, timestamp) {
            var zTreeObj = getPageTreeObj(),
                treeNodes = zTreeObj.getNodesByParam('id', id);

            if (treeNodes.length > 0) {
                treeNodes[0].thumbnail = thumbnail;
                zTreeObj.updateNode(treeNodes[0]);
            }
            
            if(timestamp){
            	$("#thumbnail-frame-" + timestamp).remove();
            }
        },
        generateThumbnail: function(appHomepageId) {
        	var timestamp = new Date().getTime();
            var thumbsrc = '/mobilemode/admin/appThumbnail.jsp?appHomepageId=' + appHomepageId + "&_logEnabled=false&_mm_billid=a898e5d51ea4439095c86ed1b05e3bcb&timestamp="+timestamp;
            var $thumbnailFrame = $("iframe.thumbnail-frame[data-pageid='"+appHomepageId+"']");
            if($thumbnailFrame.length == 0){
            	$thumbnailFrame = $('<iframe id="thumbnail-frame-'+timestamp+'" src="" class="thumbnail-frame" data-pageid="'+appHomepageId+'" width="100%" height="0px" frameborder="0"></iframe>');
            	$(document.body).append($thumbnailFrame);
            }
            $thumbnailFrame.attr('src', thumbsrc);
        },
        getAppId: function () {
            return dataModel.get('appid') || _appid; // 兼容
        },
        rightMenu: rightMenu,
        save: excu.save
    };
});

define('header', ['vue', 'modal', 'utils', 'qr', 'ad/sourcecode', 'dataModel', 'appdesigner/constants'], function (Vue, modal, _u) {
    var dataModel = require('dataModel'),
        constants = require('appdesigner/constants');

    return new Vue({
        el: '#header-content',
        data: {
            classObj: {
                open: false, // 打开app菜单
                show: false, // 展示apps列表
                saving: false
            },
            search: {
                active: '', // 选中的条件(classify|status)
                condition: { // 查询条件
                    text: '',
                    classify: "",
                    status: ""
                }
            },
            appImage: "",
            apps: {
                data: null,
                classifies: [],
                status: [constants.ALL, constants.PUBLISHED, constants.UNPUBLISHED]
            },
            ispublish: false
        },
        methods: {
            toggleMenu: function (menu, e) { // app 下拉菜单
                if (!e || !$(e.relatedTarget).parents().hasClass('open'))
                    this.classObj.open = menu;
            },
            toggleApp: function (isOpen, e) {
                 require(["applist"], function (list) {
                    var currAppid = dataModel.get("appid");

                    list.open(currAppid);
                });
            },
            clear: function () {
                this.search.condition.text = '';
            },
            toggleDropdown: function (e) { // 搜索条件的下拉菜单
                var vm = this,
                    target = $(e.target),
                    currTarget = $(e.currentTarget),
                    type = currTarget.data('type'),
                    orType = vm.$data.search.active;

                e.stopPropagation();

                if (target.hasClass('selected')) return;

                vm.search.active = orType == type ? '' : type;

                if (target.parent().hasClass('drop-menus')) {
                    vm.search.condition[type] = target.text();
                    target.addClass('selected').siblings().removeClass('selected');
                }
            },
            isSaving: function () {
                return this.classObj.saving;
            },
            toggleSaving: function (isSaving) {
                return this.classObj.saving = isSaving === undefined ? !this.classObj.saving : isSaving;
            },
            refresh: function () { // 刷新页面
                location.reload();
            },
            qrCode: function () { // 扫描二维码
                var params = this.getBillIdParams();

                require('qr').show(params);
            },
            sourcecode: function () { // 源码
                var sourcecode = require('ad/sourcecode');
                var $icon = $(this.$el).find(".icon-file-code").parent();

                sourcecode.setActiveEle($icon);
                sourcecode.toggle();
            },
            preview: function (event) { //  预览
                var url = '/mobilemode/H5Check.jsp?url='+encodeURIComponent('/mobilemode/admin/preview.jsp?appHomepageId=' + dataModel.get('appHomepageId'));
                window.open(url, 'preview');
                event && event.preventDefault();
            },
            getBillIdParams: function(uitype) {
                var pageInfo = dataModel.get('appHomepageInfo', true);
                var uitype = String(uitype || pageInfo.uitype);
                var isDisplayOrEditLayout = uitype === '1' || uitype === '2';

                return isDisplayOrEditLayout ? '&billid=a898e5d51ea4439095c86ed1b05e3bcb' : '';
            },
            inlinePreview: function () { // 页内预览
                var offset = $('#phone-container').width() > 980 ? ['180px', '870px'] : ['180px', $('body').width() - 400 + 'px'];
                var appid = dataModel.get("appid"), appHomepageId = dataModel.get("appHomepageId");
                var billidParams = this.getBillIdParams();
                var url = '/mobilemode/H5Check.jsp?url=' + encodeURIComponent('/mobilemode/mobile/view.html?appid=' + appid + '&appHomepageId=' + appHomepageId + '&_logEnabled=false' + billidParams);
                
                modal.iframe(url, {
                    id: 'inline-preview',
                    zIndex: 90,
                    title: [constants.PREVIEW, 'center'],
                    area: ['375px', '667px'],
                    offset: offset,
                    shade: 0,
                    icon: false,
                    btn: false,
                    refresh: true,
                    iframeBack: function (iframe) {
                        iframe.contentWindow.history.go(-1);
                    }
                });
            },
            resetInlinePreview: function () {
                var vm = this;
                var modalIndex = modal.getFrameIndex('inline-preview');

                if (!modalIndex) return;

                dataModel.get('appHomepageInfo').then(function(pageInfo) {
                    var billidParams = vm.getBillIdParams(pageInfo.uitype);
                    
                    modal.iframeSrc(modalIndex, '/mobilemode/H5Check.jsp?url=' + encodeURIComponent('/mobilemode/mobile/view.html?appHomepageId=' + dataModel.get('appHomepageId') + '&_logEnabled=false' + billidParams));
                });
            },
            exportApp: function () { // 导出应用
                modal.confirm(constants.EXPORT_APP_TIP, {
                    loading: true
                }, function (index) {
                	window.open("/api/mobilemode/admin/app/exportWithStream?appid="+dataModel.get("appid"), "_self");
                	modal.close(index);
                });
            },
            restoreApp: function(){
                var _u = require("utils");
                var name = 'app-restore?appid=' + dataModel.get("appid");
                _u.openRcDialog(name,
                  constants.APP_VERSIONS
                );
            },
            setSkin: function () { // 设置皮肤
                var vm = this;
                require(['appSkin'], function (skin) {
                    var appid = dataModel.get("appid");

                    skin.show(appid, function (newskinUrl) {
                        vm.changeSkinStyle(newskinUrl);
                        vm.resetInlinePreview();
                    });
                });
            },
            changeSkinStyle: function (skinUrl) {
                if (!skinUrl) return _u.disabledCssText("appSkin");

                require(["text!" + skinUrl, "components/common"], function (cssText, common) {
                    var scope = " .screen .content "; // 样式作用域

                    if (cssText) {
                        cssText = scope + cssText.replace(/}/g, "}" + scope).replace(new RegExp(scope + "$"), "");
                    }

                    _u.disabledCssText("appSkin", true);
                    common.importCssText("appSkin", _u.replaceCssVarInIE(cssText), true, function (styleNode) {
                        $(document.body).prepend(styleNode);
                    });
                });
            },
            pageLink: function () { // 页面地址
                require(['pageLink'], function (pageLink) {
                    pageLink.show();
                });
            },
            getAppInfo: function () {
                var vm = this;

                return _u.api("app", {
                    action: 'info',
                    data: {
                        appid: dataModel.get('appid')
                    }
                }, function (result) {
                    var data = result.data;
                    
                    if (data.picpath) {
                        vm.appImage = data.picpath;
                    }
                    vm.ispublish = data.ispublish2Portal == 1;
                });
            },
            checkAppStaticResourceStatus: function() {
                var appid = dataModel.get('appid');

                return _u.api("app", {
                    action: 'checkAppStaticResourceStatus',
                    method: 'post',
                    data: {
                        appids: appid
                    }
                }, function (res) {
                    var status = res.data[appid];

                    if (status == 0) return;

                    var index = -1;

                    if (status == -1) {
                        index = modal.warn(constants.LACK_STATIC_RESOURCES_WARN + "<a class='link' data-directive='genStaticResources' href='javascript:;'>" + constants.GENERATE + "</a>", 0);
                    } else if (status == 1) {
                        index = modal.warn(constants.DIFF_STATIC_RESOURCES_WARN + "<a class='link' data-directive='updateStaticResources' href='javascript:;'>" + constants.UPDATE + "</a>", 0);
                    }

                    modal.getModal$Dom(index).find(".link").data("index", index);
                });
            },
            publish: function (ispublish) {
                this.ispublish = ispublish;
            }
        },
        created: function () {
            this.getAppInfo();
            this.checkAppStaticResourceStatus();
        }
    });

});

define('leftMenu', ['vue', 'utils', 'modal', 'appdesigner/constants', 'i18n/lang', 'vue-ext'], function (Vue, _u, modal, constants,lang) {
    return new Vue({
        el: '#left-menu',
        data: {
            view: "plugins",
            plugins: {
                data: null,
                searchText: "",
                visible: false, // 控制搜索框删除按钮的样式,
                condition: {
                    isshow: false,
                    selected: -1,
                    text: constants.ALL
                },
                module: "designer",
                action: "getComponents",
                filter: function (item, searchTxt) { // 搜索框过滤逻辑
                    var pattern = new RegExp('.*' + searchTxt.split('').join('.*') + '.*'),
                        text = _u.toLowerCase(item.text),
                        py = _u.toLowerCase(item.text_py);

                    item.isShow = text.indexOf(searchTxt) != -1 || py.match(pattern) != null;
                    return item;
                }
            },
            functions: {
                data: null,
                searchText: "",
                visible: false,
                condition: {
                    isshow: false,
                    selected: -1,
                    text: constants.ALL
                },
                hasOpened: false, // 打开过functions之后 恒为true
                isShow: false, // 控制function detail的显隐
                module: "function",
                action: "list",
                isloaded: false, // iframe是否加载完毕
                selectedId: "", // 选中的function id
                src: "",
                docType: -1, // 0 fnDetail 1 vardesc 2 varparserdoc
                filter: function (item, searchTxt) {
                    var text = _u.toLowerCase(item.sign),
                        desc = _u.toLowerCase(item.desc);

                    item.isShow = text.indexOf(searchTxt) != -1 || desc.indexOf(searchTxt) != -1;
                    return item;
                }
            },
            templet: {
                data: null, // 所有模板信息 包含分组数据 不规则
                list: null, // 所有模板信息 不包含分组 即所有的模板对象
                group: null, // 分组中的模板
                searchText: "",
                module: "template",
                action: "listByGroup",
                params: { isChoose: true },
                showGroup: false
            }
        },
        methods: {
            toggleTab: function (type) { // tab组件
                var vm = this,
                    obj = vm[type];
                if (type == "functions" && !obj.data) {
                    vm.functions.hasOpened = true;
                    vm.functions.src = "/mobilemode/admin/functionsDetail.jsp";
                    vm.initCloseFuns();
                }

                vm.initTabComponent(type);
                vm.view = type;
            },
            toggleConflict: function(flag, plugin){
                if(flag){
                    var content = constants.PLUGIN_VERSION_CONFLICT_TIP.replace("#oldVersion#", plugin.oldVersion).replace("#newVersion#", plugin.newVersion);
                    modal.tips(content, $("li[mec_type='"+plugin.id+"'] .icon-warn"));
                }else{
                    modal.closeAll('tips'); // 鼠标离开关闭tips
                }
            },
            openOP: function(id){
                window.open("/mobilemode/admin/op.jsp?type=plugin&refId="+id, "_blank");
            },
            del: function () {
                var vm = this,
                    type = vm.view,
                    obj = vm[type];

                obj.searchText = "";
                $('#' + type + '-search-input').focus();
            },
            initData: function (type, force) { // 初始化tab数据
                var vm = this,
                    obj = vm[type];

                if (obj.data && !force) return;

                return _u.api(obj.module, {
                    action: obj.action,
                    data: obj.params
                }, function (result) {
                    var arr = [];

                    result = result.data.filter(function (r) {
                        r.isShow = true;

                        if (r.items) {
                            r.items.filter(function (item) {
                                item.isShow = true;
                                arr.push(Vue.parseJSON(item));
                                return item;
                            });
                        } else {
                            arr.push(Vue.parseJSON(r));
                        }

                        return r;
                    });

                    if (type == "templet") {
                        obj.list = arr.map(function(item){
                            item.name = lang.parse(item.name);
                            return item;
                        });
                        result = result.filter(function(val){
                            if(val.items){
                                val.items.filter(function (item) {
                                    item.name = lang.parse(item.name);
                                    return item;
                                });
                            }else{
                                val.name = lang.parse(val.name);
                            }
                            return val
                        })
                    }

                    obj.data = result;
                });
            },
            search: function (type) { // 搜索框逻辑
                var vm = this,
                    obj = vm[type],
                    data = obj.data,
                    filterItem = obj.filter,
                    condition = obj.condition,
                    searchTxt = obj.searchText.replace(/\s/g, '').toLowerCase(),
                    length;

                data.filter(function (classify, index) {
                    length = classify.items.length;

                    if (condition && ~condition.selected && condition.selected != index)
                        return classify.isShow = false;

                    classify.items.filter(function (item) {
                        item = filterItem(item, searchTxt);
                        !item.isShow && length--;
                        return item;
                    });

                    // functions中添加了两个非后台传过来的item 所以需要另外进行判断
                    if (index == 0 && type == "functions") {
                        if (~$('#varDesc').text().indexOf(searchTxt) || ~$('#varParser').text().indexOf(searchTxt)) {
                            length++;
                        }
                    }
                    classify.isShow = !!length;
                    return classify;
                });

                obj.visible = !!searchTxt.length;
            },
            initTabComponent: function (type) {

                this.$watch(type + '.searchText', function () { // 监听tab的searchText属性
                    this[type].filter && this.search(type);
                });

                return this.initData(type);
            },
            initFnContent: function (e) {
                var vm = this,
                    iframe = e.currentTarget;

                if (!vm.functions.src) return;

                vm.functions.isloaded = true;
                vm.$on('hashChange', function (fId) {
                    iframe.contentDocument.location.hash = ""; // 重置hash
                    iframe.contentDocument.location.hash = "function_" + fId;
                });
                // 当点击并show functions时, 页面未加载完成, 需要在iframe加载完成时再次执行一次hashChange
                vm.$emit('hashChange', vm.functions.selectedId);
            },
            initCloseFuns: function () {
                var vm = this;
                $(document).on('mousedown.closeFunction', function (e) {
                    var $target = $(e.target);

                    if ($target.parents('.p-container').length > 0) return;
                    vm.closeFunction();
                });
            },
            closeFunction: function () {
                var functions = this.functions;

                functions.isShow = false;
                functions.selectedId = "";
            },
            showFnDetail: function (el) {
                var vm = this;
                fId = el.getAttribute('fid');

                if (!fId) return;

                vm.functions.docType = 0;
                vm.functions.isShow = true;
                vm.functions.selectedId = fId;
                setTimeout(function () {
                    vm.$emit('hashChange', fId);
                });
            },
            showDoc: function (type) {
                var functions = this.functions;

                functions.docType = type;
                functions.isShow = true;
                functions.selectedId = 'doc_' + type
            },
            usingTemplet: function (tmp) {
                require(["dataModel"], function (dataModel) {
                    var appHomepageId = dataModel.get("appHomepageId");

                    modal.confirm(constants.TEMPLATE_OVERWRITE_TIP, function () {
                        _u.api("template", {
                            action: "initPage",
                            data: {
                                appHomepageId: appHomepageId,
                                tmplId: tmp.id
                            }
                        }).then(function () {
                            openHomepage(appHomepageId);
                            modal.close();
                        }).fail(function () {
                            modal.close();
                        });
                    });
                });
            },
            showGroupDetail: function (tmp) {
                var templet = this.templet;

                templet.showGroup = true;
                templet.group = tmp.items;
            },
            backToTmpList: function () {
                this.templet.showGroup = false;
            },
            isShowVar: function (eleId) {
                var $el = $(eleId);

                if ($el.length <= 0) return true;

                return !!~$el.text().indexOf(this.functions.searchText);
            },
            scrollToTop: function (type) {
                if (type && type != this.view) return;

                type = this.view;
                var container = $(".p-container:visible")[0];

                container.scrollTop = 0;
            }
        },
        mounted: function () {
            this.initTabComponent("plugins").then(function () {
                require(["mec"], function (mec) {
                    mec.draggableMECPlugins();
                });
            });
        }
    });
});

define('rule', ['snap'], function () {
    var rule = {
        width: 20,
        strokeColor: '#999',
        ref: ".screen",
        corner: ".top-left-corner",
        drawScaleX: function (paper, len, startPoint) {
            var drawScaleVal = false,
                x, x1, x2, y1, y2;

            while (len-- >= 0) {
                x = len * 10;
                x1 = x + startPoint;
                y1 = this.width;
                x2 = x1;
                drawScaleVal = len % 10 === 0; // 画刻度值,
                y2 = drawScaleVal ? 0 : (this.width / 2 + 3); // 刻度的Y轴坐标

                this.path(paper, this.getPath(x1, y1, x2, y2));
                x < startPoint && this.path(paper, this.getPath(startPoint - x, y1, startPoint - x, y2));

                if (drawScaleVal) {
                    // params: x, y, text
                    paper.text(x1 + 5, (this.width / 2) + 1, x + '')
                }
            }
        },
        drawScaleY: function (paper, len, startPoint) {
            var drawScaleVal = false,
                x1, x2, y, y1, y2;

            while (len-- >= 0) {
                y = len * 10;
                y1 = y + startPoint;
                x1 = this.width;
                y2 = y1;
                drawScaleVal = len % 10 === 0;
                x2 = drawScaleVal ? 0 : (this.width / 2 + 3);

                this.path(paper, this.getPath(x1, y1, x2, y2));
                y < startPoint && this.path(paper, this.getPath(x1, startPoint - y, x2, startPoint - y));

                if (drawScaleVal) {
                    paper.text(15, y1, y + '').transform(new Snap.Matrix().rotate(-90, 12, y1));
                }
            }
        },
        drawRuleX: function () {
            var $ruleX = $('.rule-x'),
                snapX = Snap($ruleX[0]),
                width = $('#app').width() - $(this.corner).width(),
                startPoint = $(this.ref).offset().left - $ruleX.offset().left;

            $ruleX.width(width);
            this.drawScaleX(snapX.paper, Math.floor((width - startPoint) / 10), startPoint);

            return this;
        },
        drawRuleY: function () {
            var $ruleY = $('.rule-y'),
                snapY = Snap($ruleY[0]),
                width = this.width,
                height = $("#phone-container")[0].scrollHeight,
                startPoint = $(this.ref).offset().top - $ruleY.offset().top;

            $ruleY.height(height);
            this.drawScaleY(snapY.paper, Math.floor((height - startPoint) / 10), startPoint);

            return this;
        },
        getPath: function (x1, y1, x2, y2) {
            var arr = [x1, y1, x2, y2];

            arr.forEach(function (point, index) {
                arr[index] = point - 0.5; // 处理尺子刻度1px显示粗糙的问题
            });
            // 从点x1, y1到x2, y2
            return "M" + arr[0] + " " + arr[1]
                + "L" + arr[2] + " " + arr[3];
        },
        path: function (paper, path) {
            paper.path(path).attr({
                stroke: this.strokeColor
            });
        },
        init: function () {
            $('.rule-x, .rule-y').empty();
            rule.drawRuleX().drawRuleY();
        }
    };

    $(window).resize(function () {
        rule.init();
    }).scroll(function () { // 阻止tab键或其他原因导致body滚动条移动
        document.body.scrollTop && scrollTo(0, 0);
    });

    return rule.init;
});

define('pagesTree', ['vue', 'utils', 'Mobilemode_trace', 'ztree', 'dataModel', 'modal', 'notification', 'appdesigner/constants', 'appdesigner/animation'], function (Vue, _u, trace) {
    var dataModel = require('dataModel'),
        notification = require('notification'),
        constants = require('appdesigner/constants'),
        modal = require('modal'),
        animate = require("appdesigner/animation");

    var nodeOperation = {
        inner: function (folderId, sourceId) { // 将节点插入到文件夹中
            return ajaxForNodeOp("designer", {
                action: "movePageToFolder",
                data: {
                    appid: dataModel.get('appid'),
                    folderId: folderId,
                    sourceId: sourceId
                }
            });
        },
        sort: function (sourceId, targetId, moveType) { // 节点间前后排序
            return ajaxForNodeOp("designer", {
                action: "movePageForSort",
                data: {
                    appid: dataModel.get('appid'),
                    sourceId: sourceId,
                    targetId: targetId,
                    moveType: moveType
                }
            });
        },
        edit: function (e, id, node) {
            if (node.isCreate || node.isCopy) { // 新增节点
                return nodeOperation.save(node);
            }

            if (!node.newName || node.newName == node.originName) { //名字未更改
                return false;
            }
            
            var action = 'editPageFolder',
                mod = "designer",
                pagesTree = require('pagesTree'),
                dataModel = require("dataModel");

            if (pagesTree.is('SC', node.id)) {
                action = 'editPage';
            }
            
            return ajaxForNodeOp(mod, {
                action: action,
                data: {
                    appid: dataModel.get('appid'),
                    name: node.newName,
                    id: _u.toInt(node.id)
                }
            }, function () {
                _u.updateUrlSelectorData();

                if (action == 'editPage' && dataModel.get("appHomepageId") != _u.toInt(node.id)) {
                    openHomepage(node);
                }
            });
        },
        save: function (node) {
            var action = "createPageFolder",
                mod = "designer",
                isParent = node.isParent,
                data = {
                    appid: dataModel.get('appid'),
                    foldername: node.name,
                    pid: node.pId
                };

            if (!isParent) {
                action = node.isCopy ? "copyPage" : "createPage";
                data.name = node.name;
                data.id = _u.toInt(node.id);
            }

            return ajaxForNodeOp(mod, {
                action: action,
                data: data
            }, function (result) {
                var pagesTree = require('pagesTree');

                node.id = result.data.id || node.id;

                if (!isParent) {
                    $('#' + node.tId + '_a').removeAttr("onclick") // 将节点copy的click事件移除
                        .off('click.node') // 为新添加或复制的页面节点添加openHomepage的动作
                        .on('click.node', function () {
                            openHomepage(node);
                        });
                    addDiyDom(node.tId, node); // 添加ID显示元素
                    openHomepage(node); // 操作完成后自动跳转到新建页面
                    _u.updateUrlSelectorData(); //
                }

                if (node.isCopy) {
                    delete node.thumbnail;
                }

                delete node.isCreate;
                delete node.isCopy;
                pagesTree.getPageTreeObj().updateNode(node);
                var urlSelectPanel = require('urlSelectPanel');
                urlSelectPanel.clearPageCache();
            });
        }
    };

    var settings = {
        view: {
            expandSpeed: "", //取消展开节点的动画
            dblClickExpand: false,
            showIcon: true,
            showTitle: true,
            nameIsHTML: true,
            fontCss: function (treeId, treeNode) {
                return {
                    color: treeNode.color || ""
                };
            },
            addDiyDom: addDiyDom
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            drag: {
                isCopy: false,
                isMove: true,
                prev: dragCloseNode,
                next: dragCloseNode,
                inner: function (treeId, treeNodes, targetNode) {
                    var targetId = targetNode && targetNode.id;
                    var treeNodeParentId = treeNodes[0].pId;

                    if (is('M', treeNodeParentId)) return false;
                    if (!is('S|F', targetId)) return false;

                    return treeNodes.every(function (node) {
                        return is('SC|F', node.id);
                    });
                }
            }
        },
        data: {
            keep: {
                parent: true
            },
            simpleData: {
                enable: true
            },
            key:{
                title:"desc"
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTreeObj = $.fn.zTree.getZTreeObj(treeId),
                    children;

                if (is('F|S', treeNode.id)) {
                    children = treeNode.children || [];
                    zTreeObj.expandNode(treeNode);
                    children.forEach(function (treeNodeObj) {
                        addDiyDom(treeNodeObj.tId, treeNodeObj);
                    });
                    return false;
                }
            },
            onClick: function (e, treeId, treeNode) {
                var zTreeObj = $.fn.zTree.getZTreeObj(treeId);

                if (is('M', treeNode.id)) {
                    return false;
                }

                if (is('S', treeNode.id)) { // 手动展开第一级节点
                    $("#" + treeNode.tId + '_ul').toggle();
                    treeNode.open = !treeNode.open;
                    zTreeObj.updateNode(treeNode);
                } else {
                    zTreeObj.expandNode(treeNode);
                }

                var $select = $('.property-container').find('select');
                
                modal.closeAll('tips');//切换页面关闭tips提示框（插件验证提示）
                if($select.length>0){
                    $select.select2('close');//关闭未关闭的select下拉框
                }
            },
            onDrop: function (event, treeId, treeNodes, targetNode, moveType) {
                var sourceIds = "";
                for (var i = 0, j = treeNodes.length; i < j; i++) {
                    sourceIds += treeNodes[i].id + ",";
                }
                sourceIds = sourceIds.substring(0, sourceIds.length - 1);
                switch (moveType) {
                    case 'prev':
                    case 'next':
                        nodeOperation.sort(sourceIds, targetNode.id, moveType);
                        break;
                    case 'inner':
                        nodeOperation.inner(targetNode.id, sourceIds);

                }
            },
            beforeRename: function (treeId, treeNode, newName) {
                var pagesTree = require('pagesTree'),
                    ztreeObj = pagesTree.getPageTreeObj(),
                    isRemove = treeNode.isCreate || treeNode.isCopy; // 创建或者copy情况下 

                if (newName) return true;

                if (isRemove) { // 创建或者copy情况下, 需要移除节点
                    ztreeObj.removeNode(treeNode);
                    if(ztreeObj.data){
                        ztreeObj.data.key.desc = "";
                    }
                } else { // 编辑模式下, 只需要取消编辑
                    ztreeObj.cancelEditName();
                }
                return false;
            },
            onRename: nodeOperation.edit
        }
    };

    // 在节点中添加自定义元素
    function addDiyDom(treeId, treeNode) {
        var $a = $("#" + treeNode.tId + "_a"), $markId;

        if (!is('SC', treeNode.id)) return;

        if ($a.find('.mark').length) {
            return $a.find('.mark').html(_u.toInt(treeNode.id));
        }

        $markId = $("<span class='mark'>" + _u.toInt(treeNode.id) + "</span>");
        if($("#showPageIdIcon").attr('active') == 'true'){
        	$markId.show();
        }
        $a.append($markId);
    }

    // 设置节点前(prev)后(next)拖拽的规则
    function dragCloseNode(treeId, treeNodes, targetNode) {
        var targetNodeId = targetNode && targetNode.id;
        var treeNodeParentId = treeNodes[0].pId;
        var targetNodeParentId = targetNode.pId;

        if (is('M', treeNodeParentId) && treeNodeParentId!=targetNodeParentId) return false;
        if (is('S|F', treeNodeParentId) && is('M', targetNodeParentId)) return false;
        if (!is('SC|F', targetNodeId)) return false;

        return treeNodes.every(function (node) {
            return is('SC|F', node.id);
        });
    }

    function is(type, nodeId) {
        var vm = require('pagesTree');

        var isType = function (type, nodeId) {
            switch (type) {
                case 'S': //  表示自定义页面的文件夹
                    return type == nodeId;
                case 'F': //  表示在S中添加的文件夹
                case 'M': //  表示模块文件夹
                    return ~nodeId.indexOf(type);
                case 'SC': // 表示在S中的子页面
                    return ~nodeId.indexOf('S') && nodeId != 'S';
                case 'MC': // 表示在模块文件夹中的子页面
                    return nodeId.match(/^\d+$/g) != null;
            }
        },
            flag = false;

        nodeId = (nodeId + '').toUpperCase();
        type = type.toUpperCase().split('|'); // 判断多个类型之间的'或'关系 

        type.forEach(function (t) {
            flag = flag || isType(t, nodeId);
        });

        return flag;
    }

    function ajaxForNodeOp(mod, op, success) {
        var vm = require('pagesTree');

        vm.opNode.state = 'operating';

        return _u.api(mod, {
            action: op.action,
            type: 'post',
            data: op.data,
            show: function () {
                vm.opNode.show = true;
            },
            hide: function () {
                vm.opNode.show = false;
            }
        }, function (result) {
            notification.success(constants.OPERATION_SUCCESS);
            success && success(result);
            UrlSelectUtil.clearPageCache();
        }, function () {
            notification.error(constants.OPERATION_FAILED);
        });
    }

    /**
     * 判断节点下是否包含首页
     * node 当前节点
     * */
    function isIncludeHomepage(node){
        var tree_children = node.children || [];
        if (tree_children.length == 0){
            return false;
        }
        var homepageFlag = false;
        for (var i = 0 ; i < tree_children.length ; i++){
            var childNode = tree_children[i];
            //是否为首页
            if(childNode.ishomepage == "1"){
                homepageFlag = true;
                break;
            }
            else if (is('F',childNode.id) || is('S',childNode.id) || is('M',childNode.id)){
                //是文件夹就继续查找文件夹下面是否包含首页
                homepageFlag = isIncludeHomepage(childNode);
            }
        }
        return homepageFlag;
    }

    return new Vue({
        el: '#pages-container',
        data: {
            isPageLoading: true,
            showPageId:false,
            opNode: {
                show: false
            },
            thumbnail: {
                showThum: false,
                name: '',
                style: '',
                showLoading: true
            },
            zTreeObj: null,
            searchPageTxt: "",
            isDropDown: false,
            pagesData: null,
            homepage: {
                id: '',
                node: ''
            },
            fallback: $.Deferred()
        },
        methods: {
            getPageTreeData: function () {
                var vm = this;

                return _u.api("designer", {
                    action: "getPageTreeData",
                    data: {
                        appid: dataModel.get('appid')
                    }
                })
                    .done(function (result) {
                        vm.pagesData = result.data || [];
                    });
            },
            toggleShowPageId:function(){
            	if(this.showPageId = !this.showPageId){
            		$('#pages').addClass('showID').find(".mark").show();
            	}else{
            		$('#pages').removeClass('showID').find(".mark").hide();
            	}
            },
            initTree: function (result) {
                var vm = this, zTreeObj, pageId;

                vm.pagesData = vm.pagesData.filter(function (page) {
                    if (vm.is('MC', page.id)) {
                        page.click = "javascript:openAppUi(" + _u.toInt(page.id) + ")";
                    }
                    page.desc = "";
                    if(page.warnflag===1){
                        page.iconSkin = page.pId === 0 ? 'diy_parent_error' : 'diy_error';
                        //page.name = page.name;//已删除
                        page.desc = constants.DELETED;
                    }
                    page.originName && (page.originName = BASE64.decoder(page.originName));
                    return page;
                });

                $.fn.zTree.init($(_u.toId('pages')), settings, vm.pagesData);
                zTreeObj = vm.getPageTreeObj();

                // 只展开第一级节点
                zTreeObj.getNodesByFilter(function (node) {
                    if (vm.is('F', node.id)) {
                        node.isParent = true;
                    }

                    if (vm.is('M|S', node.id)) {
                        zTreeObj.expandNode(node);
                    }
                });

                pageId = dataModel.get('appHomepageId');

                var historyPageNode = vm.getNodeByPageId(pageId);

                vm.isPageLoading = false;
                setTimeout(function () {
                    vm.selectTreeNode(historyPageNode);
                }, 100);

                if (vm.searchPageTxt) {
                    vm.pagesTreeFilter(vm.searchPageTxt);
                }

                $("#pages").show();

                var isMS = historyPageNode && (~historyPageNode.pId.indexOf("M") && historyPageNode.uitype != 3);
                
                vm.fallback.then(function () {
                	vm.toggleInitPageContent(isMS);
                });
            },
            dropDownLeave: function (e) {
                var relatedTarget = e.relatedTarget;

                this.isDropDown = !!$(relatedTarget).parents('.ad-dropdown').length;
            },
            getPageTreeObj: function () {
                if (!this.zTreeObj)
                    this.zTreeObj = $.fn.zTree.getZTreeObj('pages');

                return this.zTreeObj;
            },
            getTreeNode: function (el) {
                var zTreeObj = this.getPageTreeObj();

                return zTreeObj.getNodeByTId($(el).parents(".ztree-menu").data('tId') || "pages_1"); // 默认为自定义页面
            },
            removeTreeNode: function (node) {
                this.getPageTreeObj().removeNode(node);
            },
            isSelectedNode: function (treeNode) {
                return this.getPageTreeObj().getSelectedNodes()[0] == treeNode;
            },
            setHomepage: function () {
                var homepage = this.homepage;
                homepage.node = this.getPageTreeObj().getNodeByParam('ishomepage', 1);
                homepage.id = _u.toInt(homepage.node && homepage.node.id);
            },
            getHomepage: function () {
                this.setHomepage();

                return this.homepage;
            },
            selectTreeNode: function (treeNode) {
                //当前页为模块布局的自定义页面时，删除该页面，再次initTree时，treeNode不存在默认选择首页
                if (!treeNode) {
                    treeNode = this.getHomepage().node;
                    treeNode && openHomepage(treeNode);
                }

                return this.getPageTreeObj().selectNode(treeNode);
            },
            getNodeByPageId: function (pageId) {
                return this.getPageTreeObj().getNodeByParam("id", 'S' + pageId)
            },
            pagesTreeFilter: function (val) {
                var highlight = function ($el, text) {
                    $el.find("span[id*=_span], span[class=mark]").each(function (index, pageName) {
                        var $pageName = $(pageName),
                            pageNameHtml = $pageName.html(),
                            matchIndex = pageNameHtml.toLowerCase().indexOf(text.toLowerCase()), // 不区分大小写
                            matchStr;

                        if (!~matchIndex) return;

                        matchStr = pageNameHtml.substring(matchIndex, matchIndex + text.length);
                        pageNameHtml = pageNameHtml.replace(matchStr, "<span class='highlight'>" + matchStr + "</span>")
                        
                        $pageName.parents('li').addClass('selected');
                        $pageName.html(pageNameHtml);
                    });
                },
                unhighlight = function ($el) {
                    var html = $el.html().replace(/<span class="highlight">(.*?)<\/span>/g, "$1");

                    $el.html(html);
                    $el.find('li').removeClass('selected');
                },
                $pages = $('#pages'),
                vm = this,
                zTreeObj = vm.getPageTreeObj();

                unhighlight($pages);

                if (!val) {
                	$pages.find("li").show();
                	if(vm.showPageId){
                		$('#pages').find(".mark").show();// 显示页面id
                	}else{
                		$('#pages').find(".mark").hide();// 隐藏页面id
                	}
                    return;
                }

                zTreeObj.getNodesByFilter(function (node) {
                    if (!vm.is('SC', node.id)) return;

                    var nodeName = node.name,
                        nodeId = _u.toInt(node.id),
                        isMatch = ~nodeName.toLowerCase().indexOf(val.toLowerCase()) || ~String(nodeId).indexOf(val),
                        parentNode = node.getParentNode();

                    if (!isMatch || !vm.is('F', parentNode.id)) return;

                    zTreeObj.expandNode(parentNode, true);
                });

                highlight($pages.find('a[class^=level]'), val);

                // 隐藏所有模块和自定义页面 遍历其对应的a标签元素 如: 自定义页面, XXX模块
                $pages.find('> li').hide()
                    .find('>a').each(function (index, el) {
                        var $pageTitle = $(el), // 自定义页面 模块标题
                            $pageContainer = $pageTitle.siblings('ul'), // 包含自定义或模块所有页面
                            $pagesHighlight = $pageContainer.find('.highlight'); // 页面高亮的元素

                        $pageContainer.find(".mark").hide();

                        // 只要模块名或者模块页面存在搜索关键字, 则显示整个模块
                        if (index && ($pageTitle.find('.highlight').length || $pagesHighlight.length)) {
                            $pagesHighlight.parent(".mark").show(); // 显示页面匹配id    
                            $pageContainer.parent('li').show();
                        }

                        if (index) return;

                        // 自定义页面
                        $pageContainer.find('li').hide();

                        if($pagesHighlight.length) {
                            $pagesHighlight.parent(".mark").show(); // 显示页面匹配id
                            $pagesHighlight.parents('li').show();
                        }
                    });

                $('#pages-search-input').focus(); // 防止expandNode后 输入框失去焦点
            },
            createNode: function (el, isParent) { // 添加节点 即添加分组与页面
                var that = this,
                    zTreeObj = this.getPageTreeObj(),
                    treeNode = this.getTreeNode(el),
                    groupLastIndex = 0, groupLastId = 0, 
                    type, newNode;

                    newNode = zTreeObj.addNodes(treeNode, [{
                        name: '',
                        desc: '',
                        isParent: isParent,
                        isCreate: true,
                        iconSkin: isParent ? "" : "diy01"
                    }])[0];
                treeNode.children.map(function(node,index){
                    if(node.id && ~node.id.indexOf('F') < 0){
                        groupLastIndex = index;
                        groupLastId = node.id;
                    }
                });
                type = groupLastId === 0 ? 'prev' : 'next';
                isParent && zTreeObj.moveNode(treeNode.children[groupLastIndex], newNode, type); //当添加分组, 默认移动到第一个节点位置

                clearTimeout(this.timer);
                this.timer = setTimeout(function () {
                    zTreeObj.editName(newNode); //让新建节点在可编辑状态
                    that.onEditName(newNode);
                });
            },
            onEditName: function(treeNode){
                var zTreeObj = this.getPageTreeObj();
                var $node = $("#" + treeNode.tId), 
                    $input = $node.find("input.rename");
                var onOk = function(){
                    treeNode.newName = MLanguage.getValue($input);
                    zTreeObj.cancelEditName($input.val());
                    $("#multi-lang-icon").hide();
                }, onCancel = function(){
                    zTreeObj.cancelEditName();
                    $("#multi-lang-icon").hide();
                };
                $input.off("blur").bind("blur", function(e){
                    !$(".multi-lang-icon").is(":visible") && onOk();
                }).off("keydown").bind('keydown', function(event) {
                    if (event.keyCode=="13") {
                        onOk();
                    } else if (event.keyCode=="27") {
                        onCancel();
                    }
                }).on("focus", function(){
                    $(".multi-lang-picker").hide();
                });
                treeNode.newName && (treeNode.originName = treeNode.newName);
                MLanguage.setValue($input, treeNode.newName || treeNode.originName);
                $node.MLanguage({
                    onOk: function(){
                        onOk();
                    },
                    onCancel: function(){
                        onCancel();
                    },
                    style: "background-size: 14px;width:16px;"
                });
            },
            toggleInitPageContent: function (isshow) { // 控制右键菜单初始化内容的显示或者隐藏
                var $icon = $(".context-menu").find(".icon-page");

                $icon.parent().toggle(!!isshow && _whetherCanEdit);
            },
            getParentNodeByModelId:function(modelId){
                var treeArr = this.getPageTreeObj().getNodes(),
                    treeNode = '';
                treeArr.filter(function(val){
                    if(is('M',val.id)&&val.modelId===modelId){
                        treeNode = val;
                        return;
                    }
                });
                return treeNode;
            },
            toggleMask: function (visible) {
                this.opNode.show = visible;
                this.opNode.state = 'operating';
            },
            ajaxForNodeOp: ajaxForNodeOp,
            is: is,
            isIncludeHomepage: isIncludeHomepage
        },
        watch: {
            searchPageTxt: function (val) {
                this.pagesTreeFilter(val);
            }
        },
        mounted: function () {
            var vm = this;
            var getPageTreeData = vm.getPageTreeData();

            require(["appdesigner/dragula"], function (dragula) {
                dragula.init();
                animate.ready();
                getPageTreeData.then(function () {
                    vm.initTree();
                });
            });
        }
    });
});

define('thumbnail', ['vue'], function (Vue) {
    return new Vue({
        el: '#page-thumbnail',
        data: {
            isshow: false,
            name: '',
            style: '', // 调整缩略图的位置
            images: [],
            isLoaded: false
        },
        methods: {
            hide: function () {
                this.isshow = false;
            },
            position: function (el) {
                var $el = $(el),
                    $rightMenu = $("#right-menu"),
                    $thumbnail = $(this.$el);
                var offset = $el.offset(),
                    conOffset = $rightMenu.offset();
                var top = offset.top,
                    left = conOffset.left - $thumbnail.width();

                if ($('body').height() - offset.top < $thumbnail.height()) {
                    top = offset.top - $thumbnail.height() + $el.height();
                }

                if ($("#pages-container").parents("#left-menu").length) {
                    var $leftMenu = $("#left-menu");
                    left = $leftMenu.offset().left + $leftMenu.width();
                }

                return { top: top + "px", left: left + "px" };
            },
            show: function (el, treeNode) {
                var vm = this,
                    imageId = treeNode.id,
                    isexit = false; // 判断是否缩略图已经存在

                vm.isshow = true;
                vm.style = vm.position(el);
                vm.name = treeNode.name;

                vm.images.forEach(function (img) {
                    img.isshow = img.id == imageId;
                    isexit = isexit || img.isshow;

                    if (img.isshow && img.src != treeNode.thumbnail) {
                        vm.isLoaded = false;
                        return (img.src = treeNode.thumbnail); // 存在该页面缩略图, 更新                        
                    }
                });

                // 不存在该页面缩略图, 创建
                if (!isexit) vm.createThumb(treeNode);
            },
            createThumb: function (treeNode) {
                this.images.push({
                    id: treeNode.id,
                    src: treeNode.thumbnail,
                    isshow: true
                });
                this.isLoaded = false;
            },
            loaded: function () {
                this.isLoaded = true;
            }
        }
    });
});

define('pluginAttr', ['vue', 'utils', 'dataModel', 'appdesigner/constants', 'validate', 'switcher', 'checkbox'], function (Vue, _u, dataModel) {
    var constants = require('appdesigner/constants');

    return new Vue({
        el: '.p-property',
        data: {
            attrview: 'tip', // attr 页面属性 plugin: 插件属性 tip: 提示选择组件
            title: constants.ATTR_CONFIG,
            // isDisabledSkin: false,
            onloadScript: "",
            currAttrDlg: "",
            resizeType: 0, // 1: max 2: min
            isMaxHeight: false,
            editorInitialized: false,
            showPermPanel: false,
            pluginview: 'attr'
        },
        methods: {
            setAttrView: function (viewtype) {
                if (viewtype == this.attrview) return;

                this.attrview = viewtype;

                if (viewtype == "plugin") return;

                if (viewtype == "attr") {
                    this.currAttrDlg = ".page-attr";
                    this.isMaxHeight = true;
                    this.initAttrScriptEditor();
                }

                if (viewtype == "tip") {
                    this.currAttrDlg = "";
                }

                this.setTitle();
            },
            setMaxHeight: function (isMaxHeight) {
                this.isMaxHeight = isMaxHeight;
            },
            setTitle: function (title) {
                this.title = title || constants.ATTR_CONFIG;
            },
            setCurrAttrDlg: function (attrDlg) {
                this.currAttrDlg = _u.toId($(attrDlg)[0].id);
            },
            generateLayerout: function () {
                $('#plugins-attrs').find('>div:visible').find(".save-btn").trigger("click");
            },
            getPageAttr: function () {
                var editor = $('#pageAttr_onloadScript').data('editor'),
                    onloadScript = editor ? editor.getValue() : this.onloadScript;

                return {
                    isDownRefresh: 0,
                    onloadScript: onloadScript
                };
            },
            addItem: function () {
                $(this.currAttrDlg).find('.add-item').trigger('click');
                require(["scroll"], function (Scroll) {
                    var selector = "#draggable_center";
                    new Scroll(selector, true);
                    Scroll.scrollTo(selector, document.querySelector(selector).scrollHeight);
                });
            },
            resizeWin: function (type) {
                var stretchY = $('.col-resize').getStretch(),
                    editor = $(this.currAttrDlg).find('.editor').data('editor');
                var el = this;

                if (type == "max") {
                    var ismoved = stretchY.moveToMax();
                    if (!ismoved) {
                        require(["modal"], function (modal) {
                            modal.tips(constants.MAX_BOUNDARY, $(".window-resize.show"), {
                                placement: "left",
                                time: 2000
                            });
                        });
                        return;
                    }
                    this.resizeType = 2;
                } else {
                    stretchY.reset();
                    this.resizeType = 1;
                }

                editor.resize();
                editor.focus();
            },
            setResizeType: function (resizeType) {
                this.resizeType = resizeType;
            },
            updatePageAttr: function () {
                var vm = this;

                return dataModel.get('appHomepageInfo')
                    .then(function (data) {
                        var cfg = data.config;
                        var pageAttr = {
                            onloadScript: cfg.onloadScript
                        };
                        var editor = $('#pageAttr_onloadScript').data('editor');
                        
                        if(editor){
                            editor.setValue(pageAttr.onloadScript,true);
                        }
                        vm.onloadScript = pageAttr.onloadScript;
                        vm.editorInitialized = false;
                    });
            },
            disabledCss: function (e) {
                // this.isDisabledSkin = $(e.target).prop("checked");
            },
            initAttrScriptEditor: function () {
                var vm = this;
                if (vm.editorInitialized) return;
                require(["htmlEditor"], function (htmlEditor) {
                    var id = 'pageAttr_onloadScript',
                        el = $(_u.toId(id)),
                        editor = htmlEditor.editor(id, 'javascript', ['Mobile_NS']);

                    el.data('editor', editor);
                    editor.setValue(vm.onloadScript, true);
                    vm.editorInitialized = true;
                });
            },
            resizeAttrScriptEditor: function () {
                var editor = $("#pageAttr_onloadScript").data("editor");

                editor && editor.resize();
            },
            setShowPermPanel: function (visible) {
                this.showPermPanel = visible;
            },
            setPluginView: function (view) {
                this.pluginview = view;
            },
            toggleTab: function(type){
                if(type == 'attr'){
                    this.pluginview = 'attr';
                } else if(type == 'permission'){
                    this.pluginview = 'perm';
                }
            }
        },
        mounted: function () {
            this.updatePageAttr();
            $(this.$el).checkbox();
        },
        // watch: {
        //     isDisabledSkin: function() {
        //         _u.disabledCssText("appSkin", !this.isDisabledSkin);
        //     }
        // },
        computed: {
            showAddItem: function () {
                var currAttrDlg = this.currAttrDlg,
                    isAttrPanel = this.pluginview == 'attr';

                return isAttrPanel && currAttrDlg && $(currAttrDlg).find('.add-item').length > 0 || false;
            },
            showResize: function () {// 1 放大 2 缩小
                var currAttrDlg = this.currAttrDlg;

                if (currAttrDlg && $(currAttrDlg).find('.editor').length > 0) {
                    if (!this.resizeType) {
                        this.resizeType = 1;
                    }

                    return true;
                }

                return false;
            },
            hasTab: function () {
                return this.showPermPanel;
            }
        }
    });
});

define('phone', ['vue', "text!mobilemode_css", 'modal', 'mec_pool', 'mec', 'pluginAttr', 'vue-ext', 'Mobilemode_trace', 'dataModel', 'notification', 'appdesigner/constants'], function (Vue, _css) {
    var mec = require('mec'),
        pluginAttr = require('pluginAttr'),
        _u = require('utils'),
        trace = require('Mobilemode_trace'),
        modal = require('modal'),
        dataModel = require('dataModel'),
        notification = require('notification'),
        constants = require('appdesigner/constants');
    var validateTime = -1;

    ResourceLoader.runCss(_css, "mobilemode", true);

    return new Vue({
        el: '#phone-container',
        data: {
            content: '',
            loading: true,
            classObj: {
                visible: false,
                hide: false,
                showLastDate: false
            },
            lastdate: "",
            sourceCode: { // 页面源码
                js: "",
                css: "",
            },
            version: 0,
            isLoaded: false
        },
        methods: {
            getContent: function (type) {
                var vm = this;
                var clsObj = vm.classObj;

                // 清空插件

                clsObj.hide = false;
                vm.isLoaded = false;
                // 提前清空手机内容，mec.init中会再次调用防止频繁切换页面导致不同页面插件混合在一起
                mec.clear();
                // type - get|update
                return dataModel[type]('appHomepageInfo').then(function (data) {
                    var pageHistory = {};

                    pageHistory[data.appid] = data.id;
                    // 读取pageHistory
                    trace.set('pageHistory', pageHistory);
                    require(['pagesTree'], function (pagesTree) {
                        var zTreeObj = pagesTree.getPageTreeObj(), node;

                        if (zTreeObj) {
                            node = pagesTree.getNodeByPageId(data.id);
                            pagesTree.selectTreeNode(node);
                        }
                    });

                    var cfg = data.config;

                    vm.version = data.version;
                    vm.sourceCode = {
                        js: cfg.javascript,
                        css: cfg.css
                    };

                    vm.setSourceCode(vm.sourceCode);
                    mec.loadPluginConfig().then(function () {
                        MECHandlerPool.initHandler(data.components, function () {
                            mec.init();
                            clsObj.hide = true;
                            vm.isLoaded = true;
                        });
                    });

                    _uitype = data.uitype;

                    return data;
                });
            },
            validate: function () {
                var vm = this;
                var errors = [];
                var $scroller = $('#content_editor');
                var $pluginAttr = $('#plugins-attrs');
                var $scroller_bottom = $('#content_editor_bottom');
                var tabShowError = {};//定位tab组件下的插件错误
                $(document.activeElement).focusout();

                modal.closeAll("tips");
                clearTimeout(validateTime);

                $scroller_bottom.find('.has-error').removeClass('has-error');
                $scroller.find('.has-error').removeClass('has-error');
                $pluginAttr.find('.has-error').removeClass('has-error');
                $pluginAttr.find('.error-tip').remove();
                MECHandlerPool.eachHandler(function () {
                    if(!this.validate) return;

                    var result = this.validate();

                    if(_u.isBoolean(result)) {
                        result = {
                            isValid: result,
                            msg: constants.CORRESPONDING_FIELD + constants.NOT_SET
                        };
                    }

                    if(result.hasOwnProperty('isValid') && !result.isValid) {
                        result.id = this.id;
                        errors.push(result);
                    } else if (!result.hasOwnProperty('isValid')) {
                    	for(var prop in result) {
                    		if (result.hasOwnProperty(prop)) {
                    			var mecId = prop;
                    			
                    			errors.push({
                    				id: mecId,
                    				isValid: false,
                    				msg: result[prop]
                    			});
                    		}
                    	}
                    }
                });

                if(errors.length) {
                    var $parentScroller = $('#phone-container');
                    var _isIntoView = function ($abbr) {
                        return vm.isIntoView($abbr, $scroller, $parentScroller);
                    };

                    // MECHandlerPool中组件顺序是按创建的时间顺序排列
                    // 此处需要按照视图的上下顺序升序排列
                    errors.sort(function (error1, error2) {
                        var index1 = $(_u.toId(error1.id)).index();
                        var index2 = $(_u.toId(error2.id)).index();

                        return index1 > index2 ? 1 : -1;
                    }).forEach(function (error, index) {
                        var $abbr = $('#' + error.id);
                        var isHidden = false;
                        
                        $abbr.addClass('has-error');

                        var $parent = $abbr.parent().parent();
                        var isTab = $parent.hasClass('wev-tab-panel');

                        if (isTab) {
                            var tabID = $parent.parents('.Design_MecHandler').attr('id');
                            var mecHandler = MECHandlerPool.getHandler(tabID);
                            var comIndex = $parent.index();

                            if (tabShowError[tabID] == undefined) {
                                tabShowError[tabID] = mecHandler.showErrorTip();
                            }

                            if (tabShowError[tabID] !== undefined && comIndex !== tabShowError[tabID]) {
                                isHidden = true;
                            }
                        }

                        var isIntoView = _isIntoView($abbr);

                        // 默认将第一个组件滚动到可视区域
                        // 针对小屏或分辨率低的屏幕，手机容器可能会存在滚动条的情况，进行二次scroll
                        if (!isIntoView && 0 === index) {
                            isIntoView = true;
                            vm.scrollIntoView($abbr, $scroller);
                            
                            if (!_isIntoView($abbr)) {
                                vm.scrollIntoView($abbr, $parentScroller);
                            }
                        }

                        // 针对不在可视区域的组件，不进行错误提示
                        if (isIntoView && !isHidden) {
                            modal.errorTips(error.msg, $abbr);
                        }
                    });

                    // 4秒后关闭
                    validateTime = setTimeout(function () {
                        modal.closeAll('tips');
                    }, 4000);
                }

                return !errors.length;
            },
            scrollIntoView: function ($el, $scroller) {
                var elOffset = $el.offset();
                var scrollerOffset = $scroller.offset();
                var scrollTop = elOffset.top + $scroller[0].scrollTop - scrollerOffset.top;

                $scroller[0].scrollTop = scrollTop;
                $scroller.perfectScrollbar('update');
            },
            isIntoView: function($el, $scroller, $parentScroller) {
                var halfH = $el.outerHeight() / 2;
                var psTop = $parentScroller.offset().top;
                var psViewport = [psTop, window.innerHeight - halfH];
                var elTop = $el.offset().top;
                var scrollerOffset = $scroller.offset();
                var scrollerH = $scroller.outerHeight();
                var scrollTop = $scroller[0].scrollTop;
                var top = Math.max(scrollerOffset.top, psViewport[0]);
                var bottom = scrollerOffset.top + scrollerH  - halfH;
                bottom = Math.min(bottom, psViewport[1]);
                return elTop >= top && elTop < bottom;
            },
            checkVersion: function (onSave, onCancel) {
                var vm = this;

                _u.api("designer", {
                    action: "getHomepageVersion",
                    data: {
                        id: dataModel.get("appHomepageId")
                    }
                }).then(function (res) {
                    if (res.api_status == 0) {
                        notification.error(constants.SAVE_FAILED);
                        return onCancel();
                    }

                    if(vm.version == res.data.version) return onSave();

                    var versionTip = '<div style="text-align: left;">' + constants.VERSION_DIFF_TIP + '</br>' +
                        '<p style="font-size:12px;color:#666">' + constants.VERSION_DIFF_CANCEL + '</p>' +
                        '<p style="font-size:12px;color:#666">' + constants.VERSION_DIFF_CONFIRM + '</p></div>';

                    modal.confirm(versionTip, {
                        area: ['680px', 'auto'],
                        end: onCancel
                    }, function (index) {
                        onSave();
                        modal.close(index);
                    });
                }).fail(onCancel);
            },
            getFormDataForSave: function (mecJsonArr) {
                var vm = this;
                var done = $.Deferred();
                var pageAttr = pluginAttr.getPageAttr();
                var appHomepageId = dataModel.get('appHomepageId');

                require(['ad/sourcecode'], function (sourcecode) {
                    var isEditing = sourcecode.getIsEditing(); // 判断源码是否在编辑状态

                    if(!isEditing) {
                        done.resolve();
                    } else {
                        sourcecode.update().then(done.resolve);
                    }
                });

                return done.then(function () {
                    var sourceCode = vm.sourceCode;
                    var config = {
                        javascript: sourceCode.js,
                        css: sourceCode.css,
                        onloadScript: pageAttr.onloadScript
                    };

                    return {
                        id: appHomepageId,
                        appid: dataModel.get('appid'),
                        mobiledeviceid: 1,
                        parentId: appHomepageId,
                        config: compressByLZ(JSON.stringify(config)),
                        components: compressByLZ(JSON.stringify(mecJsonArr))
                    };
                });
            },
            savePageContent: function (header) {
                var vm = this;

                // 页面插件未加载完成之前 不能保存
                if(!this.isLoaded) return;
                if(header.isSaving()) return;
                // 提交前验证操作
                if(!this.validate()) return;

                header.toggleSaving(true);

                var mecJsonArr = MECHandlerPool.getPageMecJsonArr();

                this.getFormDataForSave(mecJsonArr).then(function (formdata) {
                    // 版本比对
                    vm.checkVersion(function () {
                        vm._savePluginCommonConfig();
                        vm._savePageContent(formdata);
                    }, function () {
                        vm.onSaved();
                    });
                });
            },
            _savePluginCommonConfig:function(){
                MECHandlerPool.eachHandler(function(i){
                    var handler = this;
                    handler.saveMecCommonConfig && handler.saveMecCommonConfig();
                });
            },
            _savePageContent: function (formdata) {
                var vm = this;

                return _u.api("designer", {
                    action: "saveHomepageContent",
                    data: formdata,
                    notification: false,
                    type: 'post'
                }, function (res) {
                    var date = new Date();
                    
                    var appHomepageId = formdata.id;
                    
                    require(['appdesigner'], function(_designer) {
                    	_designer.generateThumbnail(appHomepageId);
                    });

                    if(dataModel.get('appHomepageId') == appHomepageId) { //如果还在当前页，更新版本号
                        vm.version = res.data.version;
                    }
                    require(['header'], function (header) {
                        header.resetInlinePreview();
                    });
                    vm.onSaved();
                    vm.lastdate = date.getHours() + ":" + date.getMinutes();
                    vm.classObj.showLastDate = true;
                    setTimeout(function () {
                        vm.classObj.showLastDate = false;
                    }, 1000);
                    notification.success(constants.SAVE_SUCCESS);
                }, function (data) {
                    var errmsg = data.api_errormsg || '';

                    notification.error(constants.SAVE_FAILED + " " + errmsg);
                    vm.onSaved();
                });
            },
            onSaved: function () {
                require(['pagesTree'], function (pagesTree) {
                    var id = dataModel.get('appHomepageId');
                    var node = pagesTree.getNodeByPageId(id);
                    
                    pagesTree.selectTreeNode(node);
                });
                require(['header'], function (header) {
                   header.toggleSaving(false);
                });
            },
            removeAbbrContent: function (content) {
                content = content || "";

                return content.replace(/(<abbr[\s\S]*?>)([\s\S]*?)(<\/abbr>)/g, "$1$3");
            },
            initAbbrForE8: function () {
                var $container = $("#MEC_Design_Container");
                
                return $container.children("abbr").filter(function () {
                    var isE9 = $(this).find("div[class^='wev-comp-']").length;

                    !isE9 && $(this).html("");

                    return !isE9;
                });
            },
            getSourceCode: function () {
                return {
                    js: this.sourceCode.js,
                    css: this.sourceCode.css,
                    html: mec.getSourceCodeHtml()
                };
            },
            setSourceCode: function (sourceCode) {
                var css = mec.sourceCodeStyleFormat(sourceCode.css);

                this.sourceCode = sourceCode;
                $("#mobile-page-style").html(css);
            },
            getIsPageLoaded: function () {
                return this.isLoaded;
            }
        },
        created: function () {
            this.getContent('get')
                .then(function (data) {
                    // 初始化dataModel中appHomepageName的值
                    dataModel.update("appHomepageName", data.name);
                });
        } 
    });
});

define('ad/sourcecode', ['vue', 'mec', 'utils', 'dataModel', 'phone'], function (Vue, mec, _u, dataModel, phone) {
    return new Vue({
        el: '#editor',
        data: {
            sourcecode: null,
            currpageId: -1,
            classObj: {
                isLoaded: false,
                isEditing: false
            },
            disabled: ['#left-menu', '#right-menu'],
            $ele: ""
        },
        methods: {
            open: function () {
                var vm = this;
                var _init = function () {
                    var pageid = dataModel.get("appHomepageId");
                    var isRerenderJsEditor = pageid !== vm.currpageId && vm.currpageId !== -1;
                    var code = phone.getSourceCode(); 

                    vm.classObj.isLoaded = true;
                    vm.currpageId = pageid;
                    isRerenderJsEditor && vm.sourcecode.renderJsEditor();

                     vm.sourcecode.setValue(code, isRerenderJsEditor)
                        .then(function () {
                            vm.sourcecode.focus();
                        });
                };

                if (vm.sourcecode) return _init();

                require(["sourcecode"], function (sourcecode) {
                    vm.sourcecode = sourcecode.init({ container: "#source-code" });
                    _init();
                });
            },
            update: function () {
                if (!this.sourcecode) return;

                return this.sourcecode.getValue().then(function (code) {
                    phone.setSourceCode({
                        js: code.js,
                        css: code.css,
                        html: ""
                    });
                });
            },
            setActiveEle: function ($el) {
                this.$ele = $el;
            },
            toggle: function () {
                var vm = this;
                var isEditing = vm.classObj.isEditing;

                vm.classObj.isEditing = !isEditing;
                vm.$ele && vm.$ele.toggleClass("active", !isEditing);

                if (isEditing) return vm.update();
                
                vm.open();
            },
            getIsEditing: function () {
                return this.classObj.isEditing;
            }
        }
    });
});

define('qr', ['vue', 'dataModel', 'utils'], function (Vue, dataModel, _u) {
    require(['jquery.qrcode']);

    return new Vue({
        el: '#qrcode',
        data: {
            showQR: false,
            isfetched: false
        },
        methods: {
            show: function (params) {
                var appHomepageId = dataModel.get('appHomepageId');
                var vm = this;

                _u.api("designer", {
                    action: "generateQRCodeUrl",
                    data: { appHomepageId: appHomepageId }
                }, function (res) {
                    var hostaddr = _u.toHostaddr(ipaddr);
                    var $container = $('#qrcontainer');

                    $container.find('canvas').remove();

                    require(['jquery.qrcode'], function () {
                        var url = hostaddr + '/mobilemode/mobile/view.html?appHomepageId=' + appHomepageId + '&mTokenFrom=QRCode&mToken=' + res.data.mToken + '&_logEnabled=false' + params;
                        
                        $container.qrcode(url);
                    });

                    vm.isfetched = true;
                });

                $('#qrcontainer').find('canvas').remove();
                this.showQR = true;
            },
            hide: function (e) {
                if (e.currentTarget == e.target) {
                    this.showQR = false;
                    this.isfetched = false;
                }
            }
        },
        mounted: function () {
            $(this.$el).on('mousedown', '.content', function (e) {
                e.stopPropagation(); //禁用菜单栏
            })
        }
    })
});

define('pageTransfer', ['pagesTree', 'modal', 'utils', 'appdesigner/constants'], function (pagesTree, modal, _u, constants) {
    var template = "\
<div class='row page-transfer' style='max-width: 300px;'>\
    <label class='tip'>" + constants.SELECT_APP_TRANSFER_PAGE + "</label>\
    <select class='form-control' id='pageTransfer'></select>\
</div>\
";
    var optionTemplate = "<option appid='{{id}}'>{{replaceMutilLanguage(appname,_userLanguage)}}</option>";

    return {
        initEvent: function() {
            var $dialog = $('#pageTransfer').parents('.layui-layer-dialog');

            $dialog.mousedown(function(e){
                var $target = $(e.target);
                var $select2Container = $target.parents('.select2-container');

                if (!$select2Container.length) {
                    $("#pageTransfer").select2("close");
                }
            });
        },
        show: function (id, callback) {
            var that = this;

            //获取应用列表并初始化select控件
            that.getMobileAppList();

            modal.confirm(template, {
                closeBtn: false,
                zIndex: 99,
                title: constants.TRANSFER_PAGES
            }, function (index) {
                that.transformPage({
                    id: id,
                    newAppid: $('.page-transfer option:selected').attr('appid')
                }, callback);

                modal.close(index);
            });

            that.initEvent();
        },
        getMobileAppList: function () {
            _u.api("app", {
                action: 'baselist'
            }, function (result) {
                var optionsEl = result.data.reduce(function (prev, curr) {
                    if (curr.id != _appid && curr.ecversion != "e8") { // 页面转移不能选择当前应用
                        return prev + _u.tempEngine(optionTemplate, curr);
                    }
                    return prev;
                }, '');

                $('.page-transfer select').append($(optionsEl)).niceSelect();
            });
        },
        transformPage: function (data, success) {
            pagesTree.ajaxForNodeOp("designer", {
                action: 'transformPage',
                data: data
            }, success);
        }
    }
});

define('moduleCreate', ['modal', 'vue', 'vue-components', 'dataModel', 'Mobilemode_trace', 'utils', 'appdesigner/constants'], function (modal, Vue, components, dataModel, trace, _u, constants) {
    var template = '\
<div class="module-create">\
    <module-create :appid="appid" :formmodeappid="formmodeappid" :moduleid="moduleid" :status="status"></module-create>\
</div>\
';
    var lastModuleInfo = "";
    var createModel;
    // appid - moduleid对应的原appid
    function initModuleCreate(index, formmodeappid, moduleid) {
        var pagesTree = require('pagesTree'),
            appid = dataModel.get('appid'), // 当前打开应用的id
            val = {};

        if (formmodeappid) {
            val[appid] = [formmodeappid, moduleid];
            trace.set('moduleHistory', val);
        } else {
            val = trace.get('moduleHistory')[appid] || [];
            formmodeappid = val[0];
            moduleid = val[1];
        }

        return new Vue({
            el: '.module-create',
            data: {
                status: new Vue(),
                formmodeappid: formmodeappid,
                moduleid: moduleid,
                appid: appid
            },
            methods: {
                saveModule: function (index, hideLoading) {
                    var vm = this;
                    var closeModal = function (aIndex) {
                        modal.close(aIndex);
                        modal.close(index);
                    };

                    vm.status.$emit('getSelectedModules', function (modules) {
                        return vm.save({
                            appid: appid,
                            moduleInfo: modules
                        }, hideLoading).done(function (res) {
                        	if(res.api_status){
                        		modal.alert(constants.SAVE_SUCCESS, closeModal, closeModal);
                        	}else{
                        		var api_errormsg = res.api_errormsg;
                        		if(api_errormsg.indexOf(':') > 0){
                        			var msg	= "<span class=\"highlight\">"+api_errormsg.split(':')[0]+"</span>"+api_errormsg.split(':')[1];
                        			modal.alert(msg, closeModal, closeModal);
                        		}else{
                        			modal.alert(api_errormsg, closeModal, closeModal);
                        		}
                        	}
                        });
                    });
                },
                save: function (moduleInfo, hideLoading) {
                    var vm = this,
                        moduleInfo = JSON.stringify(moduleInfo);

                    if (lastModuleInfo == moduleInfo) return $.Deferred().resolve(); // 未做任何更改则避免不必要的请求

                    return _u.api("app", {
                        action: "addMode",
                        type: "post",
                        timeout: 0,
                        data: {
                            params: moduleInfo
                        },
                        hide: hideLoading,
                        notification: false
                    }, function (result) {
                        var pageIds = result.data.pageIds;

                        var urlSelectPanel = require('urlSelectPanel');
                        urlSelectPanel.clearPageCache();

                        lastModuleInfo = moduleInfo;
                        pagesTree.getPageTreeData().then(pagesTree.initTree);
                        _u.updateNavsModelEx();
                        _u.urlSelector();

                        if (!pageIds.length) return;

                        pageIds.forEach(function(pageId){
                        	require(['appdesigner'], function(_designer) {
                            	_designer.generateThumbnail(pageId);
                            });
                        });
                    })
                }
            },
            created: function () {
                components.use('module-create');
            }
        });
    }


    return {
        show: function (formmodeappid, moduleid) {
            modal.open({
                area: ['900px', '600px'],
                skin: " layer-e9 module-create ",
                loading: true,
                content: template,
                yes: function (index, layero, hideLoading) {
                    createModel.saveModule(index, hideLoading);
                    return false;
                },
                title: constants.ADD_MODULE
            }, function (o, index) {
                createModel = initModuleCreate(index, formmodeappid, moduleid);
            });
        }
    };
});

define('pageLink', ['modal', 'utils', 'pagesTree', 'dataModel', 'appdesigner/constants'], function (modal, _u, tree, dataModel, constants) {
    var pageLinkTemplate = '\
<div class="page-link">\
    <h3>{{title}}</h3>\
    <p><span class="link-address">{{url}}</span><a class="link-copy">' + constants.CLICK_COPY + '</a></p>\
    <div class="link-tips">\
        <p class="correct">{{rightTip}}</p>\
        <p class="error">{{errorTip}}</p>\
    </div>\
</div>\
';
    function circleNum(num) {
        return '<span class="circle-num">' + num + '</span>';
    }

    function getTemplate() {
        var homePageId = tree.getHomepage().id,
            appHomepageId = dataModel.get('appHomepageId'),
            ishomepage = homePageId == appHomepageId;

        var links = [{
            title: circleNum(1) + constants.PAGE_ADDRESS,
            url: '/mobilemode/appHomepageView.jsp?appHomepageId=' + appHomepageId,
            rightTip: constants.PAGE_ADDRESS_TIP,
            errorTip: ""
        }, {
            title: circleNum(2) + constants.PUBLISH_ADDRESS,
            url: '/mobilemode/mobile/view.html?' + (ishomepage ? 'appid=' + _appid : 'appHomepageId=' + appHomepageId),
            rightTip: constants.PUBLISH_ADDRESS_TIP,
            errorTip: ""
        }];

        return '<div class="page-links publish-links">' + _u.tempEngine(pageLinkTemplate, links) + '</div>';
    }

    function initCopyEvent(eles) {
        require(['clipboard'], function (Clipboard) {
            var clip = new Clipboard(eles, {
                text: function (trigger) {
                    return $(trigger).siblings('span').text();
                }
            });

            clip.on('success', function (e) {
                var trigger = $(e.trigger),
                    oldval = trigger.text();
                var mec = require('mec');

                mec.emptyCopyedMec();
                $(eles).text(constants.CLICK_COPY);
                trigger.text(constants.COPIED);
            });
        });
    }

    return {
        show: function () {
            modal.open({
                area: ['640px', 'auto'],
                content: getTemplate(),
                title: constants.PAGE_ADDRESS,
                maxmin: false,
                shadeClose: true
            }, function (el) {
                initCopyEvent(el[0].querySelectorAll('.link-copy'));
            });
        },
        showAnonymous: function () { // 匿名访问地址
            var homePageId = tree.getHomepage().id,
                appHomepageId = dataModel.get('appHomepageId'),
                ishomepage = homePageId == appHomepageId;
            var appid = dataModel.get("appid");
            var link = {
                title: constants.ANONY_ADD_TITLE + ":",
                url: "/mobilemode/mobile/view.html?"+(ishomepage ? "appid="+appid : "appHomepageId="+appHomepageId) + "&mTokenFrom=anonymous&mToken=",
                rightTip: constants.ANONY_ADD_TIP,
                errorTip: ""
            };
            var template = '<div class="page-links anonymous-links">' + _u.tempEngine(pageLinkTemplate, link) + '</div>';
            var layero;

            _u.api("designer", {
                action: "generateAnonymousUrl",
                data: ishomepage ? { appid: appid } : { appHomepageId: appHomepageId }
            }, function (res) {
                layero && layero.find(".link-address").html(link.url + res.data.mToken);
            });

            modal.open({
                area: ['640px', 'auto'],
                content: template,
                title: constants.ANONY_ADD_TITLE,
                maxmin: false,
                shadeClose: true,
                btn: [constants.CLOSE]
            }, function (el) {
                layero = el;
                initCopyEvent(el[0].querySelectorAll('.link-copy'));
            });
        }
    };
});

define("ad/exportHtml", ["modal", "utils", "dataModel", "appdesigner/constants"], function (modal, _u, dataModel, constants) {
    var tpl = "\
<div class='ad-export-html'>\
    <div class='ad-info'><span class='ad-alert-description'>" + constants.EXPORT_HTML_TIP + "</span></div>\
    <div><input class='form-control' placeholder='"+ constants.ENTER_SERVER_ADD + "' /></div>\
</div>\
";
    return {
        show: function () {
            modal.open({
                area: ['540px', 'auto'],
                content: tpl,
                title: constants.EXPORT_APP_AS_HTML,
                btn: [constants.EXPORT, constants.CANCEL],
                maxmin: false,
                loading: true,
                yes: function (index, layero) {
                    var appid = dataModel.get("appid");
                    var serverPath = layero.find(".form-control").val();
                    var apiPath = "/api/mobilemode/admin/app/exportHtml";

                    window.open(apiPath + "?" + "appid=" + appid + "&serverPath=" + serverPath, "_self");
                    
                    setTimeout(function() {
                        modal.close(index);    
                    }, 200);
                    
                    return false;
                }
            }, function (el) {
                var hostaddr = _u.toHostaddr(ipaddr);

                $(el).find(".form-control").val(hostaddr).focus();
            });
        }
    };
});

define('appdesigner/shortcut', ['vue', 'modal', 'shortcut', 'appdesigner/constants'], function (Vue, modal, shortcut, constants) {
	var shortcuts = {
        "ctrl+s": {
            name: constants.SAVE,
            keys: ['ctrl', 'S'],
            handler: function (e) {
                if (_whetherCanEdit) {
                    $("[data-directive='save']").trigger('click.function');
                }
                e.preventDefault();
                return false;
            }
		},
		"ctrl+c": {
			name: constants.COPYMEC,
			keys: ['ctrl', 'C'],
			handler: function (e) {
				require(['mec'], function(mec) {
					mec.onCopy();
				});	
			}
		},
		"ctrl+v": {
			name: constants.PASTEMEC,
			keys: ['ctrl', 'v'],
			handler: function (e) {
				require(['mec'], function(mec) {
					mec.pasteMec();
				})
			}
		}
        // "ctrl+alt+u": {
        //     name: constants.PAGE_LINKS_WIN,
        //     keys: ['ctrl', 'alt', 'U'],
        //     handler: function () {
        //         require(['pageLinksPicker'], function (picker) {
        //             picker.show();
        //         });
        //     }
        // }
    };

    var helpContent = '\
<div class="shortcut-helper content">\
    <div v-for="shortcut in shortcuts" class="shortcut">\
        <div class="name" v-text="shortcut.name"></div>\
        <div class="key">\
            <template v-for="(kbd, index) in shortcut.keys">\
                <kbd v-text="kbd"></kbd>\
                {{index >= 0 && index < shortcut.keys.length - 1 ? "+":""}}\
            </template>\
        </div>\
    </div>\
</div>\
';

    shortcut.init({ shortcuts: shortcuts });
    return {
        showHelp: function () {
            modal.open({
                area: ['720px', '640px'],
                content: helpContent,
                title: [constants.SHORTCUT, 'center'],
                maxmin: false,
                btn: false,
                icon: false,
                shadeClose: true
            }, function () {
                new Vue({
                    el: ".shortcut-helper",
                    data: {
                        shortcuts: shortcuts
                    }
                })
            });
        }
    }
});

define("appdesigner/dragula", ["dragula", "Mobilemode_trace", 'utils', 'jquery'], function (dragula, Mobilemode_trace, _u) {
    var $lefContent = $("#left-menu-content"),
        $rightMenu = $("#right-menu"),
        $rightContainer = $(".right-container"),
        $mainContent = $("#main-content"),
        $pagesContainer = $("#pages-container"),
        $app = $("#app");
    var status = 0;

    var $dragula = dragula({
        containers: [$rightMenu, $rightContainer, $lefContent],
        mirrorContainer: $app,
        animation: true,
        moves: function (handle) {
            return handle.tagName == 'P';
        },
        overContainer: function (el, container, e) {
            var $lefContent = $("#left-menu-content");
            var parentNode = el.parentNode;
            var canDrop = function () {
                container = isOverContainer(e, el, $rightContainer) && $rightContainer[0];

                if (!container) {
                    container = isOverContainer(e, el, $lefContent) && $lefContent[0];
                    container && (status = 2); // 页面树拖至与左侧菜单栏同列
                } else {
                    status = 1; // 页面树拖至与属性配置同列
                }
                return container;
            };

            if (parentNode == $rightMenu[0]) { // 初始状态或在同一列
                return canDrop();
            }

            if (parentNode == $rightContainer[0] || parentNode == $lefContent[0]) {  // 页面树与属性配置或插件列表在一列
                status = canInitialContainer(e) && 3;

                if (status) return $rightMenu[0];

                return canDrop();
            }

            status = 0;
        },
        custom: function () {
            var dragging = "<div class='ad-dragging'><i></i></div>"
            return $(dragging);
        }
    }).on("over", function (e, el, container, point) {
        if (status == 0) return;

        var $el = $(el),
            $body = $("body"),
            $container = $(container);
        var offset = $container.offset(),
            height = $container.height();
        var $droparea = $body.find(".drop-area");
        var isUpperHalf = point.y < (height / 2 + offset.top);

        if (!$droparea.length) {
            var droparea = "<div class='drop-area'></div>";

            $droparea = $(droparea);
            $body.append($droparea);
        }

        if ($container.find(el).length) {
            isUpperHalf = $(el).offset().top != offset.top;
        }

        if (!$body.find('.drag-transit').length) {
            var $clone = $el.clone(true).addClass("drag-transit").hide();

            $body.append($clone);
        }

        $(".drag-transit").removeAttr("style").css({
            width: $el.outerWidth(),
            height: $el.height(),
            left: $el.offset().left,
            top: $el.offset().top,
        }).hide();

        if (status == 1 || status == 2) { // 初始状态, 页面树与属性配置并排
            $droparea.css({
                "height": isUpperHalf ? height * 0.4 : height * 0.6,
                "width": $container.width(),
                "top": isUpperHalf ? offset.top : offset.top + height * 0.4,
                "left": status == 2 ? 10 : offset.left
            });
            $container.data("upperHalf", isUpperHalf);
        } else if (status == 3) { // 页面树与属性配置或插件列表在一列
            $droparea.css({
                "height": height,
                "width": 200, // 页面树放下的区域宽度设置为200
                "top": offset.top,
                "left": offset.left - 200
            });
        }

        $droparea.addClass("active");
    }).on("dropping", function (e, el, container) {
        var $container = $(container);
        var $property = $(".p-property"),
            $siderbar = $(".sider-bar"),
            $leftMenu = $("#left-menu");

        if (status == 1) {
            $rightMenu.width($container.outerWidth());
            $mainContent.css("margin-right", $rightMenu.outerWidth());
            $siderbar.removeAttr("style");
        } else if (status == 2) {
            $rightMenu.width($rightContainer.outerWidth());
            $mainContent.css("margin-right", $rightMenu.outerWidth());
            $mainContent.css("margin-left", $leftMenu.outerWidth());
            $property.removeAttr("style");
        } else if (status == 3) {
            $property.removeAttr("style");
            $siderbar.removeAttr("style");
        }
        hideDropArea();
    }).on("animate", function (e, el, container, callback) {
        var $container = $(container);
        var $clone = $("body").find(".drag-transit");
        var isUpperHalf = $container.data("upperHalf");
        var width = $container.outerWidth(),
            height = $container.height(),
            offset = $container.offset();
        var $elstyle;

        if (isUpperHalf) {
            $elstyle = { top: offset.top, height: height * 0.4, left: offset.left, opacity: 1, width: width };
        } else {
            $elstyle = { top: offset.top + height * 0.4, height: height * 0.6, left: offset.left, opacity: 1, width: width };
        }

        if (status == 3) {
            $elstyle = { top: offset.top, height: height, left: offset.left - 220, width: 220, opacity: 1 };
        }

        $clone.show().animate($elstyle, 'normal', 'swing', function () {
            callback();
            $clone.remove();
        });
    }).on("dropped", function (e, el, container) {
        var $el = $(el),
            $container = $(container),
            $ref = $el.siblings("[data-drag]");
        var height = $container.height();
        var width = $container.outerWidth();
        var isUpperHalf = $container.data("upperHalf");
        var $elstyle, $refstyle, $refTop;

        if (status == 1 || status == 2) {
            if (isUpperHalf) {
                $elstyle = { top: 0, height: height * 0.4 };
                $refstyle = { height: height * 0.6 };
                $refTop = { top: height * 0.4 };
            } else {
                $refstyle = { height: height * 0.4 };
                $elstyle = { top: height * 0.4, height: height * 0.6 };
                $refTop = { top: 0 };
            }

            $el.css($elstyle);
            $ref.css($refstyle).animate($refTop, function () {
                initRowStretch(isUpperHalf, $ref, $el);
            });

            $lefContent.removeClass("top bottom");
            $rightContainer.removeClass("top bottom");
            $container.addClass(isUpperHalf ? "top" : "bottom").parent().width(width);
        } else if (status == 3) {
            $container.width(width + $el.outerWidth());
            $el.removeAttr("style");
            $(".row-resize").remove();
        }

        Mobilemode_trace.set(Mobilemode_trace.DRAGULA, {
            status: status,
            isUpperHalf: isUpperHalf,
            $elstyle: $elstyle || "",
            $refstyle: $.extend($refstyle, $refTop) || "",
            $constyle: $container.attr("style") || "",
        });

        $mainContent.css("margin-right", $rightMenu.outerWidth());
        Mobilemode_trace.set(Mobilemode_trace.COL_STRETCH, {
            mgright: $rightMenu.outerWidth() || ""
        });

        resize();
    }).on("leave", hideDropArea)
        .on("end", hideDropArea);

    var dragulaHistory = Mobilemode_trace.get(Mobilemode_trace.DRAGULA);

    function traceHistory() {
        var colstretchHistory = Mobilemode_trace.get(Mobilemode_trace.COL_STRETCH);
        var dragStatus = dragulaHistory.status;

        var insert = function ($parent) {
            var $ref;
            var $elstyle = dragulaHistory.$elstyle,
                $refstyle = dragulaHistory.$refstyle;
            var totalHeight = $elstyle.height + $refstyle.height;
            var ratio = $parent.height() / totalHeight;

            $elstyle.height = $elstyle.height * ratio;
            $elstyle.top = $elstyle.top * ratio;
            $refstyle.height = $refstyle.height * ratio;
            $refstyle.top = $refstyle.top * ratio;
            $pagesContainer.css($elstyle);
            $parent.append($pagesContainer).attr("style", dragulaHistory.$constyle).addClass(dragulaHistory.isUpperHalf ? "top" : "bottom");

            setTimeout(function () {
                $pagesContainer = $("#pages-container");
                $ref = $pagesContainer.siblings("[data-drag]").css($refstyle);
                initRowStretch(dragulaHistory.isUpperHalf, $ref, $pagesContainer);
            })
        };

        if (dragStatus == 1) {
            insert($rightContainer);
        } else if (dragStatus == 2) {
            insert($lefContent);
        }

        if (colstretchHistory) {
            $rightContainer.width(colstretchHistory.width);
            if (colstretchHistory.width == colMax()){
                setResizeType(2);
            }
            $mainContent.css("margin-right", colstretchHistory.mgright);
        }

        resize();
    }

    function initRowStretch(isUpperHalf, $el, $adjacent) {

        var rowResize = $(".row-resize").length ? ".row-resize" : "<div class='row-resize'></div>",
            $rowResize = $(rowResize);
        var $container = $el;
        var conprop = "$refstyle",
            ajprop = "$elstyle";

        if (!isUpperHalf) {
            $container = $adjacent;
            $adjacent = $el;
            conprop = "$elstyle";
            ajprop = "$refstyle";
        }

        var height = $container.parent().height();

        $adjacent.css("z-index", "inherit");
        $container.css("z-index", "99999");

        $rowResize.unstretch().stretch({
            type: 1,
            container: {
                el: $container,
                initial: { top: height * 0.4, height: height * 0.6 },
                min: 10,
                style: 'height',
                move: function ($conEl, distance, move) {
                    var _u = require("utils");
                    var style = {
                        height: distance,
                        top: move === void 0 ? 0 : _u.toInt($conEl.css('top')) - move
                    };
                    $conEl.css(style);
                    var history = {};
                    history[conprop] = style;
                    Mobilemode_trace.set(Mobilemode_trace.DRAGULA, history)
                },
                max: function () {
                    return $el.parent().height();
                }
            },
            adjacent: {
                el: $adjacent,
                initial: { top: 0, height: height * 0.4 },
                style: 'height',
                aftermove: function ($adjacent, distance) {
                    var history = Mobilemode_trace.get(Mobilemode_trace.DRAGULA);

                    history[ajprop] = $.extend(history[ajprop], { height: distance });
                    Mobilemode_trace.set(Mobilemode_trace.DRAGULA, history);
                }
            },
            callback: {
                reset: function (constyle, ajstyle) {
                    var history = {};

                    history[conprop] = constyle;
                    history[ajprop] = ajstyle;
                    Mobilemode_trace.set(Mobilemode_trace.DRAGULA, history);
                }
            }
        });
        $container.append($rowResize);
    }

    function initColStretch() {
        $('.col-resize').stretch({
            type: 0,
            container: {
                el: ".right-container",
                style: 'width',
                initial: { width: $rightContainer.outerWidth() },
                min: 400,
                boundary: getColBoundary,
                max: colMax,
                move: function ($conEl, distance, move) {
                    $conEl.width(distance);
                    Mobilemode_trace.set(Mobilemode_trace.COL_STRETCH, {
                        width: distance
                    });
                }
            },
            adjacent: {
                el: '#main-content',
                initial: { "margin-right": $mainContent.css("margin-right") },
                style: 'margin-right',
                aftermove: function ($adjacent, distance) {
                    var width = $rightMenu.outerWidth();

                    $mainContent.css("margin-right", width);

                    Mobilemode_trace.set(Mobilemode_trace.COL_STRETCH, {
                        mgright: width
                    });
                }
            },
            callback: {
                dblclick: resize,
                end: resize,
                reset: function (constyle, adjstyle) {
                    var history = $.extend(constyle, adjstyle);

                    history.mgright = $rightMenu.outerWidth();
                    delete history["margin-right"];
                    adjstyle = _u.toInt(history.mgright);
                    $mainContent.css("margin-right", $rightMenu.outerWidth());
                    Mobilemode_trace.set(Mobilemode_trace.COL_STRETCH, history);
                    setResizeType(1);
                },
                min: function () {
                    setResizeType(1);
                },
                max: function () {
                    setResizeType(2);
                }
            }
        });
    }

    function getColBoundary() {
        var $tooltip = $(".tool-tip"),
            $wrapper = $("#wrapper"),
            $leftMenu = $("#left-menu");
        var boundary = $leftMenu.outerWidth() + $wrapper.outerWidth() + $tooltip.outerWidth() + 150;

        return boundary;
    }

    function colMax(){
        var boundary = getColBoundary();

        var max = $('body').outerWidth() - boundary;

        if (!$rightContainer.find("#pages-container").length) {
            max = max - $("#pages-container").width();
        }
        return max;
    }

    function setResizeType(type) {
        require(["pluginAttr"], function (pluginAttr) {
            pluginAttr.setResizeType(type);
        });
    }

    function resize() {
        require(['mec', "pluginAttr", 'rule'], function (mec, pluginAttr, rule) {
            mec.resetEditor();
            pluginAttr.resizeAttrScriptEditor();
            $("#draggable_center").trigger("click");
        });
    }

    function canInitialContainer(e, container, scale) { // 回到初始状态
        var offset = $rightMenu.offset();

        return !(e.clientY > offset.top && (e.clientX > offset.left || e.clientX < $lefContent.outerWidth()));
    }

    function isOverContainer(e, el, container) {
        var $el = $(el),
            $container = $(container);
        var offset = $container.offset(),
            eOffset = $el.offset();

        if ($container.find(el).length) {
            return offset.left <= e.clientX &&
                e.clientX <= offset.left + $container.outerWidth() &&
                ((eOffset.top == offset.top &&  // 上半区
                    eOffset.top + $el.height() < e.clientY) ||
                    (eOffset.top > offset.top && // 下半区
                        e.clientY < eOffset.top &&
                        offset.top < e.clientY));
        }
        return offset.left <= e.clientX &&
            e.clientX <= $container.outerWidth() + offset.left &&
            offset.top <= e.clientY &&
            e.clientY <= $container.height() + offset.top;
    }

    function hideDropArea() {
        $('body').find(".drop-area").removeClass('active');
    }

    return {
        init: function () {
            initColStretch();
            dragulaHistory && traceHistory();
        }
    }
});

define("appdesigner/animation", ["jquery"], function () {
    return {
        ready: function () {
            $(document.body).removeClass("dragula").addClass('animate');
        }
    }
});

define("appdesigner/constants", function () {
    var consMapping = {
        ALL: 3407, // 全部
        SAVE: 3515, // 保存
        CANCEL: 3516, // 取消
        REFRESH: 3596, // 刷新
        SAVE_AS_TEMPLATE: 3645, // 存为模板
        CLEAR: 3704, // 清除 
        PREVIEW: 3712, // 预览
        CLOSE: 3787, // 关闭
        CONFIRM: 3821, // 确认
        PAGE_PROPS: 4643, // 页面属性
        MAX: 4691, // 最大化
        MIN: 4692, // 最小化
        SHORTCUT: 4693, // 快捷键
        PAGE_LINKS_WIN: 4694, //  页面链接窗口 
        PAGE_ADDRESS: 4695, // 页面地址
        CLICK_COPY: 4696, // 点击复制
        COPIED: 4697, // 已复制
        PAGE_ADDRESS_TIP: 4698, // 该地址只用于移动建模页面之间的跳转使用, 如写在列表插件的链接地址上或者使用函数$u打开页面等。
        PAGE_ADDRESS_ALERT: 4699, // 请勿将该地址用于配置在Emobile或者微信企业号上, 这将导致系统部分功能异常。 
        PUBLISH_ADDRESS_TIP: 4700, // 该地址是用于Emobile或者微信企业号在发布应用(或菜单)时使用的链接地址。 
        PUBLISH_ADDRESS_ALERT: 4701, // 请勿将该地址用于移动建模页面之间的跳转, 这将会导致系统部分功能异常。
        PUBLISH_ADDRESS: 4702, // 发布地址 
        ADD_MODULE: 4703, // 添加模块
        SELECT_APP_TRANSFER_PAGE: 4707, //选择一个移动应用以转移页面
        CURRENT_USING: 4708, // 当前使用
        SAVE_SUCCESS: 4709, // 保存成功
        SAVE_FAILED: 4710, // 保存失败
        VERSION_DIFF_TIP: 4711, // 系统检测到本地当前版本和服务器版本不一致，原因可能是其他人已经对当前页面做过保存操作。
        VERSION_DIFF_CANCEL: 4712, // 点击“取消” 暂停保存操作，你可以先备份一下自己所做的修改，然后刷新页面后重新修改，以免覆盖掉其他人的修改。
        VERSION_DIFF_CONFIRM: 4713, // 点击“确定” 继续执行保存操作，将会以你的本地内容作为最新版本保存，这可能会覆盖掉其他人的修改。
        OPERATION_SUCCESS: 4714, //  操作成功 
		OPERATION_FAILED: 4715, //  操作失败
		COPYMEC_SUCCESS: 6356, // 插件已复制至粘贴板上
		PASTEMEC_SUCCESS: 6357, // 粘贴成功
		COPYMEC: 6363, // 复制插件
		PASTEMEC: 6364, // 粘贴插件
        QR_CODE: 4716, // 二维码
        EXPORT: 4717, // 导出
        SKIN: 4718, // 皮肤
        SOURCE_CODE: 4719, // 源码
        USAGE_DOCUMENT: 4720, // 使用文档
        TEMPLATE_OVERWRITE_TIP: 4721, // 选择的模板内容会覆盖掉当前页面的内容，确定继续吗？
        NO_LIMIT: 4722, // 不限
        LAYOUT_DESIGNER: 4723, // 布局设计器
        COPY: 4724, // 副本
        DEL_PAGE_TIP: 4725, // 确定要删除页面
        DEL_GROUP_TIP: 4726, // 确定要删除分组
        DEL_GROUP_WARN: 4727, //删除分组会级联删除分组下的子分组和页面，删除不可恢复，请慎重操作!
        TRANSFER_PAGES: 4767, // 转移页面
        PUBLISHED: 4768, // 发布
        UNPUBLISHED: 4769, //未发布
        EXPORT_APP_TIP: 4770, // 你确定要导出此移动应用吗？
        GE_STATIC_PAGE: 4996, // 生成静态页
        ANONY_ADD: 4997, // 匿名访问地址 
        ANONY_ADD_TITLE: 4998, // 地址如下
        ANONY_ADD_TIP: 4999, //  该地址可用于用户匿名访问应用或页面，无需进行登录验证。 
        EXPORT_APP_AS_HTML: 5000, // 导出应用HTML
        ENTER_SERVER_ADD: 5001, // 请输入ecology端服务地址
        EXPORT_HTML_TIP: 5002, // 下方为当前ecology服务端的地址，用于部分插件和Server端进行交互时使用。您可以在导出前对其进行修改或者清空(如不需要)
        INIT_CONTENT: 5003, // 初始化内容
        INIT_CONTENT_SUCCESS: 5004, // 初始化内容成功
        INIT_CONTENT_TIP: 4103, // 初始化内容会覆盖当前页面的内容。确定继续吗？
        ATTR_CONFIG: 5005, // 属性配置
        MAX_BOUNDARY: 5006, // 已达到最大边界, 无法最大化
        OPEN_APP: 5007, // 打开应用
        TYPES: 5008, // 类型
        STATUS: 5009, // 状态
        NO_TYPES: 5010, // 暂无分类
        NO_DESC: 5011, // 暂无描述
        MOBILE_APP_CENTER: 5012, // 移动应用中心
        PLUGIN: 5013, // 插件
        PRECAUTIONS: 5400, // 说明
        WRITE_CSS_TIP: 5015, // 请在此处直接键入css样式代码
        WRITE_JS_TIP: 5016,  // 请在此处直接键入JavaScript代码，首次使用建议先点击右上角的帮助图标了解注意事项
        PRECAUTIONS_TIP_1: 5017, // 此处支持Zepto(类jQuery库)语法, 即可以使用$对象进行类jQuery的操作
        PRECAUTIONS_TIP_2: 5018, //此处定义的方法如需在插件内进行调用，则需将该方法挂载在全局对象window上，如：
        PRECAUTIONS_TIP_3: 5019, // 请勿使用$(document.body).ready(function() {...})或window.onload等事件回调的方式来达到此类效果，因为无法确定此类方法回调的正确执行时机
        PRECAUTIONS_TIP_4: 5020, // 此处键入的代码会在页面加载前执行，如有需要在页面加载完成后执行的代码，请使用$load函数，具体代码如下所示：
        LACK_STATIC_RESOURCES_WARN: 5225, // 该应用的静态资源与最新版本存在差异。请点击
        DIFF_STATIC_RESOURCES_WARN: 5226, // 該應用的靜態資源與最新版本存在差异。請點擊
        UPDATED_STATIC_RESOURCES: 5227, // 更新静态资源成功
        GEN_STATIC_RESOURCES: 5228, // 生成静态资源成功
        GENING_STATIC_RESOURCES: 5229, // 正在生成静态资源...
        UPDATING_STATIC_RESOURCES: 5230, // 正在更新静态资源...
        GENERATE: 5231, // 生成
        UPDATE: 5232, // 更新
        PLUGIN_VERSION_CONFLICT_TIP: 5337,//插件当前版本(V#oldVersion#)与最新导入记录版本(V#newVersion#)不一致，如有问题，请先升级插件，点击前往升级
        CORRESPONDING_FIELD: 4328,  //对应字段
        NOT_SET: 4644,  //未设置
        PLUGIN_ATTR_MISSING: 6022,   //部分插件配置丢失, 页面保存失败
        DISABLED_SWITCH_PAGE_SAVING: 6036, // 页面正在保存中，请稍后切换页面
        APP_SETTINGS: 6152, // 应用设置
        PAGE_CONFIG_CHANGE_TIP:6201,  //页面配置已变化，确定放弃修改吗？
        LIKE: 6166,	//如：
        PRECAUTIONS_CSS_TIP_1: 6199,	//主题颜色使用变量
        PRECAUTIONS_CSS_TIP_2: 6200,	//字体大小使用变量
        DELETED: 5255,	//已删除
        NOT_DEL_GROUP_HOMEPAGE: 6248,	//分组下包含应用首页，无法删除整个分组
        NEW_VERSION: 6359,  //存为新版本
        APP_VERSIONS: 6360  //应用版本
    };

    var consId, constants = {};

    for (var key in consMapping) {
        consId = consMapping[key];
        constants[key] = SystemEnv.getHtmlNoteName(consId) || "";
    }

    return constants;
});