<template>
  <div class="row justify-around q-pa-sm">
    <q-input
      v-model.number="newPrice.price"
      dense
      filled
      class="q-px-sm"
      type="number"
      label="Preis"
      suffix="€"
      min="0"
      step="0.1"
    />
    <q-input
      v-model="newPrice.description"
      dense
      filled
      class="q-px-sm"
      label="Beschreibung"
      clearable
    />
    <q-toggle v-model="newPrice.public" dense class="q-px-sm" label="Öffentlich" />
  </div>
  <div class="row justify-between q-pa-sm">
    <q-btn v-close-popup label="Abbrechen" @click="cancelAddPrice" />
    <q-btn v-close-popup label="Speichern" color="primary" @click="addPrice(row)" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'NewPrice',
  emits: {
    save: (val: FG.DrinkPrice) => val,
  },
  setup(_, { emit }) {
    const emptyPrice: FG.DrinkPrice = {
      id: -1,
      price: 0,
      description: '',
      public: true,
    };
    const newPrice = ref(emptyPrice);
    function addPrice() {
      emit('save', newPrice.value);
      cancelAddPrice();
    }
    function cancelAddPrice() {
      setTimeout(() => {
        newPrice.value = emptyPrice;
      }, 200);
    }
    return { newPrice, addPrice, cancelAddPrice };
  },
});
</script>

<style scoped></style>