define('module-create', ['vue', 'module-list', 'module-layout', 'app-list', 'Mobilemode_trace', 'vue-components', 'components/common'], function (Vue, modulelist, layout, applist, trace) {
    var template = '\
<div class="add-module">\
    <app-list :formmodeappid="formmodeappid" v-on:appChange="appChange" ></app-list>\
    <module-list :moduleid="moduleId" :modulelist="modulelist" v-on:moduleChange="moduleChange"></module-list>\
    <module-layout :moduleLayout="moduleLayout" :onCheck="onCheck"></module-layout>\
</div>\
';
    return function () {
        var components = require('vue-components');
        var common = require('components/common');

        Vue.component('module-create', {
            template: template,
            props: ['status', 'moduleid', 'formmodeappid', 'appid'],
            data: function () {
                return {
                    moduleId: -1, // 防止props中的moduleid重置,触发change
                    modulelist: null,
                    moduleLayout: null,
                    moduleLayoutsCache: {}, // 缓存请求过的moduleLayout
                    moduleLayouts: [], // 应用存在(即appid有值时)的moduleLayout
                    layoutCounts: {} // 统计被check的layout, moduleid: 个数
                };
            },
            methods: {
                getAllLayoutsByAppid: function() {
                    var vm = this;

                    if(!vm.appid) return;

                    common.api('designer', {
                        action: "getAppModeList",
                        type: 'get',
                        data: { appid: this.appid }
                    }, function (res) {
                        var data = res.data || [],
                            moduleId = -1;

                        data.forEach(function(moduleLayout){
                            moduleId = moduleLayout.modelid;

                            vm.moduleLayoutsCache[moduleId] = vm.moduleLayoutFormat(moduleLayout);
                        });
                    });
                },
                appChange: function(formmodeappid, isFirstInit) {
                    var vm = this;

                    common.api('formmode', {
                        action: 'modelist',
                        data: { formmodeappid: formmodeappid },
                        type: "get"
                    }, function(res) {
                        vm.modulelist = res.data || [];
                        vm.formmodeappid = formmodeappid;
                        vm.modulelist.length && vm.moduleChange(vm.moduleId || res.data[0].id);
                    });
                },
                moduleChange: function(moduleId) {
                    var vm = this, val = {};
                    if (vm.appid && vm.formmodeappid && moduleId != -1) {
                        val[vm.appid] = [vm.formmodeappid, moduleId];
                        trace.set('moduleHistory', val);
                    }

                    if(vm.moduleLayoutsCache[moduleId]) {
                        vm.moduleLayout = vm.moduleLayoutsCache[moduleId];
                        vm.moduleId = moduleId;
                        return;
                    }
                    if(moduleId == -1) {
                        this.moduleLayout = null;
                        return;
                    }

                    common.api("designer", {
                        action: "getAppModelLayout",
                        data: { 
                            appid: vm.appid || vm.formmodeappid,
                            modelid: moduleId
                        },
                        type: "get"
                    }, function(res) {
                        var moduleLayout = vm.moduleLayoutFormat(res.data);

                        vm.moduleLayout = moduleLayout;
                        vm.moduleLayoutsCache[moduleLayout.moduleId] = moduleLayout;
                        vm.moduleId = moduleId;
                    })
                },
                onCheck: function(exp) {
                    var moduleId = this.moduleLayout.moduleId,
                        count = this.layoutCounts[moduleId] || 0;
                    
                    this.layoutCounts[moduleId] = count + exp;
                },
                getSelectedModules: function(callback) {
                    var vm = this,
                        cache = vm.moduleLayoutsCache,
                        selectedModules = [],
                        moduleLayout = {};

                    if(!vm.moduleLayout) {
                        return callback && callback([]);
                    }

                    cache[vm.moduleLayout.moduleId] = vm.moduleLayout; // 当前moduleLayout的赋值
                    for(var moduleId in vm.layoutCounts) {
                        if(!vm.layoutCounts[moduleId] && ~vm.moduleLayouts.indexOf(moduleId)) continue;
                        selectedModules.push(Vue.parseJSON(cache[moduleId]));
                    }
                    var layoutMap = function(layout) {
                        return {id: layout.id, exist: layout.exist};
                    };

                    selectedModules = selectedModules.map(function(mod, index) {
                        mod.homepageLayout.otherLayout = mod.homepageLayout.otherLayout.map(function(layout) {
                            return {id: layout.id, exist: layout.exist,type: layout.type}
                        });
                        mod.homepageSearchLayout = mod.homepageSearchLayout.map(layoutMap);
                        mod.modeSearchLayout = mod.modeSearchLayout.map(layoutMap)
                        delete mod.modelname;
                        return mod;
                    });
                    callback && callback(selectedModules);
                },
                moduleLayoutFormat: function(moduleLayout) {
                    var homepageLayout = moduleLayout.homepageLayout;
                    return {
                        homepageLayout: {
                            addLayout: homepageLayout.addHomepageLayout,
                            editLayout: homepageLayout.editHomepageLayout,
                            showLayout: homepageLayout.showHomepageLayout,
                            otherLayout: homepageLayout.otherLayout.map(function(layout) {
                                layout.exist = +layout.exist; // 将exist转为number 不然save会保存
                                return layout;
                            })
                        },
                        modelayout: moduleLayout.layout,
                        homepageSearchLayout: this.modeSearchListFormat(moduleLayout, "homepage"),
                        modeSearchLayout: this.modeSearchListFormat(moduleLayout, "layout"),
                        modelname: moduleLayout.modelname,
                        moduleId: moduleLayout.modelid
                    }
                },
                modeSearchListFormat: function(moduleLayout, type) {
                    var modeSearchList = moduleLayout.modeSearchList;

                    return modeSearchList.map(function(modeSearch, index) {
                        return {
                            layoutname: modeSearch.customname,
                            desc: moduleLayout.modelname,
                            exist: +modeSearch[type+"exist"],
                            id: modeSearch.id
                        }
                    });
                }
            },
            component: {
                "module-list": modulelist(),
                "module-layout": layout(),
                "app-list": applist()
            },
            created: function () {
                this.moduleId = this.moduleid;
                this.getAllLayoutsByAppid();
                this.status.$on("getSelectedModules", this.getSelectedModules);
            }   
        });
    }
});

