<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <v-card tile flat :width="menu.width" :color="role.color">
            <v-card-title class="pa-1 white--text">
                {{ __('Permisiuni :name', {name: role.name} ) }}
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet class="white overflow-x-hidden" :height="menu.height" 
                :class="{
                    'overflow-y-auto': !! menu.height
                }"
            >
                <v-card-text class="pa-1">

                    <cs-permissions-tree 
                        :permissions="systempermissions"
                        :values="role.permissions"
                        :selectedcolor="role.color"
                        @input="OnInput"
                    />

                </v-card-text>
            </v-sheet>

            <v-divider></v-divider>

            <v-sheet class="white">
                <v-card-actions>
                    <v-spacer></v-spacer>

                    <cs-btn 
                        caption="Renunță"
                        icon="mdi-close"
                        outlined
                        @click="OnClickCancel"
                    />
                </v-card-actions>
            </v-sheet>
        </v-card>
    </v-menu>
</template>


<script>
    export default {
        props: {
            app: {required: true},
            menu: {required: true},
        },

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

        computed: {
            role() {
                return this.menu.payload;
            }
        },

        methods: {
            SavePermissions(permissions) {

                if(this.t)
                {
                    clearTimeout(this.t);
                }

                this.t = setTimeout( () => {

                    this.app.requests.SaveRolePermissions
                        .ResetData()
                        .SetData({
                            id: this.role.id,
                            permissions,
                        })
                        .Request([
                            response => {
                                alert('bam bam....');
                            }
                        ]);

                }, 350);
            },

            OnInput(permissions) {
                this.SavePermissions(permissions);
            },

            OnClickCancel() {
                this.Utilizatori.Menus.Hide(this.menu);
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'RolePreviewMenu',
    }
</script>