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

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'box',
  props: [
    'postename',
    'rows'
  ],
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters('config', [
      'postes'
    ]),
    ...mapGetters('datas', [
      'libelle_filter_rows'
    ]),
    poste () {
      return this.postes[this.postename]
    }
  },
  methods: {
    filter_rows () {
      return this.libelle_filter_rows(this.poste.words, this.poste.invert)
    },
    total () {
      return Math.round(
        -this.filter_rows()
          .map(x => parseFloat(x.Montant))
          .reduce((sum, x) => sum + x, 0)
      )
    },
    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>
