<template>
    <v-treeview
        dense
        selectable
        open-all
        :items="[permission]"
        ref="PermissionTree"
        v-model="selected"
    >
        <template #label="{item}">
            <div class="text-caption">
                {{item.name}}
            </div>
        </template>
    </v-treeview>
</template>

<script>
    export default {
        props: {
            value: {required: true},
            app: {required: true},
            role: {required: true},
            permission: {required: true},
            allpermissions: {required: true},
        },

        computed: {
            selected: {

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

                set: function(selected) {
                    return this.$emit('input', this.SelectedToPermissions(selected));
                }
            },
        },

        methods: {
            PermissionsToSelected() {
                let selected = [];
                this.MakeSelectedIds(null, this.value, selected);
                return selected;
            },

            SelectedToPermissions(selected) {
                let tree = {};
                this.CreateEmptyTree([this.permission], tree);
                this.MakeTree(selected, tree);
                return tree;
            },

            MakeTree(selected, tree) {
                _.each(selected, id => {
                    let node = _.find(this.allpermissions, item => item.id == id);

                    
                    let parts = node.slug.split('#');
                    let last = parts[parts.length - 1];
                    let record = tree;
                    for(let i = 0; i < parts.length - 1; i++)
                    {
                        record = record[parts[i]];
                    }
                    this.$set(record, last, 1);
                })
            },

            CreateEmptyTree(permission, tree) {
                if(_.isArray(permission))
                {
                    _.each(permission, node => {
                        let parts = node.slug.split('#');
                        let slug = parts[parts.length - 1];
                        
                        if(node.children.length > 0)
                        {
                            
                            tree[slug] = {};
                            this.CreateEmptyTree(node.children, tree[slug])
                        }
                        else
                        {
                            tree[slug] = 0;
                        }
                    })
                }
            },

            MakeSelectedIds(key, tree, selected) {
                if( _.isObject(tree) )
                {
                    _.each(tree, (node, index) => {
                        this.MakeSelectedIds((key ? key + '#' : '') + index, node, selected)
                    })
                }
                else
                {
                    if( _.isNumber(tree) || _.isString(tree) )
                    {
                        if(1 * tree == 1)
                        {
                            let node = _.find(this.allpermissions, item => item.slug == key);

                            if(!! node)
                            {
                                selected.push(node.id);
                            }
                        }
                    }
                }
            }
        },

        name: 'PermissionsSettingTree',
    }
</script>