<template>
  <q-btn
    v-if="cost_price_pro_volume"
    color="positive"
    icon-right="add"
    label="Abgabe hinzufügen"
    size="xs"
  >
    <q-menu anchor="center middle" self="center middle">
      <div class="row justify-around q-pa-sm">
        <q-input
          v-model.number="newVolume.volume"
          filled
          dense
          label="Liter"
          type="number"
          min='0'
          step='0.01'
        />
      </div>
      <div class="row justify-between q-pa-sm">
        <q-btn v-close-popup label="Abbrechen" @click="cancelAddVolume" />
        <q-btn
          v-close-popup
          label="Speichern"
          color="primary"
          @click="addVolume(rows)"
        />
      </div>
    </q-menu>
  </q-btn>
</template>

<script lang='ts'>
import { DrinkPriceVolume } from '../../../store';
import { ref } from 'vue';
import {CompositionAPIEmit} from 'vue-typed-emit';
import {SetupContext} from 'vue';

interface Events {
  addVolume: DrinkPriceVolume
}

interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
  emit: CompositionAPIEmit<Events>
}

export default {
  name: 'NewVolume',
  props: {
    cost_price_pro_volume: {
      type: undefined,
      required: true
    }
  },
  emits: ["addVolume"],
  setup(_: any, {emit}: ExtendedSetupContext) {
    const emptyVolume: DrinkPriceVolume = {
      id: -1,
      _volume: 0,
      volume: null,
      min_prices: [
        { percentage: 100, price: null },
        { percentage: 250, price: null },
        { percentage: 300, price: null },
      ],
      prices: [],
      ingredients: [],
    };
    const newVolume = ref<DrinkPriceVolume>(emptyVolume);

    function cancelAddVolume() {
      setTimeout(() => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        newVolume.value = emptyVolume;
      }, 200);
    }
    function addVolume() {
      emit("addVolume", <DrinkPriceVolume>newVolume.value)
    }

    return {
      addVolume,
      cancelAddVolume,
      newVolume,
    }
  }
};
</script>

<style scoped>

</style>
