<template>
  <div class="account-tab">
    <b-card no-body>
      <b-tabs card>
        <b-tab title="Vue Global">
          <scatter-chart
              v-if="loaded"
              :chartdata="chartData"
              />
        </b-tab>

        <b-tab title="Vue detaillé" >
          <div>
          <div class="expense-button-div float-left">
            <b-button variant="success">Ajouter une dépense</b-button>
            <b-button variant="info" v-on:click="showImportExpenses">Importer des dépenses</b-button>
          </div>
            <div class="float-right">
              <b-button variant="light">Partager le compte</b-button></div>
          </div>
          <b-table striped hover bordered :items="expenses" :fields="fields"></b-table>
        </b-tab>
      </b-tabs>
    </b-card>
    <b-modal ref="import-expense" size="lg" centered title="">
      <template #modal-header="{ }">
      </template>
      <template #default="{ }">
        <!-- Styled -->
        <b-form-file
            v-model="file"
            :state="Boolean(file)"
            placeholder="Choose a file or drop it here..."
            drop-placeholder="Drop file here..."
        ></b-form-file>
      </template>

      <template #modal-footer="{ ok, cancel }">
        <b-button size="sm" variant="success" @click="validateFormImportExpenses()">
          Importer
        </b-button>
        <b-button size="sm" variant="danger" @click="cancel()">
          Fermer
        </b-button>
      </template>
    </b-modal>

  </div>
</template>

<script>
import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton} from "bootstrap-vue";
import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/service/noscomptes";
import {formatExpenses} from "@/service/expenses";
import ScatterChart from './charts/BarChart.vue';
export default {
  name: 'account',
  data: function () {
    return {
      fields: [
        {
          key: 'expenseDate',
          label: 'Date',
          sortable: true
        },
        {
          key: 'libelle',
          label: 'libelle',

        },
        {
          key: 'value',
          label: 'Montant',
          sortable: false
        },

      ],
      file: undefined,
      account: {},
      expenses : [{
        expenseDate: "Today",
        libelle:"Test",
        value: 10
      }],
      chartData:{} ,
      loaded: false,
    }
  },
  beforeCreate() {
    let loggedUser = this.$store.state.loggedUser
    getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
      this.account = data
    })
    getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
        this.expenses = data
      this.chartData = formatExpenses(data)
      this.loaded= true
    })

  },
  mounted () {
  },
  methods: {
    loadAccount() {
      let loggedUser = this.$store.state.loggedUser
      getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
        this.account = data
      })
    },
    showImportExpenses() {
      this.$refs['import-expense'].show()
    },
    validateFormImportExpenses() {
      let loggedUser = this.$store.state.loggedUser
      sendCSVImportExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.file)
          .then(()=>{
            this.loaded = false
            getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
              this.expenses = data
              this.chartData = formatExpenses(data)
              this.loaded = true
            })

            this.$refs['import-expense'].hide()
          })

    }


  },
  components: {
    ScatterChart,
    BCard,
    BTabs,
    BTab,
    BTable,
    BFormFile,
    BModal,
    BButton
  }
}
</script>

<style>
.expense-button-div {
  margin-bottom: 10px;
}

.expense-button-div .btn {
  margin-left: 10px;
}
.sr-only {
  display: none;
}
</style>

