<template>
  <v-card v-if="day.job">
    <v-card-title
      >{{ daysArray[day.date.getDay()] }} den {{ day.date.getDate() }}
      {{ monthArray[day.date.getMonth()] }}
      {{ day.date.getFullYear() }}
    </v-card-title>
    <v-card-text v-if="day.workers.length !== 0">
      Du hast Dienst mit:
      <v-chip
        style="margin: 3px"
        v-for="person in day.workers"
        :key="day.workers.indexOf(person)"
        >{{ person.user.firstname }}
        {{ person.user.lastname }}
      </v-chip>
    </v-card-text>
    <v-card-text v-else>
      Du hast alleine Dienst!
    </v-card-text>
  </v-card>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Day',
  props: {
    day: Object
  },
  data() {
    return {
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ],
      daysArray: [
        'Sonntag',
        'Montag',
        'Dienstag',
        'Mittwoch',
        'Donnerstag',
        'Freitag',
        'Samstag'
      ]
    }
  },
  created() {
    this.updateDay({ date: this.day.date })
  },
  methods: {
    ...mapActions({
      updateDay: 'user/updateDay'
    })
  },
  watch: {
    day() {
      this.updateDay({ date: this.day.date })
    }
  }
}
</script>

<style scoped></style>