define('app-list', ['vue', 'components/common', 'scroll', 'vue-ext', 'ztree'], function (Vue, common) {
    var Scroll = require('scroll');
    
    var template = '\
<div>\
    <div class="search">\
        <input type="text" id="module-search-input" name="" v-model="searchText" placeholder="Search...">\
        <a href="javascript:;" class="clean-icon" :class="{visible: searchText.length > 0}" @click="searchText=\'\'"><i class="iconfont icon-del fa-normal-1x"></i></a>\
        <a href="javascript:;" class="search-icon"><i class="iconfont icon-search fa-normal-2x"></i></a>\
    </div>\
    <div class="apps-tree-wrapper"><ul id="apps-tree" class="ztree"></ul></div>\
</div>\
';

    var zTreeSettings = {
        view: {
            expandSpeed: "", //取消展开节点的动画
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: function(e, treeId, treeNode) {
                var zTreeObj = $.fn.zTree.getZTreeObj(treeId);

                zTreeObj.expandNode(treeNode);
            }
        }
    };

    return function () {
        var components = require('vue-components');

        Vue.component('app-list', {
            template: template,
            props: ['formmodeappid'],
            data: function() {
                return {
                    searchText: ""
                };
            },
            methods: {
                initFormmodeAppList: function() {
                    var vm = this;

                    common.api('formmode', {
                        action: "applist4designer",
                        type: "get"
                    }, function(result) {
                        var data = result.data || [], zTreeObj, selectedNode, id;

                        data.forEach(function(item) {
                            item.click = "";
                        });
                        
                        $.fn.zTree.init($('#apps-tree'), zTreeSettings, data);
                        zTreeObj = $.fn.zTree.getZTreeObj('apps-tree');
                        id = vm.formmodeappid || data[0].id;
                        selectedNode = zTreeObj.getNodeByParam("id", id);
                        
                        zTreeObj.selectNode(selectedNode, true, true);
                        vm.$emit("appChange", id)
                    })
                },
                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.html(pageNameHtml);
                            });
                        },
                        unhighlight = function ($el) {
                            var html = $el.html().replace(/<span class="highlight">(.*?)<\/span>/g, "$1");
    
                            $el.html(html);
                        },
                        $pages = $('#apps-tree'),
                        vm = this,
                        zTreeObj = $.fn.zTree.getZTreeObj('apps-tree');
    
                    unhighlight($pages);
                    
                    if(!val) return $pages.find("li").show();
    
                    zTreeObj.getNodesByFilter(function(node) {
                        if(!node.isParent) return;
    
                        zTreeObj.expandNode(node, 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'); // 页面高亮的元素
                                
                        // 只要模块名或者模块页面存在搜索关键字, 则显示整个模块
                        if(index && ($pageTitle.find('.highlight').length || $pageContainer.find('.highlight').length)) {
                            $pageContainer.parent('li').show();
                        }

                        // 自定义页面
                        if(!index) {
                            $pageContainer.find('li').hide();
                            $pagesHighlight.length && $pagesHighlight.parents('li').show();
                        }
                    });

                    $pages[0].scrollTop = 0;
                    Scroll.resize("#apps-tree");
                    $('#module-search-input').focus(); // 防止expandNode后 输入框失去焦点
                }
            },
            mounted: function () {
                var vm = this;

                vm.initFormmodeAppList();

                $(vm.$el).on('click', 'li a', function(e) {
                    var zTreeObj = $.fn.zTree.getZTreeObj('apps-tree'),
                        selectedNode;
                    
                    selectedNode = zTreeObj.getSelectedNodes()[0];
                    vm.$emit("appChange", selectedNode.id);
                });

                new Scroll("#apps-tree", true);
            },
            watch: {
                searchText: function(val) {
                    this.pagesTreeFilter(val.trim());
                }
            }
        });
    }
});

