<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'
    ]),
    poste () {
      return this.postes[this.postename]
    }
  },
  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>
.card-body {
  padding: 10px;
}
.card-text {
  display: flex;
}
.icon {
  flex: 40%;
}
.amount {
  flex: 50%;
  text-align: right;
  margin-left: 10px;
}
</style>
