<template>
    <v-card
        tile
        flat
        :height="height"
        :width="app.width"
        outlined
    >
        <cs-toolbar 
            :toolbar="uploader.filestoolbar"
        />
        
        <v-divider></v-divider>

        <cs-centered-alert 
            v-if="(dataprovider.request_count < 1) || dataprovider.processing"
            :height="height - 51"
            width="100%"
            message="Se încarcă ..."
        >
            <v-progress-circular
                indeterminate
                color="orange darken-1"
            >
            </v-progress-circular>
        </cs-centered-alert>

        <cs-centered-alert 
            v-else-if="dataprovider.files.length == 0"
            :height="height - 51"
            width="100%"
            message="Nu sunt fișiere de afișat"
        >
        </cs-centered-alert>

        <template v-else>
            <v-sheet
                :height="height - 51"
                class="overflow-y-auto"
            >
                <files-list 
                    :uploader="uploader"
                    :files="dataprovider.files"
                />
            </v-sheet>
        </template>
    </v-card>
</template>

<script>
    export default {
        props: {
            uploader: {required: true},
            height: {default: null},
        },

        computed: {
            app() {
                return this.uploader.app;
            },

            customer() {
                return this.uploader.customer;
            },

            dataprovider() {
                return this.app.dataSession.Files;
            }
        },

        created() {
            // alert('Folder side Created >>>> ');
            this.uploader.LoadAllFiles();
        },

        components: {
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'AllFilesPanel',
    }
</script>