<template>
  <q-card-section>
    <div class="text-h6">Zutaten</div>
    <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
      <div v-if="ingredient.drink_ingredient">
        <div class="full-width row q-gutter-sm q-py-sm">
          <div class="col">
            {{ name(ingredient.drink_ingredient?.ingredient_id) }}
          </div>
          <div class="col">
            {{
              ingredient.drink_ingredient?.volume
                ? `${ingredient.drink_ingredient?.volume * 100} cl`
                : ''
            }}
          </div>
        </div>
        <q-separator />
      </div>
    </div>
    <div v-for="ingredient in volume.ingredients" :key="ingredient.id">
      <div v-if="ingredient.extra_ingredient">
        <div class="full-width row q-gutter-sm q-py-sm">
          <div class="col">
            {{ ingredient.extra_ingredient?.name }}
          </div>
          <div class="col"></div>
        </div>
        <q-separator />
      </div>
    </div>
  </q-card-section>
  <q-card-section>
    <div class="text-h6">Preise</div>
    <div class="full-width row q-gutter-sm justify-around">
      <div v-for="price in volume.prices" :key="price.id">
        <div class="text-body1">{{ price.price.toFixed(2) }}€</div>
        <q-badge v-if="price.public" class="text-caption"> öffentlich </q-badge>
        <div class="text-caption text-weight-thin">
          {{ price.description
          }}
        </div>
      </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>
