<template>
  <q-card
    class="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)   justify-start content-center items-center "
    bordered
  >
    {{ event.type.name }}

    <div v-if="event.description" class=" col-12 q-px-sm" style="font-size: 10px">
      Info
      {{ event.description }}
    </div>

    <div v-for="(job, index) in event.jobs" v-bind:key="index">
      <q-separator style="justify-start content-center" />
      <div>{{ job.start | formatToHour }} - {{ job.end | formatToHour }}</div>
      <div>
        {{ job.type.name }}
      </div>
      <div class="col-12 q-px-sm" style="font-size: 10px">
        {{ job.comment }}
      </div>
      <div>
        <q-select
          filled
          v-model="availableUsers"
          multiple
          :options="availableUsers"
          use-chips
          stack-label
          label="Dienste"
          class="col-12 q-px-sm"
          style="font-size: 10px "
          counter
          :max-values="job.required_services"
        >
        </q-select>
      </div>
    </div>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { ScheduleInterface } from '../../../store/schedule';
import { date } from 'quasar';

interface Props {
  event: FG.Event;
}
export default defineComponent({
  name: 'Eventslot',
  components: {},
  props: {
    event: {
      required: true
    }
  },
  filters: {
    formatToHour: function(value: Date) {
      if (value) {
        return date.formatDate(value, 'HH:mm');
      }
    }
  },

  setup(props: Props, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const state = <ScheduleInterface>store.state.schedule;
    const availableUsers = null;
    const refreshKey = ref(0);

    return {
      refreshKey,
      availableUsers
    };
  }
});
</script>

<style></style>
