<template>
  <div>
    <div class="columns">
      <b-field class="column" label="Fecha inicio">
        <b-datepicker
          v-model="inicio"
          :min-date="minDate1"
          :max-date="maxDate"
          icon="calendar-today"
          rounded
        >
        </b-datepicker>
      </b-field>

      <b-field class="column" label="Fecha fin">
        <b-datepicker
          v-model="fin"
          :min-date="minDate2"
          :max-date="maxDate"
          icon="calendar-today"
          rounded
        >
        </b-datepicker>
      </b-field>
    </div>

    <div class="has-text-centered">
      <b-button type="is-link" @click="pedirReporte()">Descargar</b-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import fileDownload from 'js-file-download'

export default {
  props: {
    updateIsLoading: { type: Function, require: true },
  },
  data() {
    return {
      minDate1: new Date('2022-01-01'),
      minDate2: new Date(),
      maxDate: new Date(),

      inicio: new Date(),
      fin: new Date(),
    }
  },
  methods: {
    pedirReporte() {
      console.log(this.inicio)
      this.updateIsLoading(true)
      axios
        .get(
          `${process.env.api}/admin/reporte?inicio=${this.inicio}&fin=${this.fin}`
        )
        .then((res) => {
          fileDownload(res.data, `reporte.csv`)
          this.updateIsLoading(false)
        })
        .catch((err) => {
          console.log(err)
          this.updateIsLoading(false)
          //   this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style scoped></style>
