<template>
  <div class="import">
    <h1>Analyse</h1>
    <b-container fluid>
      <b-row class="date-selector">
        <b-col sm="1"><label for="start"> Entre </label> </b-col>
        <b-col sm="3"><b-form-input id="start" type="date" :value="date_start" @input="update_date_start"></b-form-input></b-col>
        <b-col sm="1"><label for="end"> et </label></b-col>
        <b-col sm="3"><b-form-input id="end" type="date" :value="date_end" @input="update_date_end"></b-form-input></b-col>
        <b-col sm="3"><label for="spending"> Uniquement les dépenses </label></b-col>
        <b-col sm="1"><b-form-checkbox id="spending" v-model="spending"></b-form-checkbox></b-col>
      </b-row>
    </b-container>

    <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'home',
  components: {
  },
  data () {
    return {
      fields: [
        {
          key: 'Date',
          sortable: true
        },
        {
          key: 'Montant',
          sortable: true
        },
        {
          key: 'Libellé',
          sortable: true
        }
    ],
      spending: true
    }
  },
  mounted: function () {
    this.$store.dispatch('config/find_csv')
  },
  computed: {
    ...mapGetters({
      'csvs': 'config/csvs',
      'data_dir': 'config/data_dir',
      'rows': 'config/filter_rows',
      'date': 'config/dates_boundaries'
    }),
    date_start () {
      return this.date[0]
    },
    date_end () {
      return this.date[1]
    },
    filter_rows () {
      if (this.spending) {
        return this.rows.filter(x => x.Montant < 0)
      } else {
        return this.rows
      }
    }
  },
  methods: {
    update_date_start (e) {
      this.$store.dispatch('config/set_start_date', e)
    },
    update_date_end (e) {
      this.$store.dispatch('config/set_end_date', e)
    },
  }
}
</script>

<style scoped>
.date-selector {
    padding: 1rem;
}

</style>
