<template>
    <v-card
        tile
        flat
        class="mb-2"
        v-if="activeRecord"
    >   
        <v-row dense>
            <v-col cols="12">
                <departament-autocomplete-selector 
                    :customer_id="activeRecord.customer_id"
                    :disabled="! activeRecord.customer_id"
                    :errors="errorsManager.ByField('department_id')"
                    :departmentForm="null"
                    
                    :app="app"

                    @focus="errorsManager.ResetField('department_id')"
                    @blur="errorsManager.Validate('department_id')"
                    v-model="activeRecord.department_id"
                />
            </v-col>
        </v-row>
    </v-card>
</template>

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

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

            app() {
                return this.editable.column.datatable.app.dataSession;
            }
        },

        components: {
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'AccountDepartmentInput',
    }
</script>