<template>
  <q-page padding>
    <q-card>
      <q-form @submit="save" @reset="reset">
        <q-card-section class="fit row justify-start content-center items-center">
          <q-input
            class="col-xs-12 col-sm-6 q-pa-sm"
            label="Veranstaltungsname"
            :rules="[notEmpty]"
            v-model="eventname"
            filled
          />

          <q-input
            class="col-xs-12 col-sm-6 q-pa-sm"
            label="Beschreibung"
            type="textarea"
            v-model="eventdescription"
            filled
          />

          <IsoDateInput
            class="col-xs-12 col-sm-6 q-pa-sm"
            v-model="eventdate"
            label="Veranstaltungstermin"
          />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn label="Reset" type="reset" />
          <q-btn color="primary" type="submit" label="Speichern" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({
  name: 'CreateEvent',
  components: {},
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const user = ref<FG.User>({
      userid: '',
      display_name: '',
      firstname: '',
      lastname: '',
      mail: '',
      roles: []
    });
    function setUser(value: FG.User) {
      store.dispatch('user/setUser', value).catch(error => {
        console.warn(error);
      });
    }
    return { user, setUser };
  }
});
</script>

<style scoped></style>
