<template>
    <v-sheet
        class="transparent"
        tile
        v-if="isVisible"
    >
        <v-menu
            :position-x="editable.x"
            :position-y="editable.y"
            absolute
            tile
            offset-y
            :close-on-click="false"
            :close-on-content-click="false"
            content-class="elevation-1"
            v-model="editable.menuVisible"
        >
            <v-card
                tile
                flat
                :width="editable.form.width "
            >
                <v-card-text class="px-1 pt-4 pb-0">
                    <component 
                        :is="editable.formInputComponent"
                        :editable="editable"
                    >
                    </component>
                </v-card-text>

                <v-card-actions class="pa-1">

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

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

                        :click="() => Trigger()"
                    />

                    <v-spacer></v-spacer>
                    
                    <cs-btn-cancel 
                        outlined
                        :tooltip="null"
                        caption="Renunță"
                        :click="() => editable.Hide(true)"
                    />
                </v-card-actions>
            </v-card>
        </v-menu>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            column: {required: true},
            /**
             * recordul din baza de date
             */
            item: {required: true},
        },

        computed: {
            editable() {
                return this.column.editable;
            },

            form() {
                return this.column.editable.form;
            },

            isVisible() {
                if( ! this.editable )
                {
                    return false;
                }

                if( ! this.editable.editedItem )
                {
                    return false;
                }
                
                if(! this.editable.recordName)
                {
                    return (this.editable.editedItem.id == this.item.id);
                }

                return (this.editable.editedItem.id == this.item[this.editable.recordName].id);
            },

            isDisabled() {
                let r = this.form.actionButtonDisabled;

                if(!! r)
                {
                    return true;
                }

                if( _.isFunction(this.form.formprovider.ConfirmButtonDisabled))
                {
                    return this.form.formprovider.ConfirmButtonDisabled(this.form.formprovider.action);
                }

                return r;
            }
        },
        
        methods: {
            Trigger() {
                if( _.isFunction(this.editable.PrepareInput))
                {
                    this.form.formprovider.activeRecord = this.editable.PrepareInput(this.form.formprovider.activeRecord);
                }
                this.form.formprovider.Trigger();
            }
        },
        components: {
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CsDatatableCellEditable',
    }
</script>