<template>
  <div class="pb-6">
    <h3 class="title">Carga Masiva</h3>

    <b-field>
      <b-upload
        accept=".csv"
        @input="validarExt()"
        v-model="csv"
        drag-drop
        expanded
      >
        <div class="section has-text-centered">
          <b-icon icon="upload" size="is-large" class="mb-2" />

          <p class="is-size-5">
            {{
              csv.name || 'Arrastra aquí tu archivo o da click aquí para buscar'
            }}
          </p>

          <p class="is-size-6">Tamaño máximo 20MB</p>

          <p class="is-size-7">
            Si al momento de elegir un archivo este no se selecciona, haga click
            en cancelar en la ventana emergente e intente de nuevo.
          </p>
        </div>
      </b-upload>
    </b-field>

    <div>
      <b-button
        type="is-info"
        :disabled="!csv.name"
        @click="
          imprimirWarning(
            '¿Seguro(a) que quieres enviar este archivo?',
            enviarCargaMasiva
          )
        "
      >
        Enviar archivo
      </b-button>

      <b-button type="is-link" tag="a" target="_blank" :href="link">
        Descargar plantilla
      </b-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    admin: { type: Object, required: true },
    imprimirError: { type: Function, required: true },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      link: `${process.env.api}/plantilla.csv`,
      csv: {},
    }
  },
  methods: {
    validarExt() {
      const extPermitidas = /(.csv)$/i

      if (!extPermitidas.exec(this.csv.name)) {
        this.imprimirError({ message: 'Asegurate de ingresar un archivo .CSV' })
        this.csv = {}
      }
    },
    enviarCargaMasiva() {
      const formData = new FormData()

      this.updateIsLoading(true)
      formData.append('csv', this.csv)
      axios
        .post(
          `${process.env.api}/programa/carga_masiva`,
          formData,
          this.admin.tokenArchivo
        )
        .then((res) => {
          this.updateIsLoading(false)
          this.imprimirMensaje(res.data.message)
          this.$router.push('/admin')
        })
        .catch((err) => {
          this.updateIsLoading(false)
          this.imprimirError(err.response.data)
        })
    },
  },
}
</script>

<style scoped></style>
