<template>
  <b-card :bg-variant="poste.variant"
          text-variant="white"
          class="text-center">
    <p class="card-text">
      <font-awesome-icon :icon="poste.icon" />
      {{ poste.name }}
      </br>
      {{ total() }}€
    </p>
  </b-card>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'box',
  props: [
    'postename',
    'rows'
  ],
  data () {
    return {
      empty_poste: {
        variant: '',
        icon: '',
        name: ''
      }
    }
  },
  computed: {
    ...mapGetters('config', [
      'postes'
    ]),
    poste () {
      if (this.postes) {
        return this.postes[this.postename]
      } else {
        return this.empty_poste
      }
    }
  },
  methods: {
    filter_rows () {
      if (this.poste.words) {
        if (this.poste.invert) {
          return this.rows.filter(x => {
            return this.poste.words.every(v => {
              return x.Libellé.indexOf(v) < 0
            })
          })
        } else {
          return this.rows.filter(x => {
            return this.poste.words.some(v => {
              return x.Libellé.indexOf(v) >= 0
            })
          })
        }
      } else {
        return this.rows
      }
    },
    total () {
      return Math.round(
        -this.filter_rows()
          .map(x => parseFloat(x.Montant))
          .reduce((sum, x) => sum + x, 0)
      )
    },
    count () {
    }
  },
}

</script>

<style scoped>
</style>
