<template>
  <v-card class="mx-auto" max-width="400">
    <v-img class="align-end text-white" height="200" :src="image" cover>
      <v-card-title
        ><v-chip size="x-large">{{ t("Groups") }}</v-chip></v-card-title
      >
    </v-img>

    <v-card-text>
      <v-list>
        <v-list-item
          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
        >
          {{t("Group")}}
          <template v-slot:append> {{t("Count")}} </template>
        </v-list-item>

        <v-divider></v-divider>

        <v-list-item
          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
          v-for="item in inputData"
          :key="item.selectedGroups"
        >
          {{ getGroupObject(item.selectedGroups).label }}
          <template v-slot:append> {{ item.count }} </template>
        </v-list-item>
        <v-list-item>
          {{ t("Sum")}}
          <template v-slot:append> {{ sum }} </template>
        </v-list-item>
      </v-list>
    </v-card-text>
  </v-card>
</template>

<script>
import { getLabel, t,getGroupObject } from "@/services/service";

export default {
  name: "dashboardCardNumbers",
  props: {
    inputData: {},
    caption: String,
    image: String,
  },
  methods: {
    getLabel(id) {
      return getLabel("group", id);
    },
  },

  computed: {
    sum() {
      var r = 0;
      for (const c in this.inputData) {
        r = r + this.inputData[c].count * 1;
      }
      return r;
    },
  },
  setup(props) {
    return {t,getGroupObject};
  },
};
</script>
