<template>
  <div>
    <v-card tile>
      <v-card-title>
        Freigetränke
      </v-card-title>
      <v-card-text>
        <v-list>
          <template
              v-for="(free_drink_config, index) in free_drink_list_config">
            <v-list-item
                :key="index">
              <v-list-item-content>
                <v-row>
                  <v-col>
                    <v-text-field
                        outlined
                        label="Label"
                        :value="free_drink_config.label"
                    />
                  </v-col>
                  <v-col>
                    <v-autocomplete
                        outlined
                        label="Zugeordnetes Getränk"
                        :items="priceList"
                        :item-text="item => {return item.name + '/' + (item.price_club/100).toFixed(2) + '€'}"
                        item-value="id"
                        :value="free_drink_config.drink"
                    />
                  </v-col>
                  <v-col>
                    <v-autocomplete
                        outlined
                        label="Freigetränkaufnahme"
                        multiple
                        :items="free_drink_types"
                        item-text="name"
                        item-value="id"
                        :value="free_drink_config.free_drink_types"
                    />
                  </v-col>
                  <v-col>
                    <v-text-field
                        outlined
                        label="Preis in €"
                        type="number"
                        :value="(free_drink_config.price / 100).toFixed(2)"
                    />
                  </v-col>
                </v-row>
              </v-list-item-content>
            </v-list-item>
            <v-divider
                v-if="index + 1 < free_drink_list_config.length"
                :key="index"
            />
          </template>
        </v-list>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="log">
          LOG
        </v-btn>
      </v-card-actions>
    </v-card>
    <v-card tile>
      <v-card-title>Gründe für Freigetränke</v-card-title>
    </v-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'FreeDrinkListConfig',
  methods: {
    log() {
      console.log(this.free_drink_list_config)
    }
  },
  computed: {
    ...mapGetters('freeDrinkList', [
      'free_drink_list_config',
      'free_drink_list_reasons',
        'free_drink_types'
    ]),
    ...mapGetters('priceList', ["priceList"])
  }
}
</script>

<style scoped></style>
