<template>
  <v-card>
    <v-card-title>Von dir reservierte Wünsche</v-card-title>

    <v-list three-line>
      <v-list-item v-for='item in this.$store.state.wishes.claimed' v-bind:key='item.id'>
        <v-list-item-content>
          <v-list-item-title>
            Wunsch von {{ getUser(item.owner_id).name }}
          </v-list-item-title>
          <v-list-item-subtitle>
            {{ item.wish }}
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
export default {
  name: 'claimedwishes',
  methods: {
    getUser(id) {
      let searchedUser = this.$store.state.users.users
        .find(user => user.id === id)
      console.log(searchedUser)
      return searchedUser !== undefined ? searchedUser : {"id": 45, "name": "Lädt..."}
    }
  }
}
</script>

<style scoped>

</style>
