<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {VSelect, VTextarea, VTextField} from "vuetify/components";
import {trackType} from "@/composables/content/track_type.ts";
import {file} from "@/composables/content/models/file.ts";

const props = defineProps({
  item: Object,
})

const trackTypes = trackType(null)
const fields = file(props.item)
const item = props.item


</script>

<template>
  <v-card>
    <v-card-title>
      <h3>Modifica traccia</h3>
    </v-card-title>
    <v-form>
      <v-card-text>
        <v-row no-gutters>
          <v-col v-for="(field, key) in fields()" cols="12" md="6" lg="4">
            <Component
                :is="field.component"
                :label="field.label"
                :value="field.value"
                :disabled="field.disabled"
                :items="trackTypes.trackTypes.value"
                v-model="item[key]"
                item-title="type_name"
                density="compact"
                hide-details="auto"
                class="mb-2"
                clearable
                :active="true"
            />
          </v-col>
        </v-row>
    </v-card-text>
      <v-card-actions>
        <v-btn
          color="primary"
          type="submit"
          @click.prevent="$emit('editItem', item)"
        >Salva</v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<style scoped>

</style>