<template>
  <div class="ui-csv-select-file bg-background">
    <div class="text-h4 q-mb-lg">Импорт из CSV файла</div>
    <div>
      Для обновления 1000 и более позиций используйте загрузку через CSV.
      Подготовьте файл и нажмиете “Выбрать файл”. Используйте только те столбцы
      которые хотите обновить. Заголовки столбцов обязательны.
    </div>
    <ui-file-input-btn
      @select-files="selectFile"
      :loading="loading"
      size="lg"
      accept=".csv,.zip"
      class="q-mt-lg"
    />
    <div class="ui-csv-select-file__columns-wrap q-mb-lg">
      <div class="text-h4 q-mb-lg">Поддерживаемые столбцы</div>
      <ui-chip v-for="column in columns" :key="column" color="white">
        {{ column }}
      </ui-chip>
    </div>
    <ui-btn
      outline
      type="a"
      :href="exampleHref"
      label="Пример файла.csv"
      download="example.csv"
    />
    <div class="ui-csv-select-file__list text-blue-grey">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiFileInputBtn from '../form/UiFileInputBtn.vue'
import UiChip from '../UiChip.vue'
import UiBtn from '../buttons/UiBtn.vue'

@Component({
  components: { UiBtn, UiChip, UiFileInputBtn },
  inheritAttrs: false,
})
export default class UiCsvSelectFile extends Vue {
  @Prop({ type: Array, required: true }) columns?: string[]
  @Prop({ type: String, required: true }) exampleHref?: string
  @Prop(Boolean) loading?: boolean

  @Emit()
  selectFile(files: File[]): File {
    return files[0]
  }
}
</script>
