<template>
  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
    <EditEvent v-model="event" />
  </q-page>
</template>

<script lang="ts">
import { onBeforeMount, defineComponent, ref } from 'vue';
import EditEvent from '../components/management/EditEvent.vue';
import { useScheduleStore } from '../store';
import { useRoute } from 'vue-router';

export default defineComponent({
  components: { EditEvent },
  setup() {
    const route = useRoute();
    const store = useScheduleStore();
    const event = ref<FG.Event | undefined>(undefined);
    onBeforeMount(async () => {
      if ('id' in route.params && typeof route.params.id === 'string')
        event.value = await store.getEvent(parseInt(route.params.id));
    });

    return {
      event,
    };
  },
});
</script>
