var App = function () {

    this.data = {
        "total": 20,
        "rows": [{ Id: 1, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 2, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 3, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 4, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 5, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 6, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 7, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 8, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 9, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 10, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 11, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 12, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 13, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 14, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 15, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 16, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 17, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 18, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 19, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 20, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 21, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 22, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 23, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 24, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 25, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 26, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 27, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 28, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 29, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 30, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 31, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 32, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 33, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 34, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 0 },
            { Id: 35, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 36, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 37, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 38, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 },
            { Id: 39, Name: '张三', OrgName: "机构", CreateTime: '2021/12/15 10:00:00', isEnable: 1 }]
    };
    this.selectedRow = [];
    this.AddDialog = new AddDialog(this);
    this.EditDialog = new EditDialog(this);

    this.Startup = function () {
        this.ReLayout();
        this.InitDataGrid();
        this.AddDialog.Setup();
        this.EditDialog.Setup();

        $('#manage').addClass('active');
        $('#add-btn').on('click', this.OnAddButtonClick.bind(this));
        $('#edit-btn').on('click', this.onEditButtonClick.bind(this));
        $('#delete-btn').on('click', this.onDeleteButtonClick.bind(this));
        $('#delete-dialog-close').on('click', this.CloseDeleteDialog.bind(this));
        $('#dialog-sure').on('click', this.CloseDeleteDialog.bind(this));
        $('#dialog-cancel').on('click', this.CloseDeleteDialog.bind(this));

        window.onresize = this.ReLayout.bind(this);
    };

    this.ReLayout = function () {
        var width = $(window).width();
        var height = $(window).height();

        $('.manage-table, .manage-table .datagrid').width(width - 247);
        $('.manage-table, .manage-table .datagrid').height(height - 109);
    };

    this.InitDataGrid = function () {
        $('#task-grid').datagrid({
            columns: [[
                { field: 'OrgName', title: '名称', align: 'center', width: 10 },
                { field: 'CreateTime', title: '创建时间', align: 'center', width: 15 },
                { field: 'isEnable', title: '启用', align: 'left', width: 70, formatter: this.formatText.bind(this) }
            ]],
            striped: true,
            singleSelect: false,
            fitColumns: true,
            fit: true,
            scrollbarSize: 0,
            pagination: true,
            onSelect: this.OnTaskSelected.bind(this),
            onUnselect: this.OnTaskUnselected.bind(this)
        });

        $('#task-grid').datagrid('loadData', this.data);
    };

    this.formatText = function (value) {
        return value === 1 ? '<span style="color: #00c541">已启用</span>' : '<span style="color: #f40000">已禁用</span>';
    };

    this.OnTaskSelected = function (index, row) {
        this.selectedRow = row;
        $('.datagrid-btable tr').removeClass('datagrid-row-selected');
        $('.datagrid-btable tr').eq(index).addClass('datagrid-row-selected');

        //set buttons disabled state
        $('#edit-btn').prop('disabled', row === null);
        $('#delete-btn').prop('disabled', row === null);
        $('#enable-btn').prop('disabled', row.isEnable !== 1 ? null : true);
        $('#disable-btn').prop('disabled', row.isEnable === 1 ? null : true);
    };

    this.OnTaskUnselected = function (index, row) {
        $('#edit-btn').prop('disabled', true);
        $('#delete-btn').prop('disabled', true);
        $('#enable-btn').prop('disabled', true);
        $('#disable-btn').prop('disabled', true);
    };

    this.OnAddButtonClick = function () {
        this.AddDialog.Show();
    };

    this.onEditButtonClick = function () {
        this.EditDialog.Show(this.selectedRow);
    };

    this.onDeleteButtonClick = function () {
        $('.dialog-delete').show();
        $('.dialog-clear h2').text('确定删除名为「{0}」的机构吗？'.format(this.selectedRow.OrgName));
    };

    this.CloseDeleteDialog = function () {
        $('.dialog-delete').hide();
    };
};

$(document).ready(function () {
    var app = new App();
    app.Startup();
});