<template>
    <v-sheet
        width="100%"
        class="d-flex align-center clickable py-1 transparent"
        :class="{
            'orange lighten-4 rounded': isActive
        }"
        @click="OnClickChild"
        @contextmenu="OnRightClick"
    >
        <v-sheet 
            :width="nameWidth" 
            class="transparent"
        >
            <span class="px-1">{{ child.name }} - <span class="font-weight-bold">{{ child.slug }}</span></span>
        </v-sheet>

    </v-sheet>
</template>

<script>

    export default {
        props: {
            app: {required: true},
            child: {required: true}
        },

        computed: {
            nameWidth() {
                return '100%';
            },

            controller() {
                return this.app.classes.Controller;
            },

            activeChild() {
                return this.app.classes.Controller.activeChild;
            },

            isActive() {
                return this.activeChild && (this.activeChild.id == this.child.id)
            },
        },

        methods: {
            

            OnRightClick(e) {
                e.preventDefault();
                e.stopPropagation();
                
                this.controller.SetActiveChild(this.child);

                this.app.menus.Childrightmenu.Show(
                    this.$parent,
                    {
                        x: e.clientX, 
                        y: e.clientY
                    }, 
                    [
                        // this.app.menus.Folderrightmenu,
                        // this.app.menus.Childform,
                    ],
                );
            },

            OnClickChild() {
                this.controller.SetActiveChild(this.child);
            }
        },

        name: 'PermissionChildrenItem',
    }
</script>