define('module-list', ['vue', 'vue-ext', 'components/common'], function (Vue, ext, common) {
    var template = '\
<div class="module-content">\
    <div class="search">\
        <input type="text" name="" v-model="searchText" placeholder="Search...">\
        <a href="javascript:;" class="clean-icon" :class="{visible: searchText.length > 0}" @click="searchText=\'\'"><i class="iconfont icon-del fa-normal-1x"></i></a>\
        <a href="javascript:;" class="search-icon"><i class="iconfont icon-search fa-normal-2x"></i></a>\
    </div>\
    <div class="modules">\
        <ul class="list" v-if="modules && modules.length > 0">\
            <template v-for="mod in modules">\
            	<li :class="{active: mod.id == moduleid, module: true}" @click="moduleChange(mod.id)"> <p class="name">{{mod.entityname}}</p> <span>{{mod.entitydesc}}</span><span class="module-virtual" v-if="mod.isVirtualForm">V</span> </li>\
            </template>\
        </ul>\
        <ul class="list" v-if="modules && modules.length == 0">\
            <li class="no-result">'+ SystemEnv.getHtmlNoteName(3656)/*无匹配的结果显示*/ +'</li>\
        </ul>\
        <pagination :curr="currPage" :sum="allModules.length" :pagesize="pagesize" v-on:currChange="currChange"></pagination>\
        <div class="loading" v-if="!modulelist"><span class="icon-0"></span></div>\
    </div>\
</div>';


    return function () {
        var components = require('vue-components');

        Vue.component('module-list', {
            template: template,
            props: ['modulelist', 'moduleid'],
            data: function () {
                return {
                    searchText: "", // 模块搜索字段
                    pagesize: 8,
                    currPage: 1,
                    isfirstChange: true
                };
            },
            component: {
                'pagination': components.use('pagination')
            },
            methods: {
                isModuleMatch: function(mod) {
                    return ~mod.entityname.toLowerCase().indexOf(this.searchText.toLowerCase());
                },
                currChange: function(currPage) {
                    this.currPage = currPage;
                    this.$emit("moduleChange", this.modules[0].id)
                },
                moduleChange: function(moduleid) {
                    this.$emit("moduleChange", moduleid);
                }
            },
            watch: {
                allModules: function() {
                    var id = -1;
                    if(this.currPage != 1) {
                        this.currPage = 1;
                    } else if(!this.isfirstChange){
                        id = this.modules.length ? this.modules[0].id : id;
                        this.$emit("moduleChange", id)
                    } else {
                        this.isfirstChange = false;
                    }
                }
            },
            computed: {
                allModules: function() {
                    var vm = this;
                    return (this.modulelist || []).filter(function(mod){
                        return vm.isModuleMatch(mod);
                    });
                },
                modules: function() {
                    var vm = this;
                        start = (vm.currPage - 1) * vm.pagesize,
                        end = vm.currPage * vm.pagesize;

                    return vm.allModules.slice(start, end);
                }
            }
        });
    }
});

