<template>
<div>
    <q-table
        title="Getränke"
        :columns="columns"
        :data="drinks"
        row-key="name"
        >
        <template v-slot:body-cell-prices="{row: {prices}}">
        <q-td>
        <div v-for="price in prices" :key="price.id" class="row">
        <div class="col">
        {{price.volume | setVolume}}
        </div>
        <div class="col">
        {{price.price | setCurrency}}
        </div>
        <div class="col">
        {{price.description}}
        </div>
        </div>
        </q-td>
        </template>
    </q-table>
</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, ref} from '@vue/composition-api';
import {StateInterface} from 'src/store';
import {DrinkInterface} from '../store/drinks';
import {Store} from 'vuex';
export default defineComponent({
    name: 'Pricelist',
    filters: {
    setVolume(volume: number) {
    if (volume*10 > 1) {
    return `${volume}l`
    }
        return `${volume*100}cl`
    },
    setCurrency(price: number) {
    return `${price.toFixed(2)}€`
    }
    },
    setup(_, {root}) {
        const store = <Store<StateInterface>>root.$store;
        const state = <DrinkInterface>store.state.drink;
        const drinks = ref(state.drinks)
        onBeforeMount(() => {
        void store.dispatch('drink/getDrinks');
                })
        const columns = [
        {
            name: 'name',
            label: 'Getränk',
            field: 'name'
        },
        {
            name: 'prices',
            label: 'Preise',
            field: 'prices'
        }
        ]
        return {columns, drinks}
    }
        })
</script>
