<template>
  <v-content>
    <v-container>
      <v-card>
        <v-card-title>
          Preisliste
          <v-spacer />
          <v-text-field
            v-model="search"
            label="Suche Getränk"
            single-line
            hide-details
          >
            <template v-slot:append>
              <v-icon>{{searchIcon}}</v-icon>
            </template>
          </v-text-field>
        </v-card-title>
        <v-data-table :headers="headers" :items="priceList" :search="search">
          <template v-slot:item.price="{ item }">
            {{ item.price ? (item.price / 100).toFixed(2) : '' }}
          </template>
          <template v-slot:item.price_big="{ item }">
            {{ item.price_big ? (item.price_big / 100).toFixed(2) : '' }}
          </template>
          <template v-slot:item.price_club="{ item }">
            {{
              item.name.toLowerCase() == 'long island ice tea'.toLowerCase()
                ? 'Ein Klubmitglied bestellt keinen Long Island Icetea'
                : item.price_club
                ? (item.price_club / 100).toFixed(2)
                : ''
            }}
          </template>
          <template v-slot:item.price_club_big="{ item }">
            {{
              item.price_club_big ? (item.price_club_big / 100).toFixed(2) : ''
            }}
          </template>
          <template v-slot:item.premium="{ item }">
            {{ item.premium ? (item.premium / 100).toFixed(2) : '' }}
          </template>
          <template v-slot:item.premium_club="{ item }">
            {{ item.premium_club ? (item.premium_club / 100).toFixed(2) : '' }}
          </template>
          <template v-slot:item.price_extern_club="{ item }">
            {{
              item.price_extern_club
                ? (item.price_extern_club / 100).toFixed(2)
                : ''
            }}
          </template>
        </v-data-table>
      </v-card>
    </v-container>
  </v-content>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiMagnify } from '@mdi/js'
export default {
  name: 'PriceList',
  data() {
    return {
      searchIcon: mdiMagnify,
      search: null,
      headers: [
        {
          text: 'Name',
          value: 'name'
        },
        {
          text: 'Kategorie',
          value: 'type'
        },
        {
          text: 'Preis in €',
          value: 'price'
        },
        {
          text: 'Preis groß in €',
          value: 'price_big'
        },
        {
          text: 'Preis Club in €',
          value: 'price_club'
        },
        {
          text: 'Preis groß Club in €',
          value: 'price_club_big'
        },
        {
          text: 'Aufpreis in €',
          value: 'premium'
        },
        {
          text: 'Aufpreis Club in €',
          value: 'premium_club'
        },
        {
          text: 'Preis Club extern in €',
          value: 'price_extern_club'
        }
      ],
      items: []
    }
  },
  methods: {
    ...mapActions({
      getPriceList: 'priceList/getPriceList'
    })
  },
  computed: {
    ...mapGetters({
      priceList: 'priceList/priceList'
    })
  },
  created() {
    this.getPriceList()
  }
}
</script>

<style scoped></style>