<template>
<div class="container">
    <h3 class="title is-4 mt-6">Carta de termino (en formato .PDF. No se aceptan fotos).</h3>

    <b-field>
        <b-upload v-model="file" drag-drop type="is-black" expanded accept="application/pdf">
            <section class="section">
              <div class="content has-text-centered">
                <p>
                <b-icon icon="upload" size="is-large"></b-icon>
                </p>
                <p>{{ file.name || "Arrastra aquí tu archivo o da click para buscar"}}</p>
                <p>Tamaño máximo para el archivo: 20MB</p>
              </div>
            </section>
        </b-upload>
    </b-field>

    <b-field class="centro">
      <b-button
        :disabled='file == ""'
        class="border-info my-5 is-medium"
        type="is-info"
        tag="router-link"
        to="/responsable">
          Enviar
      </b-button>

    </b-field>
</div>
</template>

<script>
export default {
  data () {
    return {
      file: ''
    }
  },
  methods: {
    validarTamaño () {
      const TamMax = 20000000
      const archivo = this.file
      if (archivo.size > TamMax) {
        this.toast()
        this.file = ''
      }
    },
    toast () {
      this.$buefy.toast.open({
        message: 'El archivo excede el tamaño permitido',
        type: 'is-danger'
      })
    }
  },
  watch: {
    file: function (newFile, oldFile) {
      this.validarTamaño()
    }
  }
}
</script>

<style>
.centro{
  text-align: center;

}
</style>
