<template>
    <v-card tile flat>
        <v-treeview
            dense
            selectable
            :items="permissions"
            :selected-color="selectedcolor"
            ref="PermisionsTree"

            v-model="selected"
        >
            <template #label="{ item }">
                <span class="text-caption">
                    {{  __(item.description) || __(item.name) }}
                </span>

                <span v-if="$env == 'local'" class="red--text text-caption">
                    ({{ item.order_no }})
                </span>
            </template>
        </v-treeview>
    </v-card>
</template>

<script>

    const PermissionsToArray = require('./../Helpers/PermissionsToArray');
    const ArrayToPermissions = require('./../Helpers/ArrayToPermissions');

    export default {
        props: {
            /**
             * Toate permisiunile definite in sistem
             */
            permissions: {required: true},

            /**
             * Permisiunile setate
             */
            values:  {default: () => []},

            selectedcolor: {default: null},
        },
        
        computed: {
            selected: {
                get: function() {
                    return PermissionsToArray(this.permissions, this.values);
                },

                set: function(ids) {
                    this.$emit('input', ArrayToPermissions(this.permissions, ids));
                }
            }
        },

        name: 'CsPermissionsTree',
    }
</script>