<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >
        <cs-form-card 
            v-if="activeRecord"
            :form="form"
            :messageBox="null"
            :withHeader="false"
            @success="$emit('success', $event)"
        > 
            <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: {

            menu() {
                return this.form.menu;
            },

            form() {
                return this.app.forms.Children;
            }
        },

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

        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: 'ChildrenFormMenu',
    }
</script>