<template>
    <v-card
        tile
        flat
        :height="height"
        class="pa-2"
    >
        <draggable v-model="localItems">
            <folder-tree-item 
                v-for="(folder, index) in localItems"
                :key="'folder-' + index"
                :app="app"
                :uploader="uploader"
                :folder="folder"
            />
        </draggable>
    </v-card>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        props: {
            uploader: {required: true},
            height: {default: null},
            parentFolder: {required: true},
            folders: {required: true},
        },
        
        computed: {
            app() {
                return this.uploader.app;
            },

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

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

            localItems: {
                get: function() {
                    return this.folders;
                },

                set: function(items) {
                    this.dataprovider.Reorder(this.parentFolder, items);
                },
            },
        },

        components: {
            draggable
        },

        name: 'FoldersTree',
    }
</script>