<template>
    <v-autocomplete
        dense
        :hide-details="false"
        class="mt-0"
        :items="items"
        outlined
        :label="__(label)"
        clearable
        :no-data-text="__(noDataText)"
        :loading="loading"
        :disabled="isDisabled"
        :error-messages="errors"
        :append-outer-icon="hasInsert ? 'mdi-plus' : null"
        @focus="$emit('focus')"
        @blur="$emit('blur')"
        @click:append-outer="OnClickAppendOuter"

        v-model="localValue"
    >
    </v-autocomplete>
</template>

<script>
    export default {
        props: {
            value: {required: true},
            errors: {default: null},
            noDataText: {default: 'Nu sunt date...'},
            label: {default: 'Selectați'},
            dataprovider: {default: null},
            disabled: {default: false},
            noLoadData: {default: false},
            hasInsert: {default: false},
        },

        computed: {
            localValue: {

                get: function() {
                    return this.value;
                },

                set: function(value) {
                    this.$emit('input', value);
                }
            },

            items() {
                if(! this.dataprovider )
                {
                    return [];
                }
                return this.dataprovider.selectorItems;
            },

            isDisabled() {
                return this.disabled || this.loading;
            },

            loading() {
                return this.dataprovider && this.dataprovider.processing;
            },
            
        },

        methods: {
            OnClickAppendOuter(e) {
                this.$emit('click:append-outer', e);
            }
        },

        created() {
            if(! this.noLoadData)
            {
                if(this.dataprovider)
                {
                    this.dataprovider.Post();
                }
            }
        },

        name: 'AutocompleteSelector',
    }
</script>
