<template>
  <b-card v-if="categorie"
          :bg-variant="categorie.variant"
          text-variant="white"
          class="text-center">
    <div class="card-text">
      <div class="icon">
        <font-awesome-icon :icon="categorie.icon" class="fa-3x"/>
      </div>
      <div class="amount">
        <h3>{{ total() }}€</h3>
        {{ categorie.name }}
      </div>
    </div>
  </b-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { total } from '../libs/data_processing'
export default {
  name: 'cardCategorie',
  props: [
    'categoriename',
    'rows'
  ],
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters('config', [
      'categories'
    ]),
    ...mapGetters('datas', [
      'categorie_filter_rows'
    ]),
    categorie () {
      return this.categories[this.categoriename.toLowerCase()]
    }
  },
  methods: {
    filter_rows () {
      return this.categorie_filter_rows([this.categorie.name])
    },
    total () {
      return total(this.filter_rows())
    },
    count () {
    }
  }
}

</script>

<style scoped>
.card-body {
  padding: 10px;
}
.card-text {
  display: flex;
}
.icon {
  flex: 40%;
  align-self: center;
}
.amount {
  flex: 50%;
  text-align: right;
  margin-left: 10px;
}
</style>
