<script setup lang="ts">
import {reactive} from "vue";

const emit = defineEmits([
    'updateProperty'
])

const limit = reactive({
  type: null,
  quantity: null
})

const limitItems = [
  {
    title: 'Ore',
    value: 'hours',
  },
  {
    title: 'Minuti',
    value: 'minutes',
  },
  {
    title: 'Tracce',
    value: 'items',
  },
  {
    title: 'Tempo rimanente della trasmissione',
    value: 'remaining',
  }
]

const update = (e) => {
  emit('updateProperty', limit, 'limit')
}
</script>

<template>
  <v-row>
    <v-col>
      <span>Limite a</span>
    </v-col>
    <v-col>
      <v-text-field
          v-if="limit.type !== 'remaining'"
          label="Quanto"
          v-model="limit.quantity"
          @update:modelValue="update"
          type="number"></v-text-field>
    </v-col>
    <v-col>
      <v-select
          label="Cosa"
          v-model="limit.type"
          :items="limitItems"
          item-title="title"
          item-value="value"
          @update:modelValue="update"
      ></v-select>
    </v-col>
  </v-row>
</template>

<style scoped>

</style>