<template>
    <v-card
        tile
        flat
        :height="height"
        :width="width"
        :disabled="disabled || datatable.isDisabled"
    >
        <v-data-table
            :id="datatable.id"
            :dense="dense"
            disable-filtering
            disable-pagination
            :fixed-header="fixedHeader"
            hide-default-footer
            hide-default-header
            multi-sort
            :headers="datatable.headers"
            :items="datatable.dataprovider.items"
            :height="height"
            :mobile-breakpoint="0"
            class="cs-datatable"
        >
            <template #header="{props}">
                <cs-datatable-header
                    :headers="props.headers"
                    :sort="datatable.dataprovider.sorter.data"
                    
                    @click:sortcolumn="datatable.dataprovider.UpdateSort($event)"
                />
            </template>

            <template #item="props">
                <cs-datatable-row
                    :datatable="datatable"
                    :row="props"

                    @click:row="datatable.OnClickRow($event)"
                    @dblclick:row="datatable.OnDblClickRow($event)"
                />
            </template>

            <template #progress>
                &nbsp;   
            </template>

            <template #loading>  
                &nbsp;            
            </template>

            <template #no-data>
                <v-alert
                    v-if="datatable.dataprovider.processing === true"
                    dense
                    outlined
                    type="warning"
                    class="text-left text-body-2 mt-2 p-2"
                >
                    {{ __('Se încarcă...') }}
                </v-alert>

                <v-alert
                    v-else-if="datatable.dataprovider.request_count > 0"
                    dense
                    outlined
                    type="info"
                    class="text-left text-body-2 mt-2 p-2"
                >
                    {{ __(datatable.texts[datatable.dataprovider.initialRecordsCount == 0 ? 'noData' : 'noFilteredData']) }}
                </v-alert>

                <span v-else>&nbsp;</span>

            </template>

        </v-data-table>
        
    </v-card>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';
    import JQApply from '@Cs/jquery/Apply';

    export default {

        props: {
            datatable: {required: true},

            width: {default: null},
            height: {default: null},

            dense: {default: true},

            fixedHeader: {default: true},

            disabled: {default: false},
        },

        computed: {
            showdItemsCount() {
                return this.datatable.dataprovider.items.length;
            }
        },

        methods: {
            
            MountOnScroll() {

                if( _.isFunction(this.datatable.OnScroll) )
                {
                    JQApply(this.datatable.id, [
                        j => {
                            let el = this.$el.children[0].children[0];
                            el.addEventListener('scroll', this.OnScroll,  {passive: false} )
                        }
                    ])
                }
            },

            OnScroll(e) {
                this.datatable.OnScroll(e)
            },
        },

        mounted() {
            this.MountOnScroll();
        },

        created() {
            this.datatable.id = 'datatable-' + RandomString(64);
        },

        components: {
            CsDatatableHeader: require('./header/CsDatatableHeader').default,
            CsDatatableRow: require('./row/CsDatatableRow').default,
        },

        name: 'CsDatatable',        
    }
</script>