<template>
    <div>
        <v-toolbar>
            <v-spacer/>
            <v-toolbar-items>
                <v-autocomplete outlined return-object v-model="user" style="margin-top: 3px"
                                placeholder="Suche Person" :items="allUsers" item-text="fullName"
                                prepend-inner-icon="search" full-width/>
                <v-btn text @click="addUser">Hinzufügen</v-btn>
            </v-toolbar-items>
        </v-toolbar>
    </div>
</template>

<script>
    import httpClient from "../../plugins/restService";

    export default {
        name: "SearchBar",
        props: {

        },
        data () {
            return {
                hover: false,
                focus: false,
                item_size: 32,
                searchString: '',
                test: [],
                allUsers: [],
                user: null,
            }
        },
        created() {
            this.hasFocus()
        },
        methods : {
            mop () {
            },
            hasFocus () {
                httpClient.searchUser(this.$store.getters.getToken, {searchString: this.searchString})
                    .then(response => {
                        this.allUsers = response.data

                        for (let i = 0; i < this.allUsers.length; i++) {
                            this.allUsers[i].fullName = this.allUsers[i].firstname + " " + this.allUsers[i].lastname
                        }
                    })
            },
            addUser() {
                this.$emit("add:creditList", this.user)
                this.user = null
            }
        },
        computed: {
        }
    }
</script>

<style scoped>

</style>
