<template lang="pug">
  vm-prompt(@vm-cancel="close" @vm-accept="importAction" @vm-close="close" :vm-accept-text="$t('strings.accept')" :vm-cancel-text="$t('strings.cancel')" :vm-is-valid="!isFile" :vm-active="isModalImportVisible" :vm-title='title')
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=12)
        b-form-group
          input(type="file" id="file" ref="file" v-on:change="handleFileUpload()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .xls, .xlsx")
        span
          slot Descarga una
          a(@click="downloadTemplate({model})") &nbsp;plantilla de CSV de muestra
          slot &nbsp;para ver un ejemplo del formato requerido.
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ModalImport',
  props: {
    title: {
      type: String,
      default: 'Import CSV or Excel file'
    },
    model: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      file: ''
    }
  },
  computed: {
    ...mapGetters([
      'isModalImportVisible'
    ]),
    isFile () {
      return !this.file
    }
  },
  methods: {
    ...mapActions([
      'importData',
      'downloadTemplate',
      'setModalImportVisible'
    ]),
    handleFileUpload () {
      this.file = this.$refs.file.files[0]
    },
    importAction () {
      this.importData({ file: this.file, model: this.model })
    },
    close () {
      this.setModalImportVisible(false)
    }
  }
}
</script>

<style>
.vm-select--options {
  z-index: 400331 !important;
}
a {
  cursor: pointer;
}
</style>
