<template>
  <div class="import">
    <h1>Analyse</h1>
    <div class="analysis" v-if="datas_present">
      <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="start" @input="set_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="end" @input="set_end"></b-form-input>
          </b-col>
        </b-row>
      </b-container>

      <b-card-group deck class="mb-3">
        <box @click.native="set_tags_filter([])"></box>
        <box @click.native="set_tags_filter(['cash'])" tagname="cash"></box>
        <box @click.native="set_tags_filter(['cb'])" tagname="cb"></box>
        <box @click.native="set_tags_filter(['virements'])" tagname="virements"></box>
      </b-card-group>

      <tags-comparison></tags-comparison>

      <b-table striped hover :items="filtered_rows" :fields='fields'>
        <template slot="tags" slot-scope="data">
          <div v-for="tag in data.item.tags" :key="tag.name">
            <div v-if="tag.name !== 'Tout'">
              <font-awesome-icon :icon="tag.icon" class="fa"/>
            </div>
          </div>
        </template>
      </b-table>
    </div>
    <div v-else>
      <div class="nodata">
        <h1>
        <font-awesome-icon icon="dizzy" class="fa"/>
          Pas de données
          <font-awesome-icon icon="dizzy" class="fa"/>
        </h1>
        <p>
          Penser à en importer!
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import box from '../components/box'
import tagsComparison from '../components/tags_comparison'

export default {
  name: 'home',
  components: {
    box: box,
    tagsComparison: tagsComparison
  },
  data () {
    return {
      fields: [
        {
          key: 'Date',
          sortable: true,
          formatter: d => d.format('DD/MM/YYYY')
        },
        {
          key: 'Montant',
          sortable: true
        },
        {
          key: 'Libellé',
          sortable: true
        },
        {
          key: 'tags'
        }
      ],
      default_tag: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      },
      tags_filter: []
    }
  },
  computed: {
    ...mapGetters({
      'csvs': 'datas/csvs',
      'tag_filter_rows': 'datas/tag_filter_rows',
      'datas_present': 'datas/present',
      'start': 'datas/start',
      'end': 'datas/end',
      'tags': 'config/tags'
    }),
    filtered_rows () {
      return this.tag_filter_rows(this.tags_filter)
    }

  },
  methods: {
    ...mapActions('datas', [
      'set_start',
      'set_end'
    ]),
    update_start (e) {
    },
    set_tags_filter (tagnames) {
      this.tags_filter = tagnames
    }
  }
}
</script>

<style scoped>
.date-selector {
  padding: 1rem;
}
.nodata{
  text-align: center;
}

</style>
