import '../../../src/components/VDataTable/VVirtualTable.sass';
import { convertToUnit, debounce } from '../../util/helpers';
import VSimpleTable from './VSimpleTable';
import mixins from '../../util/mixins';
export default mixins(VSimpleTable
/* @vue/component */
).extend({
    name: 'v-virtual-table',
    props: {
        chunkSize: {
            type: Number,
            default: 25
        },
        headerHeight: {
            type: Number,
            default: 48
        },
        itemsLength: Number,
        rowHeight: {
            type: Number,
            default: 48
        }
    },
    data: function data() {
        return {
            scrollTop: 0,
            oldChunk: 0,
            scrollDebounce: null
        };
    },
    computed: {
        totalHeight: function totalHeight() {
            return this.itemsLength * this.rowHeight + this.headerHeight;
        },
        topIndex: function topIndex() {
            return Math.floor(this.scrollTop / this.rowHeight);
        },
        chunkIndex: function chunkIndex() {
            return Math.floor(this.topIndex / this.chunkSize);
        },
        startIndex: function startIndex() {
            return Math.max(0, this.chunkIndex * this.chunkSize - this.chunkSize);
        },
        offsetTop: function offsetTop() {
            return Math.max(0, this.startIndex * this.rowHeight);
        },
        stopIndex: function stopIndex() {
            return Math.min(this.startIndex + this.chunkSize * 3, this.itemsLength);
        },
        offsetBottom: function offsetBottom() {
            return Math.max(0, (this.itemsLength - this.chunkSize) * this.rowHeight - this.offsetTop);
        }
    },
    watch: {
        chunkIndex: function chunkIndex(newValue, oldValue) {
            this.oldChunk = oldValue;
        }
    },
    created: function created() {
        this.cachedItems = null;
    },
    mounted: function mounted() {
        this.scrollDebounce = debounce(this.onScroll, 50);
        var table = this.$refs.table;
        table.addEventListener('scroll', this.scrollDebounce, { passive: true });
    },
    beforeDestroy: function beforeDestroy() {
        var table = this.$refs.table;
        table.removeEventListener('scroll', this.scrollDebounce);
    },

    methods: {
        createStyleHeight: function createStyleHeight(height) {
            return {
                height: height + 'px'
            };
        },
        genBody: function genBody() {
            if (this.cachedItems === null || this.chunkIndex !== this.oldChunk) {
                this.cachedItems = this.genItems();
                this.oldChunk = this.chunkIndex;
            }
            return this.$createElement('tbody', [this.$createElement('tr', { style: this.createStyleHeight(this.offsetTop) }), this.cachedItems, this.$createElement('tr', { style: this.createStyleHeight(this.offsetBottom) })]);
        },
        genItems: function genItems() {
            return this.$scopedSlots.items({ start: this.startIndex, stop: this.stopIndex });
        },
        onScroll: function onScroll(e) {
            var target = e.target;
            this.scrollTop = target.scrollTop;
        },
        genTable: function genTable() {
            return this.$createElement('div', {
                ref: 'table',
                staticClass: 'v-virtual-table__table'
            }, [this.$createElement('table', [this.$slots['body.before'], this.genBody(), this.$slots['body.after']])]);
        },
        genWrapper: function genWrapper() {
            return this.$createElement('div', {
                staticClass: 'v-virtual-table__wrapper',
                style: {
                    height: convertToUnit(this.height)
                }
            }, [this.genTable()]);
        }
    },
    render: function render(h) {
        return h('div', {
            staticClass: 'v-data-table v-virtual-table',
            class: this.classes
        }, [this.$slots.top, this.genWrapper(), this.$slots.bottom]);
    }
});
//# sourceMappingURL=VVirtualTable.js.map