<template>
  <div>
    <h2 class="column is-narrow is-size-3 is-size-4-mobile">Informe General</h2>
    <div class="columns is-centered">
      <p class="column is-2 has-text-centered mt-2" centered>
        <b>Perído de:</b>
      </p>
      <b-field class="column is-3">
        <b-datepicker
          v-model="fechaInicio"
          :min-date="minDate"
          :max-date="maxDate"
          icon="calendar-today"
          rounded
        >
        </b-datepicker>
      </b-field>

      <p class="column is-2 has-text-centered mt-2" centered><b>a:</b></p>
      <b-field class="column is-3">
        <b-datepicker
          v-model="fechaFin"
          :min-date="fechaInicio"
          :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: {
    admin: { type: Object, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      minDate: new Date('2022-01-01'),
      maxDate: new Date(),

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