<template>
  <v-container fluid>
    <v-row>
      <page-header>Dashboard</page-header>
      <v-spacer />
      <current-date-time />
      <v-col cols="12">
        <welcome />
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="4" v-if="!$store.getters.isOnlyMemberEditor">
        <card
          :count="learningProductsCount"
          label="Leerproducten"
          icon="icon-learningproducts"
          :route="localePath('/manager/learning')"
        />
      </v-col>

      <v-col v-if="!$store.getters.isOnlyMemberEditor" cols="4">
        <card
          :count="membersCountComputed"
          label="Leden"
          icon="icon-members"
          :route="localePath('/manager/members')"
        />
      </v-col>

      <v-col cols="4" v-if="$store.getters.isMember && !$store.getters.isOnlyMemberEditor">
        <card
          :count="2"
          label="Rapportages"
          icon="icon-members"
          :route="localePath('/manager/members/report')"
        />
      </v-col>

      <v-col v-if="$store.getters.isOnlyMemberEditor" cols="4">
        <card
          label="Lidmaatschapgegevens"
          icon="icon-attributes"
          :route="localePath('/manager/members')"
        />
      </v-col>

      <v-col v-if="$store.getters.isOnlyMemberEditor" cols="4">
        <card
          label="Managementinformatie"
          icon="icon-managementinfo"
          :route="localePath('/manager/members/report')"
        />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import PageHeader from '~/components/UI/PageHeader/PageHeader'
import Welcome from '~/components/Admin/Welcome/'
import currentDateTime from '~/components/CurrentDateTime/CurrentDateTime'
import Card from '~/components/Card'

export default {
  layout: `${process.env.CUSTOMER}Admin`,
  components: {
    PageHeader,
    Welcome,
    currentDateTime,
    Card,
  },
  data() {
    return {
      learningProductsCount: 0,
      membersCount: 0,
      primary: 'primary',
      secondary: 'secondary',
    }
  },
  async asyncData({ $axios, store }) {
    try {
      const responseProducts = await $axios.get('/learning-products/count')
      const responseMembers = await $axios.get('/members/count')
      return {
        learningProductsCount: responseProducts.data,
        membersCount: responseMembers.data,
      }
    } catch (error) {
      console.log('Data -> error', error)
    }
  },
  computed: {
    membersCountComputed() {
      return this.$store.getters.isOnlyMemberEditor
        ? this.$store.getters.loggedInUser.membersManagedCount
        : this.membersCount
    },
  },
}
</script>
