<template>
  <div>
    <p class="is-size-2 mb-5">Carga Masiva</p>
    <b-field v-if="true">
      <b-upload
        v-model="csv"
        type="is-black"
        v-on:input="validarExt()"
        drag-drop
        expanded
      >
        <section class="section">
          <div class="content has-text-centered">
            <p>
              <b-icon icon="upload" size="is-large"></b-icon>
            </p>
            <p>
              {{
                csv.name || "Arrastra aquí tu archivo o da click para buscar"
              }}
            </p>
          </div>
        </section>
      </b-upload>
    </b-field>
    <b-button v-if="csv.name" @click="actualizarDialog()" class="is-info"
      >Enviar archivo</b-button
    >
    <b-button v-else disabled class="is-info">Enviar archivo</b-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      csv: {}
    }
  },
  methods: {
    validarExt() {
      const extPermitidas = /(.csv)$/i;
      if (!extPermitidas.exec(this.csv.name)) {
        this.dangerToast();
        this.csv = {};
      }
    },
    dangerToast() {
      this.$buefy.toast.open({
        message: "Asegurate de ingresar un archivo .CSV",
        type: "is-danger",
      });
    },
  }
}
</script>
