/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://www.extjs.com/license
 *
 * @author Lingo
 * @since 2007-09-21
 * http://code.google.com/p/anewssystem/
 */
Ext.onReady(function(){

    // 開啟提示功能
    Ext.QuickTips.init();

    // 使用cookies保持狀態(tài)
    // TODO: 完全照抄，作用不明
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // 布局管理器
    var layout = new Ext.BorderLayout(document.body, {
        center: {
            autoScroll     : true,
            titlebar       : false,
            tabPosition    : 'top',
            closeOnTab     : true,
            alwaysShowTabs : true,
            resizeTabs     : true,
            fillToFrame    : true
        }
    });

    // 設(shè)置布局
    layout.beginUpdate();
        layout.add('center', new Ext.ContentPanel('tab1', {
            title      : '角色管理',
            toolbar    : null,
            closable   : false,
            fitToFrame : true
        }));
        layout.add('center', new Ext.ContentPanel('tab2', {
            title: "幫助",
            toolbar: null,
            closable: false,
            fitToFrame: true
        }));
        layout.restoreState();
    layout.endUpdate();
    layout.getRegion("center").showPanel("tab1");

    // 默認(rèn)需要id, name, theSort, parent, children
    // 其他隨意定制
    var metaData = [
        {id : 'id',    qtip : "ID",       vType : "integer", allowBlank : true,  defValue : -1, w:260},
        {id : 'name',  qtip : "角色名稱", vType : "chn",     allowBlank : false, w:260},
        {id : 'descn', qtip : "描述",     vType : "chn",     allowBlank : true, w:260}
    ];

    // 創(chuàng)建表格
    var lightGrid = new Ext.lingo.JsonGrid("lightgrid", {
        metaData      : metaData,
        dialogContent : "content"
    });

    // 渲染表格
    lightGrid.render();

    // ========================================================================
    // ========================================================================
    // 在工具欄上添加選擇資源的按鈕
    lightGrid.toolbar.insertButton(3, {
        icon    : "../widgets/lingo/list-items.gif",
        id      : 'selectResource',
        text    : '配置資源',
        cls     : 'add',
        tooltip : '配置資源',
        handler : selectResource
    });
    // 在工具欄上添加選擇菜單的按鈕
    lightGrid.toolbar.insertButton(4, {
        icon    : "../widgets/lingo/list-items.gif",
        id      : 'selectMenu',
        text    : '配置菜單',
        cls     : 'add',
        tooltip : '配置菜單',
        handler : selectMenu
    });


    // ========================================================================
    // ========================================================================
    // 渲染表格的方法
    function renderResource(value, p, record) {
        if(record.data['authorized'] == true) {
            return String.format("<b><font color=green>已分配</font></b>");
        } else {
            return String.format("<b><font color=red>未分配</font></b>");
        }
    }
    function renderNamePlain(value) {
        return String.format('{0}', value);
    }
    // 建一個資源數(shù)據(jù)映射數(shù)組
    var resourceRecord = Ext.data.Record.create([
        {name: "id",         mapping: "id",         type: "int"},
        {name: "resType",    mapping: "resType",    type: "string"},
        {name: "name",       mapping: "name",       type: "string"},
        {name: "resString",  mapping: "resString",  type: "string"},
        {name: "descn",      mapping: "descn",      type: "string"},
        {name: "authorized", mapping: "authorized", type: "boolean"}
    ]);
    // 配置資源
    var resStore = new Ext.data.Store({
        proxy      : new Ext.data.HttpProxy({url:'getResources.htm'}),
        reader     : new Ext.data.JsonReader({},resourceRecord),
        remoteSort : false
    });
    var resColumnModel = new Ext.grid.ColumnModel([{
        // 設(shè)置了id值，我們就可以應(yīng)用自定義樣式 (比如 .x-grid-col-topic b { color:#333 })
        id        : 'id',
        header    : "編號",
        dataIndex : "id",
        width     : 80,
        sortable  : true,
        renderer  : renderNamePlain,
        css       : 'white-space:normal;'
    }, {
        id        : 'name',
        header    : "資源名稱",
        dataIndex : "name",
        sortable  : true,
        width     : 150 ,
        css       : 'white-space:normal;'
    }, {
        id        : 'resType',
        header    : "資源類型",
        dataIndex : "resType",
        sortable  : true,
        width     : 80
    }, {
        id        : 'resString',
        header    : "資源地址",
        dataIndex : "resString",
        sortable  : true,
        width     : 150
    }, {
        id        : 'descn',
        header    : "資源描述",
        dataIndex : "descn",
        sortable  : true,
        width     : 80
    }, {
        id        : 'authorized',
        header    : "是否授權(quán)",
        dataIndex : "authorized",
        sortable  : true,
        width     : 80,
        renderer  : renderResource
    }]);
    var resourceGrid = new Ext.grid.EditorGrid('resource-grid', {
        ds            : resStore,
        cm            : resColumnModel,
        selModel      : new Ext.grid.RowSelectionModel({singleSelect:false}),
        enableColLock : false,
        loadMask      : false
    });
    // 渲染表格
    resourceGrid.render();
    var resourceFooter = resourceGrid.getView().getFooterPanel(true);
    var resourcePaging = new Ext.PagingToolbar(resourceFooter, resStore, {
        pageSize    : 10,
        displayInfo : true,
        displayMsg  : '顯示: {0} - {1} 共 {2}',
        emptyMsg    : "沒有找到相關(guān)數(shù)據(jù)"
    });
    resourcePaging.add('-', {
        pressed       : true,
        enableToggle  : true,
        text          : '授權(quán)',
        cls           : '',
        toggleHandler : resourceAuth
    }, '-', {
        pressed      : true,
        enableToggle : true,
        text         : '取消',
        cls          : '',
        toggleHandler: resourceCancel
    });

    function resourceAuth() {
        resourceAuthDo(true);
    }

    function resourceCancel() {
        resourceAuthDo(false);
    }

    function resourceAuthDo(isAuth) {
        //授權(quán)事件
        var mRole = lightGrid.grid.getSelections();
        var mResc = resourceGrid.getSelections();
        if(mResc.length <= 0) {
            Ext.MessageBox.alert('提示', '請選擇至少一行紀(jì)錄進(jìn)行操作！');
            return;
        } else {
            var ids = new Array();
            for (var i = 0; i < mResc.length; i++) {
                var rescId = mResc[i].get('id');
                ids[ids.length] = rescId;
            }
            var roleId = mRole[0].get('id');
            Ext.lib.Ajax.request(
                'POST',
                'auth.htm',
                {success:end,failure:end},
                'ids=' + ids.join(",") + "&roleId=" + roleId + "&isAuth=" + isAuth
            );
        }

        resStore.reload();
    }

    function end() {
        Ext.Msg.alert("提示", "操作成功");
        resStore.reload();
    }

    // 選擇資源
    function selectResource() {
        var m = lightGrid.grid.getSelections();
        if(m.length <= 0) {
            Ext.MessageBox.alert('提示', '請選擇需要配置的角色！');
            return;
        }
        // 讀取數(shù)據(jù)需要的參數(shù)
        resStore.on('beforeload', function() {
            resStore.baseParams = {
                roleId : lightGrid.grid.getSelections()[0].get('id')
            };
        });
        resStore.load({params:{
            start  : 0,
            limit  : 10
        }});
        var resourceDialog = Ext.lingo.FormUtils.createLayoutDialog("resource-dlg");
        var layout = resourceDialog.getLayout();
        layout.beginUpdate();
            layout.add('center', new Ext.ContentPanel('resource-inner', {title: '角色授權(quán)'}));
        layout.endUpdate();
        resourceDialog.show(Ext.get("selectResource"));
    }

    // 選擇菜單成功
    function solveMenuResponse() {
        Ext.Msg.alert("提示", "操作成功");
        this.menuTree.root.reload();
        this.menuTree.root.expand(true, false);
    }

    var configMenuDialog;

    // 選擇菜單
    function selectMenu() {
        var m = lightGrid.grid.getSelections();
        if(m.length <= 0) {
            Ext.MessageBox.alert('提示', '請選擇需要配置的角色！');
            return;
        }
        this.currentRoleId = m[0].id;
        //Ext.lingo.FormUtils.createDialogContent({id:'menuDialog',title:'選擇菜單'});
        //var configMenuDialog = Ext.lingo.FormUtils.createDialog({id:'menuDialog' + "-dialog-content"});

        if (!configMenuDialog) {
            var id = 'menuDialog' + Ext.id();
            configMenuDialog = Ext.lingo.FormUtils.createTabedDialog(id, ['選擇菜單','幫助']);

            this.yesBtn = configMenuDialog.addButton("確定", function() {
                // 如果不全部展開，那么未展開的部分，無法取得數(shù)據(jù)。
                //this.menuTree.root.expand(true, false);
                Ext.lib.Ajax.request(
                    'POST',
                    'selectMenu.htm',
                    {success:solveMenuResponse.createDelegate(this),failure:solveMenuResponse.createDelegate(this)},
                    'ids=' + this.menuTree.getChecked().join(",") + "&roleId=" + lightGrid.grid.getSelections()[0].id
                );
            }.createDelegate(this), configMenuDialog);
            this.tabs = configMenuDialog.getTabs();

            this.tabs.getTab(0).on("activate", function() {
                this.yesBtn.show();
            }, this, true);
            this.tabs.getTab(1).on("activate", function() {
                this.yesBtn.hide();
            }, this, true);

            var treeId = 'menuTree' + Ext.id();
            this.tabs.getTab(0).setContent("<div id='" + treeId + "'></div>");
            //this.tabs.getTab(0).setContent(Ext.get("tree-div").dom.innerHTML);

            this.menuTree = new Ext.tree.TreePanel(treeId, {
                rootVisible : true,
                animate     : true,
                loader      : new Ext.tree.CustomUITreeLoader({
                    dataUrl  : 'getMenuByRole.htm',
                    baseAttr : {
                        uiProvider : Ext.tree.CheckboxNodeUI
                    }
                }),
                enableDD        : false,
                containerScroll : true,
                rootUIProvider  : Ext.tree.CheckboxNodeUI,
                selModel        : new Ext.tree.CheckNodeMultiSelectionModel(),
                rootVisible     : false
            });
            this.menuTree.getLoader().baseParams = {id: this.currentRoleId};

            //var dialogContent = Ext.get(this.config.dialogContent + "-content");
            //this.tabs.getTab(0).setContent(dialogContent.dom.innerHTML);
            //this.applyElements();
            this.noBtn = configMenuDialog.addButton("取消", configMenuDialog.hide, configMenuDialog);
            // 設(shè)置根節(jié)點(diǎn)
            this.treeRoot = new Ext.tree.AsyncTreeNode({
                text       : '選擇菜單',
                draggable  : false,
                id         : '0',
                uiProvider : Ext.tree.CheckboxNodeUI
            });
            this.menuTree.setRootNode(this.treeRoot);
            // 渲染樹
            this.menuTree.render();
        }

        this.menuTree.getLoader().baseParams = {id: this.currentRoleId};
        this.treeRoot.reload();
        this.treeRoot.expand(true, false);

        configMenuDialog.show(Ext.get("selectMenu"));
    }

});