<template>
    <v-card
        flat
        :disabled="disabled || (dataprovider && dataprovider.processing)"
        :loading="(dataprovider && dataprovider.processing)"
    >
        <div v-if="caption" class="font-weight-bold">
            {{ __(caption) }}
        </div>

        <v-sheet
            :height="height"
            :class="{
                'overflow-y-auto': !! height,
            }"
        >
            <v-treeview
                dense
                selectable
                open-all
                :disabled="disabled"
                selection-type="leaf"
                :items="rootfolder"
                ref="FoldersTree"
                v-model="selected"
            >
                <template #label="{item}">
                    <div class="" :class="{
                        'text-caption': true,
                        'font-weight-bold': item.id == -1,
                    }">
                        {{item.name}}
                    </div>
                </template>
            </v-treeview>
        </v-sheet>

    </v-card>
</template>

<script>
    import DataProvider from 'APPS/Dataproviders/Customer/Folders/Folders';

    export default {
        props: {
            value: {required: true},
            customer_id: {required: true},
            type: {required: true},
            disabled: {default: false},
            folders: {default: () => []},
            height: {default: 280},
            caption: {default: 'Setare acces la foldere'},
        },

        data: () => ({
            dataprovider: null,
        }),

        computed: {
            selected: {

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

                set: function(value) {
                    this.$emit('input', value);
                }
            },

            rootfolder() {
                if(this.customer_id)
                {
                    return [{
                        name: this.__('Selectați toate'),
                        id: -1,
                        children: this.dataprovider.items,
                    }];
                }
                return [{
                    name: this.__('Selectați toate'),
                    id: -1,
                    children: this.folders,
                }];
            }
        },

        methods: {
            OpenAllNodes() {
                let i = setInterval( () => {
                    if( ! this.dataprovider.processing )
                    {
                        clearInterval(i);
                        this.$refs.FoldersTree.updateAll(true);
                       
                    }
                }, 400)
            }
        },

        created() {
            if(this.customer_id)
            {
                this.dataprovider = new DataProvider(null);
                this.dataprovider.GetByCustomerIdAndType(this.customer_id, this.type);
                this.OpenAllNodes();
            }
        },

        name: 'FolderAccesControl',
    }
</script>