Demo.CanvasTable = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-face"
    },

    render: function () {
        var self = this;
        return {
            type: "bi.absolute",
            items: [{
                el: {
                    type: "bi.sequence_table",
                    ref: function () {
                        self.table = this;
                    },
                    isNeedFreeze: null,
                    isNeedMerge: false,
                    summaryCellStyleGetter: function (isLast) {
                        return {
                            background: "rgb(4, 177, 194)",
                            color: "#ffffff",
                            fontWeight: "bold"
                        };
                    },
                    sequenceCellStyleGetter: function (index) {
                        return {
                            background: "rgb(4, 177, 194)",
                            color: "#ffffff",
                            fontWeight: "bold"
                        };
                    },
                    headerCellStyleGetter: function () {
                        return {
                            background: "rgb(4, 177, 194)",
                            color: "#ffffff",
                            fontWeight: "bold"
                        };
                    },
                    el: {
                        type: "bi.adaptive_table",
                        el: {
                            type: "bi.resizable_table",
                            el: {
                                type: "bi.canvas_table"
                            }
                        }
                    },
                    sequence: {
                        type: "bi.sequence_table_list_number",
                        pageSize: 100,
                        sequenceHeaderCreator: {
                            type: "bi.normal_sequence_header_cell",
                            styleGetter: function () {
                                return {
                                    background: "rgb(4, 177, 194)",
                                    color: "#ffffff",
                                    fontWeight: "bold"
                                };
                            }
                        }
                    },
                    itemsCreator: function (op, populate) {
                    }
                },
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }]
        };
    },

    mounted: function () {
        var self = this;
        var tableItems = this._expandData(TABLE_ITEMS, 3),
            headItems = this._expandHeadData(TABLE_HEADER, 3);
        this._resizeHandler = BI.debounce(function () {
            var width = self.element.width(), height = self.element.height();
            if (self.table.getWidth() !== width || self.table.getHeight() !== height) {
                self.table.setWidth(width);
                self.table.setHeight(height);
                self.table.populate();
            }
        }, 0);
        BI.ResizeDetector.addResizeListener(this, function () {
            self._resizeHandler();
        });
        this.table.setWidth(this.element.width());
        this.table.setHeight(this.element.height());
        this.table.attr("columnSize", BI.makeArray(headItems[0].length, ""));
        this.table.attr("minColumnSize", BI.makeArray(headItems[0].length, 60));
        this.table.attr("isNeedFreeze", true);
        this.table.attr("freezeCols", []);
        this.table.attr("showSequence", true);
        this.table.attr("headerRowSize", 15);
        this.table.attr("rowSize", 15);
        this.table.populate(tableItems, headItems);
    },

    _expandData: function (items, times) {
        var copy = BI.deepClone(items);
        for (var m = 0; m < times - 1; m++) {
            BI.each(items, function (i, row) {
                copy.push(row);
            });
        }
        
        for (var n = 0; n < copy.length; n++) {
            for (var m = 0; m < times - 1; m++) {
                BI.each(items[n % 100], function (j, item) {
                    copy[n].push(item);
                })
            }
        }
        return copy;
    },

    _expandHeadData: function (items, times) {
        var copy = BI.deepClone(items);
        for (var n = 0; n < copy.length; n++) {
            for (var m = 0; m < times - 1; m++) {
                BI.each(items[n], function (j, item) {
                    copy[n].push(item);
                })
            }
        }
        return copy;
    }
});

BI.shortcut("demo.canvas_table", Demo.CanvasTable);