<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(caption) }}</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("tag")}}
          <template v-slot:append> {{t("Remark")}}</template>
        </v-list-item>
        <v-divider></v-divider>

        <v-list-item
          v-for="item in data"
          style="min-height: 0px; padding-top: 0px; padding-bottom: 0px"
          @click="open(item.label)"
        >
          {{ item.label }}
          <template v-slot:append> {{ item.remark }}</template>
        </v-list-item>
      </v-list>
    </v-card-text>
  </v-card>
</template>

<script>
import router from "../router";
import {  t } from "@/services/service";

export default {
  name: "dashboardCardNumbers",
  props: {
    data: {},
    caption: String,
    image: String,
  },
  methods: {
    open(tag) {
      router.push("animal/" + tag);
    },
  },
  computed: {
    sum() {
      var r = 0;
      for (const c in this.data) {
        r = r + this.data[c].count * 1;
      }
      return r;
    },
  },
  setup(props) {
    return {t};
  },
};
</script>
