<template>
  <div class="ui-csv-select-file bg-background">
    <div class="text-h4 q-mb-lg">Импорт {{ entityName }} из CSV файла</div>
    <div>
      Импорт может занять продолжительное время. Для обновления
      {{ entityName }} не обязательно оставаться на этой странице. Информацию о
      результате обновления вы увидите в журнале {{ parentEntityName }}.
    </div>
    <div class="q-mt-lg">
      <ui-loading-panel
        @cancel="cancel"
        :progress="progress"
        :description="progressDescription"
        cancelable
        title="Обновление данных"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiLoadingPanel from '../composite/UiLoadingPanel.vue'
import { format } from 'quasar'
const { humanStorageSize } = format

@Component({
  inheritAttrs: false,
  components: { UiLoadingPanel },
})
export default class UiCsvImportProcess extends Vue {
  @Prop({ type: Number, required: true }) progress!: number
  @Prop({ type: String, required: true }) fileName!: string
  @Prop({ type: Number, required: true }) fileSize!: number
  @Prop({ type: String, required: true }) entityName!: string
  @Prop({ type: String, required: true }) parentEntityName!: string

  @Emit()
  cancel() {
    return true
  }

  get progressDescription(): string {
    return `${this.fileName} • ${humanStorageSize(this.fileSize)}`
  }
}
</script>
