<template>
  <div>
    <v-bottom-navigation v-model="bottom_nav">
      <v-btn :to="{ name: 'jobRequests', params: { kind: 'jobInvites' } }">
        <v-badge color="red" :content="newsInvite" :value="newsInvite !== 0">
          Diensteinladungen
        </v-badge>
      </v-btn>
      <v-btn :to="{ name: 'jobRequests', params: { kind: 'jobTransfer' } }">
        <v-badge color="red" :content="newsRequest" :value="newsRequest !== 0">Dienstübertragung</v-badge>
      </v-btn>
    </v-bottom-navigation>
    <JobInvites v-if="kind === 'jobInvites'"></JobInvites>
    <JobTransfer v-if="kind === 'jobTransfer'"></JobTransfer>
  </div>
</template>

<script>
import JobInvites from '@/components/user/JobRequests/JobInvites'
import JobTransfer from '@/components/user/JobRequests/JobTransfer'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'JobsRequest',
  components: { JobTransfer, JobInvites },
  data() {
    return {
      bottom_nav: true,
      kind: this.$route.params.kind
    }
  },
  methods: {
    ...mapActions({
      getUser: 'user/getUser'
    })
  },
  computed: {
    ...mapGetters({
      newsInvite: 'jobInvites/news',
      newsRequest: 'jobRequests/news'
    })
  },
  created() {
    this.getUser()
  },
  watch: {
    $route() {
      this.kind = this.$route.params.kind
    }
  }
}
</script>

<style scoped></style>
