var App = function () {

    this.data = {
        "total": 20,
        "rows": [{ Id: 1, Name: '线条宽度', Value: "2", Unit: '像素' },
            { Id: 2, Name: '线条颜色', Value: "#ff0000", Unit: '-' },
            { Id: 3, Name: '定位图标', Value: "", Unit: '-' }]
    };
    this.selectedRow = [];
    this.EditLineWidth = new EditLineWidth(this);
    this.EditLineColor = new EditLineColor(this);
    this.EditLocateIcon = new EditLocateIcon(this);

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

        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.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: 'Name', title: '名称', align: 'center', width: 10, formatter: this.formatIcon.bind(this) },
                { field: 'Value', title: '值', align: 'center', width: 10, formatter: this.formatIcon.bind(this) },
                { field: 'Unit', title: '单位', align: 'left', width: 70, formatter: this.formatIcon.bind(this) }
            ]],
            striped: true,
            singleSelect: false,
            fitColumns: true,
            fit: true,
            scrollbarSize: 0,
            onSelect: this.OnTaskSelected.bind(this),
            onUnselect: this.OnTaskUnselected.bind(this)
        });
    };

    this.ReLoadTableData = function () {
        $.ajax({
            type: "POST",
            dataType: 'text',
            url: '/ConfigManagement/Query',
            data: {
                pageIndex: 1,
                pageSize: 100
            },
            success: function (result) {
                console.log(result)
                $('#task-grid').datagrid('loadData', JSON.parse(result));
            }.bind(this)
        });
    };

    this.formatIcon = function (value) {
        return value === "" ? '<img src="../Content/images/locate.png" />' : 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) {
        $('#edit-btn').prop('disabled', true);
    };

    this.onEditButtonClick = function () {
        if (this.selectedRow.Name === '线条宽度')
            this.EditLineWidth.Show(this.selectedRow);
        else if (this.selectedRow.Name === '线条颜色')
            this.EditLineColor.Show(this.selectedRow);
        else if (this.selectedRow.Name === '定位图标')
            this.EditLocateIcon.Show(this.selectedRow);

    };
};

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