define('module-layout', ['vue', 'vue-ext', 'components/common'], function (Vue) {
    var template = '\
<div>\
    <div class="layout">\
         <ul>\
            <li data-view=\'custom\' @click="layoutviewChange(\'custom\')" :class="{active: layoutview==\'custom\'}">'+ SystemEnv.getHtmlNoteName(4759)/*模块布局*/ +'</li>\
            <li data-view=\'module\' style="display:none;" @click="layoutviewChange(\'module\')" :class="{active: layoutview==\'module\'}">'+ SystemEnv.getHtmlNoteName(4759)/*模块布局*/ +'</li>\
        </ul>\
        <div class="container" v-show="layoutview==\'custom\'">\
            <checkbox class="checkall" :type="\'homepageLayout\'" v-on:checked="checkAll"></checkbox>\
            <div v-scroll="{theme: \'light\', suppressScrollX: true}"><ul v-if="!!moduleLayout">\
            	<module-card @check="check(\'homepageLayout\', \'addLayout\')" :type="1" :isdefault="true" :modelname="moduleLayout.modelname" :layout="moduleLayout.homepageLayout.addLayout"></module-card >\
            	<module-card @check="check(\'homepageLayout\', \'editLayout\')" :type="2" :isdefault="true" :modelname="moduleLayout.modelname" :layout="moduleLayout.homepageLayout.editLayout"></module-card>\
            	<module-card @check="check(\'homepageLayout\', \'showLayout\')" :type="0" :isdefault="true" :modelname="moduleLayout.modelname" :layout="moduleLayout.homepageLayout.showLayout"></module-card>\
            	<module-card @check="check(\'homepageLayout\', \'otherLayout\', index)" v-for="(otherLayout,index) in moduleLayout.homepageLayout.otherLayout" :layout="otherLayout"></module-card>\
        	</ul></div>\
    	</div>\
    	<div class="container" v-show="layoutview==\'module\'">\
        	<checkbox class="checkall" :type="\'modelayout\'"  v-on:checked="checkAll"></checkbox>\
            <div v-scroll="{theme: \'light\', suppressScrollX: true}"><ul v-if="!!moduleLayout">\
                <module-card @check="check(\'modelayout\', \'addLayout\')"  :type="1" :modelname="moduleLayout.modelname" :layout="moduleLayout.modelayout.addLayout"></module-card>\
                <module-card @check="check(\'modelayout\', \'editLayout\')"  :type="2" :modelname="moduleLayout.modelname" :layout="moduleLayout.modelayout.editLayout"></module-card>\
                <module-card @check="check(\'modelayout\', \'showLayout\')" :type="0" :modelname="moduleLayout.modelname" :layout="moduleLayout.modelayout.showLayout"></module-card>\
            </ul></div>\
    	</div>\
    </div>\
    <div class="layout">\
        <ul>\
            <li data-view=\'custom\' @click="searchview=\'custom\'" :class="{active: searchview==\'custom\'}">'+ SystemEnv.getHtmlNoteName(4441)/*查询列表*/ +'</li>\
            <li data-view=\'module\' style="display:none;" @click="searchview=\'module\'" :class="{active: searchview==\'module\'}">'+ SystemEnv.getHtmlNoteName(4765)/*模块查询*/ +'</li>\
        </ul>\
        <div class="container" v-show="searchview==\'custom\'">\
			<checkbox class="checkall" :type="\'homepageSearchLayout\'" v-on:checked="checkAll"></checkbox>\
            <div v-scroll="{theme: \'light\', suppressScrollX: true}"><ul v-if="!!moduleLayout">\
                <module-card @check="check(\'homepageSearchLayout\', index)" v-for="(hslayout,index) in moduleLayout.homepageSearchLayout" :type="3" :layout="hslayout"></module-card>\
            </ul></div>\
        </div>\
        <div class="container" v-show="searchview==\'module\'">\
            <checkbox class="checkall" :type="\'modeSearchLayout\'"  v-on:checked="checkAll"></checkbox>\
            <div v-scroll="{theme: \'light\', suppressScrollX: true}"><ul v-if="!!moduleLayout">\
                <module-card @check="check(\'modeSearchLayout\', index)" v-for="(mslayout,index) in moduleLayout.modeSearchLayout" :type="3" :layout="mslayout"></module-card>\
            </ul></div>\
        </div>\
    </div>\
<div>';

    return function () {
        var components = require('vue-components');
        var common = require('components/common');

        Vue.component('module-layout', {
            template: template,
            props: ["moduleLayout", "onCheck"],
            data: function () {
                return {
                    layoutview: "custom",
                    searchview: "custom"
                }
            },
            component: {
                'checkbox': components.use('v-checkbox'),
                'module-card': components.use('module-card')
            },
            methods: {
                _check: function(layoutType, type, index, isChecked) {
                    var moduleLayout = this.moduleLayout,
                        isUndefined = isChecked == undefined, exp, isexist;
                    var _setCheckedAndExp = function(isexist) {
                        if(!isUndefined) {
                            exp = isChecked == isexist ? 0 : (isChecked ? 1 : -1);
                        } else {
                            isChecked = !isexist;
                            exp = isChecked ? 1 : -1;
                        }
                    };

                    if(common.isNumber(index)) { // otherLayout
                        _setCheckedAndExp(moduleLayout[layoutType][type][index].exist);
                        moduleLayout[layoutType][type][index].exist = +isChecked;
                    } else if(common.isNumber(type)) { // homepageSearchLayout modeSearchLayout
                        _setCheckedAndExp(moduleLayout[layoutType][type].exist)
                        moduleLayout[layoutType][type].exist = +isChecked;
                    } else { // add edit show
                        _setCheckedAndExp(moduleLayout[layoutType][type])
                        moduleLayout[layoutType][type] = +isChecked;                        
                    }

                    return exp;
                },
                check: function(layoutType, type, index) {
                    var exp = this._check(layoutType, type, index);
                    this.onCheck(exp);
                },
                checkAll: function(layoutType, isChecked) {
                    if(!this.moduleLayout) return;

                    var vm = this,
                        moduleLayout = vm.moduleLayout, 
                        layout = moduleLayout[layoutType], 
                        exp = 0, layouter;
                    
                    if(common.isArray(layout)) { // homepageSearchLayout modeSearchLayout
                        exp = layout.reduce(function(prev, cur, index) {
                            return prev + vm._check(layoutType, index, null, isChecked);
                        }, exp);
                    } else {
                        for(var key in layout) {
                            layouter = layout[key];
                            if(common.isArray(layouter)) { // otherLayout
                                exp = layouter.reduce(function(prev, cur, index) {
                                    return prev + vm._check(layoutType, key ,index, isChecked);
                                }, exp);
                            } else { // add edit show
                                exp += vm._check(layoutType, key, null, isChecked)
                            }
                        }
                    }
                    this.onCheck(exp);
                },
                layoutviewChange: function(layoutview) {
                    this.layoutview = layoutview;
                }
            },
            watch: {
                layoutview: function(layoutview) {
                    this.searchview = layoutview;
                },
                moduleLayout: function() {
                    this.layoutview = "custom";
                    this.$children.forEach(function(checkbox){ // 重置checkbox状态
                        checkbox.setStatus && checkbox.setStatus(false);
                    });
                }
            }
        });
    };
});