define(['system/views/pages/page', 'text!./pageDict.tpl'], function (BasePage, template) {    
    var PAGE_STATE = ['ONE', 'MULTI'];

    /**
     * 列表页类定义
     * @param id
     * @param node    节点信息
     * @constructor
     */
    function Page(id, node, biz) {
        var self = this;

        //通过绑定控制界面显示
        self.opts = {
            showWest: true,
            showEast: true,
            showNorth: true,
            showSouth: false,
            showDetail: false,
            treeTitle: '',
            header: '加载中……',
            body: '加载中……',
            footer: '加载中……'
        };

        self.pageState = PAGE_STATE[1]

        //网格列表
        self.grids = [];
        self.showChild = false;

        //继承Page类构造函数
        BasePage.call(self, id, node, template, self.opts, biz);

        //挂载业务状态事件
        if (self.biz) {
            self.biz.on('onStateChanged', function (s, e) {
                if (s.isEdit()) {
                    self.toDetail();
                }
            });
        }
    }

    //继承Page类方法
    // Page.prototype = new BasePage();
    inherits(Page, BasePage);

    /**
     * Override
     * 界面显示后
     */
    Page.prototype.initCompleted = function () {
        this.super('initCompleted');
        var $detailPanel = this.getElement('.page-body-south');

        var self = this;
        $detailPanel.panel({
            onResize: function (w, h) {
                self.resizeGrid($detailPanel);
            }
        })
        $(window).on('resize', null, self, resizePage);
    }

    Page.prototype.destroy = function () {
        this.super('destroy')
        $(window).off('resize', null, resizePage)
    }

    function resizePage(e) {
        var self = e.data
        setTimeout(function () {            
            if (!self.$container || self.$container.length == 0) {
                return;
            }
            self.$layout = self.getElement('.easyui-layout');
            self.$layout.layout()
            self.resize();
        }, 100);
    }

    /**
     * Override
     * 用于初始化界面
     * @return
     */
    Page.prototype.init = function () {
        this.fillHeader(); //工具栏
        this.fillBody(); //数据区
        this.fillFooter(); //页脚
        this.fillMenu(); //附加菜单
    };

    /**
     * PageAll分为上中下左右五部分
     * 此处是上-工具栏
     */
    Page.prototype.fillHeader = function () {
        var self = this,
            tpl = '<div class="page-widget-toolbar" ms-widget="toolbar, $, {0}" ></div>';

        //注册工具条
        var mainToolBar = {
            opts: {
                listBtn: {
                    disable: true
                }
            },
            data: self.biz,
            actions: {
                click: function (opCode) {
                    //如果界面没有执行操作，则执行业务
                    self.opRouter(opCode);
                }
            }
        };
        self.register('toolbar', 'toolbar_main', mainToolBar);
        self.opts.header = Store.format(tpl, 'toolbar_main');
    };

    /**
     * PageAll分为上中下左右五部分
     * 此处是中-数据区
     */
    Page.prototype.fillBody = function () {
        var self = this,
            dsMaster = self.biz.dsMaster;

        var $body = $('<div class="easyui-layout page-body" data-options="fit:true" >');

        let treeTitle = self.biz.getTreeTitle()
        if (treeTitle !== null && treeTitle != undefined) {
            //树模块
            var $treediv = $('<div class="page-body-west" data-options="region:\'west\',split:true,collapsible:false,title:\'' + treeTitle + '\'">')
                .append(self.getTree());
            $body.append($treediv)
        }


        //表格 & 编辑面板
        var $centerdiv = $('<div class="page-body-center" data-options="region:\'center\',split:true">')
            .append(self.getMainGrid())
            .append(self.getMainEditPanel());

        //查询组件
        var $northdiv = $('<div class="page-body-north" data-options="region:\'north\',split:true">')
            .append(self.getQueryPanel());
        $body.append($centerdiv).append($northdiv);

        //明细部分
        var $detail = $('<div class="page-body-south" data-options="region:\'south\',split:true">')
            .append(self.createTab(dsMaster));
        $body.append($detail);

        self.opts.body = $body[0].outerHTML;
    };

    /**
     * PageAll分为上中下左右五部分
     * 此处是中-页脚
     */
    Page.prototype.fillFooter = function () {

    };

    /**
     * 上下文菜单
     */
    Page.prototype.fillMenu = function () {
        var self = this;
        //明细菜单
        var menu = {
            actions: {
                onItemClick: function (opCode, ds, adapter) {
                    self.opRouter.apply(self, arguments);
                },
                bind: function (fn) {
                    self.grids.forEach(function (gd) {
                        if (self.vm[gd]) {
                            self.vm[gd].addContextMenu(fn);
                        }
                    });
                }
            }
        };
        self.register('contextmenu', 'mainmenu', menu);
    };

    /********************生成组件*********************************/

    /**
     * Widget-Tree
     */
    Page.prototype.getTree = function () {
        var self = this,
            dsMaster = self.biz.dsMaster,
            treeName = 'tree_' + dsMaster.name,
            tpl = '<div class="page-widget-tree" ms-widget="tree, $, {0}" >加载中……</div>';

        //注册树组件        
        var treeArgs = {
            actions: {
                onClick: function (event, treeNode) {
                    var moduleCode = treeNode.value;
                    var colName = treeNode.colName;
                    self.biz.treeSelected(moduleCode, colName, treeNode);
                }
            }
        };

        self.register('tree', treeName, treeArgs);
        return Store.format(tpl, treeName);
    };

    /**
     * Widget-Master-Grid
     */
    Page.prototype.getMainGrid = function () {
        var self = this,
            dsMaster = self.biz.dsMaster,
            gridName = 'grid_' + dsMaster.name,
            tpl = '<div class="page-widget-grid" ms-visible="!layout.showDetail" ms-widget="grid, $,' +
                ' {0}">加载中……</div>';

        //注册主表表格
        var mainGrid = {
            opts: {
                editable: false,
                pageSize: 50,
                showCheckColumn: dsMaster.isShowSelCol,
                showDelColumn: false,
                autoRowHeight: true
            },
            data: dsMaster,
            actions: {
                onDblClick: function (e, args) {
                    self.doOp('view');
                },
                activeCellChanged: function (e, args) {
                    self.checkCurrent(args.grid, dsMaster);
                }
            }
        }
        self.register('grid', gridName, mainGrid);
        self.grids.push(gridName);
        return Store.format(tpl, gridName);
    };

    /**
     * Widget-Master-EditPanel
     */
    Page.prototype.getMainEditPanel = function () {
        var self = this,
            dsMaster = self.biz.dsMaster,
            panleName = 'ep_' + dsMaster.name,
            tpl = '<div class="page-widget-editpanel" ms-visible="layout.showDetail" ms-widget="editpanel, $, {0}"></div>';

        //注册编辑面板
        var args = {
            data: dsMaster,
            //TODO 添加last panel enter action
            actions: {
                onLastPanelEneterd: function () {
                    var gridName = 'grid_' + self.biz.dsMaster.getDetails()[0].name;
                    if (self.vm[gridName].actions.onActiveFirstCell) {
                        self.vm[gridName].actions.onActiveFirstCell();
                    }
                }
            }
        };
        self.register('editpanel', panleName, args);
        return Store.format(tpl, panleName);
    };

    /**
     * Widget-QueryPanel
     */
    Page.prototype.getQueryPanel = function () {
        var self = this,
            dsMaster = self.biz.dsMaster,
            qpName = 'qp_' + dsMaster.name,
            tpl = '<div class="page-widget-querypanel" ms-widget="querypanel, $, {0}"></div>';

        //注册查询组件
        var queryPanel = {
            source: dsMaster,
            data: self.biz.funcQueryProject,
            //data: dsMaster,
            actions: {
                querySchemeChanged: function () {
                    if (!self.$layout) return;

                    self.resize();
                },
                search: function () {
                    self.opRouter('refresh')
                }
            }
        };
        self.register('querypanel', qpName, queryPanel);
        return Store.format(tpl, qpName);
    };

    /**
     * Widget-TabControl
     * @param ds
     * @returns {string}
     */
    Page.prototype.createTab = function (ds) {
        var tabs = [],
            self = this,
            tpl = '<div class="page-widget-tab" ms-widget="tabs, $, {0}">加载中……</div>';

        //生成tab
        var tabName = 'tab_' + ds.name;
        var details = ds.getDetails();
        if (details.length > 0) {
            for (var i = 0, len = details.length; i < len; i++) {
                var d = details[i];
                if (!d.isShow) {
                    continue;
                }
                tabs = self.createTabItem(d);
            }

            if (tabs.length == 0) {
                return '';
            }

            if (ds == self.biz.dsMaster) {
                self.hasChild = true;
            }

            var tabsArgs = {
                opts: {},
                data: {
                    tabs: tabs
                },
                actions: {
                    onAddClick: function () {
                        var row = self.vm[tabName].getSelectedTabData();

                        //只有满足三个条件才能增加新行
                        //1、编辑状态
                        //2、数据源允许新增
                        //3、当前行为空或者当前行提交成功
                        if (self.biz.isEdit() &&
                            row.dataSrc.allowInsert &&
                            (!row.dataSrc.currentRow || row.dataSrc.currentRow.validate())) {
                            row.dataSrc.addRow();
                        }
                    },
                    onDeleteClick: function () {
                        var row = self.vm[tabName].getSelectedTabData();

                        //只有满足三个条件才能增加删行
                        //1、编辑状态
                        //2、数据源允许删除
                        //3、当前行为不为空
                        self.biz.columnDeleteButtonClick(row);
                    },
                    onClearClick: function () {
                        var row = self.vm[tabName].getSelectedTabData();
                        //只有满足二个条件才能增加删行
                        //1、编辑状态
                        //2、数据源允许删除
                        if (self.biz.isEdit() &&
                            row.dataSrc.allowDel) {
                            Store.messager.confirm(Store.MSG.DELETEALL_CONFIRM, function (isOk) {
                                if (isOk) {
                                    row.dataSrc.deleteAll();
                                }
                            });
                        }
                    }
                }
            };
            self.register('tabs', tabName, tabsArgs);
            return Store.format(tpl, tabName);
        }
        return '';
    }

    /**
     * Widget-TabItem
     * @param ds
     * @returns {{title: *, content: string, closable: boolean, iconCls: string, dataSrc: *}}
     */
    Page.prototype.createTabItem = function (ds) {
        var self = this;
        var tabs = [];
        //生成标签
        var pageId = '9,1';
        var tabOpts = {
            title: '基本属性',
            content: '',
            closable: false,
            iconCls: 'icon-window',
            dataSrc: ds
        };
        var $divTabItem = self.divTabItem(self, ds, pageId);
        tabOpts.content = $divTabItem[0].outerHTML;
        tabs.push(tabOpts);

        //生成标签
        pageId = '9,2';
        tabOpts = {
            title: '显示属性',
            content: '',
            closable: false,
            iconCls: 'icon-window',
            dataSrc: ds
        };
        $divTabItem = self.divTabItem(self, ds, pageId);
        tabOpts.content = $divTabItem[0].outerHTML;
        tabs.push(tabOpts);

        //生成标签        
        pageId = '9,3';
        tabOpts = {
            title: '编辑属性',
            content: '',
            closable: false,
            iconCls: 'icon-window',
            dataSrc: ds
        };
        $divTabItem = self.divTabItem(self, ds, pageId);
        tabOpts.content = $divTabItem[0].outerHTML;
        tabs.push(tabOpts);

        //生成标签        
        pageId = '9,4';
        tabOpts = {
            title: '参照属性',
            content: '',
            closable: false,
            iconCls: 'icon-window',
            dataSrc: ds
        };
        $divTabItem = self.divTabItem(self, ds, pageId);
        tabOpts.content = $divTabItem[0].outerHTML;
        tabs.push(tabOpts);

        //生成标签        
        pageId = '';
        tabOpts = {
            title: '所有属性',
            content: '',
            closable: false,
            iconCls: 'icon-window',
            dataSrc: ds
        };
        $divTabItem = self.divTabItem(self, ds, pageId);
        tabOpts.content = $divTabItem[0].outerHTML;
        tabs.push(tabOpts);
        return tabs;
    }

    /**
     * [divTabItem description]
     * @return {[type]} self   [description]
     * @param  {[type]} ds     [数据源]
     * @param  {[type]} pageId [用来区分列应显示到哪个tab上]
     */
    Page.prototype.divTabItem = function (self, ds, pageId) {
        var $divTabItem = $('<div class="page-tabitem"></div>');
        var details = self.getViewDetails(ds);
        if (details.length > 0) {
            //分上中下三部分
            var $divHead = $('<div class="page-tabitem-half"></div>')
                .append(self.getDetailGrid(ds, pageId));
            var $divDetail = $('<div class="page-tabitem-half"></div>')
                .append('<div class="page-tabitem-sep"></div>')
                .append(self.createTab(ds));

            //组合到div
            $divTabItem.append($divHead);
            $divTabItem.append($divDetail);
        } else {
            var $headdiv = $('<div class="page-tabitem-full"></div>')
                .append(self.getDetailGrid(ds, pageId));
            $divTabItem.append($headdiv);
        }

        return $divTabItem;
    }

    /**
     * Widget-Detail-Grid
     * @param ds
     */
    Page.prototype.getDetailGrid = function (ds, pageId) {
        var gridName = 'grid_' + ds.name + (Math.ceil(Math.random() * 1000000)),
            self = this,
            tpl = '<div class="page-widget-grid" ms-widget="grid, $, {0}">加载中……</div>';
        //注册网格
        var gridArgs = {
            opts: {
                editable: false,
                pageId: pageId,
                enableAddRow: true,
                enablePager: false,
                showCheckColumn: ds.isShowSelCol,
                showDelColumn: true
            },
            data: ds,
            actions: {
                activeCellChanged: function (e, args) {
                    self.checkCurrent(args.grid, ds);
                },
                onColumndeleteButtonClick: function (row) {
                    //只有满足三个条件才能增加删行
                    //1、编辑状态
                    //2、数据源允许删除
                    //3、当前行为不为空
                    self.biz.columnDeleteButtonClick(row);
                }
            }
        }
        self.register('grid', gridName, gridArgs);

        ds.on('onCurrentChanged', self.loadDetailDetail);
        self.grids.push(gridName);
        return Store.format(tpl, gridName);
    };

    Page.prototype.loadDetailDetail = function (ds, args) {
        var relations = ds.getDetailRelations();
        for (var i = 0; relations.length > i; i++) {
            var r = relations[i];

            //如果旧行不为空，则保存数据
            if (args.oldRow) {
                args.oldRow[r.detail.name] = r.detail.snapData();
            }

            //如果新行不为空，检查是否有明细数据，有则填充，无则通过服务器获取
            //如果新行为空，则只清空明细
            if (args.newRow) {
                var rowData = args.newRow[r.detail.name];
                if (rowData) {
                    r.detail.resetData(rowData);
                    delete args.newRow[r.detail.name];
                    continue;
                } else {
                    r.detail.searchByMaster(ds.currentRow);
                }
            } else {
                r.detail.clear();
            }
        }
    };

    Page.prototype.getViewDetails = function (ds) {
        var details = ds.getDetails(),
            result = [];

        for (var i = 0, len = details.length; i < len; i++) {
            var d = details[i];
            if (d.isShow) {
                result.push(d);
            }
        }
        return result;
    };

    /***********调用Biz方法********************/

    /**
     * 更新业务类是否显示明细
     * @return
     */
    Page.prototype.bizShowDetail = function (value) {
        this.biz.setShowDetail(value);
    };

    Page.prototype.bizLoadDetails = function () {
        this.biz.loadDetails();
    }

    Page.prototype.bizUpdateCurrent = function () {
        this.biz.loadDetails();
    }

    /**
     * 界面按钮操作，无需业务处理
     * @param  {[type]} opCode [description]
     * @return {String}        是否执行过业务操作
     */
    Page.prototype.doOp = function (opCode) {
        var self = this;
        var isHandled = false;
        switch (opCode) {
            case 'detail':
                self.toDetail();
                self.bizLoadDetails();
                isHandled = true;
                break;
            case 'list':
                this.toList();
                isHandled = true;
                break;
            case 'refresh':
                if (this.isDetail()) {
                    this.bizUpdateCurrent();
                    isHandled = true;
                }
                break;
            case 'child':
                this.toggleShowChild();
                break;
            case 'view':
                if (self.isDetail()) {
                    this.toList();
                    isHandled = true;
                } else {
                    self.toDetail();
                    self.bizLoadDetails();
                    isHandled = true;
                }
                break;
        }
        return isHandled;
    };

    /**
     * 检查当前行是否改变，如果改变则通知业务类和更新当前行
     * @param  {[type]} grid    [description]
     * @param  {[type]} dataSrc [description]
     * @return {[type]}         [description]
     */
    Page.prototype.checkCurrent = function (grid, dataSrc) {
        var cell = grid.getActiveCell();
        if (cell) {
            var dataRow = grid.getDataItem(cell.row);
            if (dataRow !== dataSrc.currentRow) {
                var oldRow = dataSrc.currentRow;
                dataSrc.setCurrentRow(dataRow);

            }
        } else {
            if (dataSrc.currentRow !== null) {
                dataSrc.setCurrentRow(null);
            }
        }
    };

    Page.prototype.setLayoutState = function (newState) {
        var self = this;
        this.pageState = newState;
        self.opts.showDetail = newState === PAGE_STATE[0];

        self.setShowChild(newState === PAGE_STATE[0]);
        self.updateOpEnable(false);
        self.resize();
    };

    Page.prototype.setShowChild = function (value) {
        var self = this;
        self.showChild = value && self.hasChild;
        //兼容问题，Biz使用showDetail表示是否显示明细
        self.bizShowDetail(value);
    };

    /**
     * 切换到查询列表页，,只有按钮才会使用
     * @return {[type]} [description]
     */
    Page.prototype.toList = function () {
        this.setLayoutState(PAGE_STATE[1]);
    };

    /**
     * 切换到详情页-编辑界面
     * @return {[type]} [description]
     */
    Page.prototype.toDetail = function () {
        this.setLayoutState(PAGE_STATE[0]);
    };

    Page.prototype.hideBodyPanel = function (region) {
        var $body = this.getElement('.edp-page .page-body')
        if ($body.length === 0) {
            return
        }
        
        let  $region = $body.layout('panel', region);
        if ($region) {
            $region.panel('close');
        }
    }

    Page.prototype.showBodyPanel = function (region) {
        var $body = this.getElement('.edp-page .page-body')
        if ($body.length === 0) {
            return
        }
        
        let $region = $body.layout('panel', region);
        if ($region) {
            $region.panel('open');
        }

    }

    Page.prototype.resize = function () {
        var self = this,
            $body = self.getElement('.edp-page .page-body');
        if (self.pageState == PAGE_STATE[1]) {
            self.showBodyPanel('north');
            self.showBodyPanel('west');
            //$body.layout('resize');//重新計算Layout大小

            var h1 = self.getElement('.query-panel-wrapper').height();
            h1 += 10
            h1 = h1 > 200 ? 200 : h1;
            self.getElement('.edp-page .page-body-north').panel('resize', {
                height: h1
            });
            if (h1 === 200) {
                $('.edp-page .page-body-north').css('overflow', 'auto');
            } else {
                $('.edp-page .page-body-north').css('overflow', 'hidden');
            }
            if (self.showChild) {
                self.showBodyPanel('south');
                var h = $body.height();
                var h2 = h - h1;
                self.getElement('.edp-page .page-body-south ').panel('resize', {
                    height: h2 / 2
                });
            } else {
                self.hideBodyPanel('south');
            }


            self.vm.toolbar_main.setText('view', Store.MSG.VIEW);
            self.vm.toolbar_main.invoke('setIcon', 'view', 'icon-view');
        }

        if (self.pageState == PAGE_STATE[0]) {
            self.hideBodyPanel('north');
            self.hideBodyPanel('west');

            if (self.showChild) {
                $body.layout('resize');//重新計算Layout大小
                var h1 = self.getElement('.edp-page .page-body-center .filed-group').height();
                var h2 = self.getElement('.edp-page .page-body-center .edp-page-middle-section').height();
                var h = $body.height();
                if (!h2) {
                    if (h < h1) {
                        h1 = h / 2;
                    } else {
                        h1 = h1 > 200 ? 200 : h1;
                    }
                } else {
                    h1 += h2 + 5;
                }
                self.showBodyPanel('south');
                self.getElement('.edp-page .page-body-south').panel('resize', {
                    height: h - h1
                });
            } else {
                self.hideBodyPanel('south');
            }




            self.vm.toolbar_main.setText('view', Store.MSG.BACK);
            self.vm.toolbar_main.invoke('setIcon', 'view', 'icon-undo');
        }

        $body.layout('resize');
        self.updateGrids();
    };

    Page.prototype.updateGrids = function () {
        this.resizeGrid();
    };

    Page.prototype.toggleShowChild = function () {
        var self = this;
        self.setShowChild(!self.showChild);

        if (self.showChild) {
            this.bizLoadDetails();
        } 
        self.resize();
    };

    /****************业务类使用方法******************/
    /**
     * 是否在列表页
     * @return {Boolean} [description]
     */
    Page.prototype.isList = function () {
        return this.pageState === PAGE_STATE[1];
    };

    /**
     * 是否在详情页
     * @return {Boolean} [description]
     */
    Page.prototype.isDetail = function () {
        return this.pageState === PAGE_STATE[0];
    };


    /**
     *  控制按钮可用
     * @param {[type]} opCode [description]
     */
    Page.prototype.setButtonEnable = function (opCode) {
        this.vm.toolbar_main.setEnable(opCode);
    };

    /**
     * 控制按钮不可用
     * @param {[type]} opCode [description]
     */
    Page.prototype.setButtonDisabled = function (opCode) {
        this.vm.toolbar_main.setDisabled(opCode);
    };

    /**
     * 更新按钮状态
     * @param  {Boolean} isRecord 是否行处理
     * @return {[type]}           [description]
     */
    Page.prototype.updateOpEnable = function (isRecord) {
        this.vm.toolbar_main.update(isRecord);
    };

    Page.prototype.setEditLimit = function (dataSrc, col, editable) {
        var adapter = this.vm['ep_' + dataSrc.name];
        if (adapter) {
            adapter.setEditorEditable(col.isDataColumn ? col.fieldName : col, editable);
        }
    };

    Page.prototype.selectTab = function (dataSrc, index) {
        var adapter = this.vm['tab_' + dataSrc.name];
        if (adapter) {
            adapter.select(index);
        }
    };

    Page.prototype.setOptions = function (dataSrc, opts) {
        var adapter = this.vm['grid_' + dataSrc.name];
        if (adapter) {
            adapter.setOptions(opts);
        }
    }

    /**
     * 设置树的数据-Biz-API
     * @param data
     */
    Page.prototype.setTreeData = function (data) {
        var treeName = 'tree_' + this.biz.dsMaster.name;
        if (this.vm[treeName]) {
            this.vm[treeName].reset(data);
        }
    };

    return Page;


})