<template>
    <v-menu
        :position-x="form.left"
        :position-y="form.top"
        absolute
        offset-y
        :close-on-click="false"
        :close-on-content-click="false"
        content-class="elevation-1"
        :min-width="240"

        v-model="form.visible"
    >
        <v-card>
            <v-card-text class="pt-4 pb-0" v-if="activeRecord">
                <customer-status-input 
                    class="mt-0 mb-2"
                    :statuses="statuses"
                    :customerName="activeRecord.name"
                    v-model="activeRecord.status"
                />
            </v-card-text>

            <v-card-actions>
                <cs-btn 
                    outlined
                    :icon="form.TriggerIcon()"
                    :color="form.TriggerColor()"
                    :caption="form.TriggerCaption()"
                    :tooltip="form.TriggerTooltip()"

                    :loading="form.processing"
                    :disabled="form.actionButtonDisabled"

                    :click="() => form.formprovider.Trigger()"
                />

                <v-spacer></v-spacer>
                
                <cs-btn-cancel 
                    :tooltip="null"
                    caption="Renunță"
                    :click="() => form.visible = false"
                />
            </v-card-actions>
        </v-card>
    </v-menu>
</template>

<script>
    export default {
        props: {
            form: {required: true},
            statuses: {default: () => []},
        },
        
        components: {
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

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

        name: 'CustomerStatusFormMenu',
    }
</script>