<template>
  <div class="bg-background">
    <div class="q-pa-lg">
      <div class="text-h4 q-mb-lg">{{ fileName }} готов к импорту</div>

      <div class="flex text-blue-grey">
        <div class="ui-csv-import__total">
          <span>Всего {{ entityName }}</span>
          <div class="text-dark q-mx-sm">{{ formattedRowCount }}</div>
        </div>
        <div class="ui-csv-import__total">
          <span class="q-ml-sm">Без ошибок</span>
          <div class="text-dark q-mx-sm">{{ formattedRowWithoutErrors }}</div>
        </div>
        <div class="text-negative flex no-wrap">
          <span class="q-ml-sm">С ошибкой</span>
          <div class="q-mx-sm">{{ formattedErrorsCount }}</div>
        </div>
      </div>

      <div class="q-mt-md" style="max-width: 900px;">
        Показаны первые 1000 {{ entityName }} из загруженного файла. Убедитесь,
        что данные отображаются корректно и соотвутсвуют данным в файле. После,
        нажмите кнопку импортировать.
      </div>
    </div>

    <q-separator />

    <ui-bar>
      <ui-bar-btn-save @click="save" />
      <ui-bar-btn-cancel @click="cancel" />

      <template slot="after">
        <ui-bar-btn-toggle
          v-if="filterValue"
          v-model="filterValue"
          :options="filterOptions"
        />
      </template>
    </ui-bar>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue } from 'vue-property-decorator'
import Formatter from '../../helpers/Formatter'
import UiFormControls from '../composite/UiFormControls.vue'
import { QSeparator } from 'quasar'
import UiBtn from '../buttons/UiBtn.vue'
import UiBar from '@/lib-components/bar/UiBar.vue'
import UiBarBtnSave from '@/lib-components/bar/UiBarBtnSave.vue'
import UiBarBtnCancel from '@/lib-components/bar/UiBarBtnCancel.vue'
import UiBarBtnToggle from '@/lib-components/bar/UiBarBtnToggle.vue'

@Component({
  inheritAttrs: false,
  components: {
    UiBar,
    UiBarBtnSave,
    UiBarBtnCancel,
    UiBarBtnToggle,
    UiBtn,
    UiFormControls,
    QSeparator,
  },
})
export default class UiCsvImport extends Vue {
  @Prop({ type: String, required: true }) fileName!: string
  @Prop({ type: String, required: true }) entityName!: string
  @Prop({ type: Number, required: true }) rowCount!: number
  @Prop(Number) errorsCount?: number
  @PropSync('filter', String) filterValue?: 'valid' | 'invalid'

  get formattedRowCount(): string {
    return Formatter.prettyNumber(this.rowCount)
  }

  get formattedErrorsCount(): string {
    return Formatter.prettyNumber(this.errorsCount ?? 0)
  }

  get formattedRowWithoutErrors(): string {
    return Formatter.prettyNumber(this.rowCount - (this.errorsCount ?? 0))
  }

  get filterOptions() {
    return [
      { label: 'Без ошибок', value: 'valid' },
      { label: 'С ошибкой', value: 'invalid' },
    ]
  }

  @Emit()
  save() {
    return true
  }

  @Emit()
  cancel() {
    return true
  }
}
</script>
