var App = function () {
    this.data = {};
    this.selectedRow = [];
    this.EditLineWidth = new EditLineWidth(this);
    this.EditLineColor = new EditLineColor(this);
    this.EditLocateIcon = new EditLocateIcon(this);

    this.Startup = function () {
        $('#manage').addClass('active');

        this.RedirectPage();
        this.ReLayout();
        this.InitDataGrid();
        this.ReLoadTableData();

        this.EditLineWidth.Setup();
        this.EditLineColor.Setup();
        this.EditLocateIcon.Setup();

        $('#edit-btn').on('click', this.onEditButtonClick.bind(this));

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

    this.RedirectPage = function () {
        var user = document.getElementById('user-info');
        if (user.getAttribute('class') === 'user-login')
            window.location.href = '/User/Login';
        else
            return;
    };

    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.formatLastColumn();
    };

    this.RedirectPage = function () {
        var user = document.getElementById('user-info');
        if (user.getAttribute('class') === 'user-login')
            window.location.href = '/User/Login';
        else
            return;
    };

    this.InitDataGrid = function () {
        $('#task-grid').datagrid({
            columns: [[
                { field: 'Name', title: '名称', align: 'left', width: 120 },
                { field: 'Value', title: '值', align: 'left', width: 150 },
                { field: 'Unit', title: '单位', align: 'center', width: 100, formatter: this.formatUnit.bind(this) },
                { field: 'Description', title: '描述', align: 'left', width: 200, formatter: this.formatDescription.bind(this) },
                { field: 'Null', title: '', align: 'left' }
            ]],
            striped: true,
            singleSelect: false,
            fit: true,
            scrollbarSize: 0,
            onSelect: this.OnTaskSelected.bind(this),
            onUnselect: this.OnTaskUnselected.bind(this),
            onLoadSuccess: function (data) {
                if (data.total === 0) {
                    var body = $(this).data().datagrid.dc.body2;
                    body.addClass('null-data-body');
                    body.append('<div class="null-data"><span></span><p>暂无数据</p></div>');
                }

                this.formatLastColumn();
            }.bind(this)
        });
    };

    this.formatLastColumn = function () {
        var width = $('.container').width();
        var headerTable = $('.datagrid-header');
        var bodyTable = $('.datagrid-body');
        var headerTd = headerTable.find('td:last');
        headerTd.css('width', (width - 572) + 'px');
        bodyTable.find('tr').find('td:last').css('width', (width - 572) + 'px');
    };

    this.ReLoadTableData = function () {
        $.ajax({
            type: "POST",
            dataType: 'text',
            url: '/ConfigManagement/Query',
            data: {
                page: 1,
                rows: 1000
            },
            success: function (result) {
                var value = JSON.parse(result);
                this.data['total'] = value.length;
                this.data['rows'] = value;
                $('#task-grid').datagrid('loadData', this.data);
            }.bind(this)
        });
    };

    this.formatUnit = function (value) {
        return value === "像素" ? value : '-';
    };

    this.formatDescription = function (value) {
        return '<span>{0}</span>'.format(value);
    };

    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);
    };

    this.OnTaskUnselected = function (index, row) {
        this.DisabledEvent();
    };

    this.DisabledEvent = function () {
        $('#edit-btn').prop('disabled', true);
    };

    this.onEditButtonClick = function () {
        if (this.selectedRow.Id === 'line-width')
            this.EditLineWidth.Show(this.selectedRow);
        else if (this.selectedRow.Id === 'line-color')
            this.EditLineColor.Show(this.selectedRow);
        else if (this.selectedRow.Id === 'marker-icon')
            this.EditLocateIcon.Show(this.selectedRow);

    };
};

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