<template>
    <v-select
        dense
        hide-details="auto"
        class="mt-0"
        :items="accounts"
        :item-value="item => item.user.id"
        outlined
        label="Utilizatorul"
        clearable
        :no-data-text="__('Nu sunt utilizatori în listă')"
        :loading="false"
        :disabled="false"
        v-model="user_id"
    >
        <template #item="{item}">
            <account-autocomplete-item 
                :item="item"
            />
        </template>

        <template #selection="{item}">
            <account-autocomplete-item 
                :item="item"
            />
        </template>
    </v-select>
</template>

<script>
    export default {
        props: {
            value: {required: true},
            accounts: {required: true},
        },
        
        computed: {
            user_id: {

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

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

        name: 'AccountAutocomplete',
    }
</script>