<template>
  <q-card-section>
    <div class="text-h6">Zutaten</div>
    <div v-for="(ingredient, index) in volume.ingredients" :key="ingredient.id">
      <div class="full-width row q-gutter-sm q-py-sm">
        <div class="col">
          {{
            name(ingredient.drink_ingredient?.ingredient_id) || ingredient.extra_ingredient?.name
          }}
        </div>
        <div class="col">
          {{
            ingredient.drink_ingredient?.volume
              ? `${ingredient.drink_ingredient?.volume * 100} cl`
              : ''
          }}
        </div>
      </div>
      <q-separator v-if="index < volume.ingredients.length - 1" />
    </div>
  </q-card-section>
  <q-card-section>
    <div class="text-h6">Preise</div>
    <div class="full-width row q-gutter-sm">
      <div v-for="price in volume.prices" :key="price.id">{{ price.price.toFixed(2) }}€</div>
    </div>
  </q-card-section>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { DrinkPriceVolume, usePricelistStore } from '../../store';
export default defineComponent({
  name: 'BuildManualVolumePart',
  props: {
    volume: {
      type: Object as PropType<DrinkPriceVolume>,
      required: true,
    },
  },
  setup() {
    const store = usePricelistStore();
    function name(id: number) {
      return store.drinks.find((a) => a.id === id)?.name;
    }
    return { name };
  },
});
</script>
