<template>
    <div :class="[
        table && table.layout.scrollX ? `is-scrolling-${table.scrollPosition}` : 'is-scrolling-none',
        table && table.tableSize ? `el-table-footer--${table.tableSize}` : '',
        {
            'el-table-footer-wrapper--border': table && table.border
        }]"
         class="el-table-footer-wrapper">
        <div v-if="fixedColumns.length > 0"
             :style="{
                 width: fixedWidth
             }"
             class="el-table-footer-wrapper__fixed-left">
            <table-footer ref="fixedLeftFooter"
                          :extend="config"
                          :data="data"
                          fixed="left" />
        </div>
        <div ref="footerWrapper"
             class="el-table-footer">
            <table-footer ref="footer"
                          :extend="config"
                          :data="data" />
        </div>
        <div v-if="rightFixedColumns.length > 0"
             :style="{
                 width: rightFixedWidth,
                 right: table && 
                     table.layout.scrollY ? 
                         (table.border ? 
                             table.layout.gutterWidth : 
                             (table.layout.gutterWidth || 0)) + 'px' : 0
             }"
             class="el-table-footer-wrapper__fixed-right">
            <table-footer ref="fixedRightFooter"
                          :data="data"
                          :extend="config"

                          fixed="right" />
        </div>
    </div>
</template>

<script>
import TableFooter from './table-footer';

export default {
    name: 'BkTableFooter',
    components: {
        TableFooter
    },
    props: {
        config: {
            type: Object,
            default: () => ({})
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            table: null
        };
    },
    computed: {
        fixedWidth() {
            return this.table ? `${this.table.layout.fixedWidth}px` : '';
        },
        rightFixedWidth() {
            return this.table ? `${this.table.layout.rightFixedWidth}px` : '';
        },
        fixedColumns() {
            return this.table ? this.table.store.states.fixedColumns : [];
        },
        rightFixedColumns() {
            return this.table ? this.table.store.states.rightFixedColumns : [];
        }
    },
    methods: {
        init(tableInstance) {
            const self = this;
            this.table = tableInstance;

            this.table.$refs.bodyWrapper.addEventListener('scroll', function () {
                if (self.$refs.footerWrapper)self.$refs.footerWrapper.scrollLeft = this.scrollLeft;
            });

            this.$nextTick(() => {
                const { fixedLeftFooter, footer, fixedRightFooter } = this.$refs;

                if (fixedLeftFooter) fixedLeftFooter.init();
                footer.init();
                if (fixedRightFooter) fixedRightFooter.init();
            });
        }
    }
};
</script>
