<template>
    <v-menu
        v-model="form.menu.visible"
        :position-x="form.menu.x"
        :position-y="form.menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <cs-form-card 
            :form="form"
            :messageBox="null"
            v-if="activeRecord"
            :withHeader="false"
            @success="OnSuccess"
        > 
            <cs-info-alert 
                v-if="formprovider.action == 'delete'"
                color="red"
                icon="mdi-alert"
                :message="__('Sunteți sigur că doriți ștergerea permisiunii :name?', {
                    name: activeRecord.name
                })"
            />
                
            <cs-text-box 
                ref="First"
                v-else
                :control="controls.name"
                :errors="errorsManager.ByField('name')"

                v-model="activeRecord.name"
                
                @focus="errorsManager.ResetField('name')"
                @blur="errorsManager.Validate('name')"
                
            />
        </cs-form-card>
    </v-menu>


</template>

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

        computed: {
            form() {
                return this.app.forms.Permissions;
            }
        },

        watch: {
            'form.menu.visible': function(newValue) {
                if(newValue)
                {
                    let i = setInterval( () => {
                        if(this.$refs.First)
                        {
                            clearInterval(i);
                            this.$refs.First.Focus();
                        }
                    }, 10)
                }    
            }
        },

        methods: {
            OnSuccess(e) {
            }
        },

        components: {
            CsFormCard: require('@CsVueComp/cards/CsFormCard').default,
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default,
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'PermissionFormMenu',
    }
</script>