<template>
  <div class="ui-csv-select-file bg-background">
    <div class="text-h4 q-mb-lg">Импорт {{ fileName }} завершен</div>
    <div class="q-mt-lg">
      <table class="ui-csv-import-info-table">
        <tr v-for="row in rows" :key="row.label">
          <td
            class="ui-csv-import-info-td"
            :class="{ 'ui-csv-import-info-td_accent': row.isError }"
          >
            {{ row.label }}
          </td>
          <td
            class="ui-csv-import-info-td"
            :class="{ 'ui-csv-import-info-td_accent': row.isError }"
          >
            {{ row.value }}
          </td>
        </tr>
      </table>
    </div>
    <div class="q-mt-lg">
      <ui-btn @click="close" size="lg" label="Закрыть" />
    </div>
  </div>
</template>

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

@Component({
  components: { UiBtn },
  inheritAttrs: false,
})
export default class UiCsvImportInfo extends Vue {
  @Prop({ type: String, required: true }) fileName!: string
  @Prop({ type: Number, required: true }) createdAt!: number
  @Prop({ type: Number, required: true }) processedTime!: number
  @Prop({ type: Number, required: true }) rowsCount!: number
  @Prop({ type: Number, required: true }) errorRowsCount!: number
  @Prop({ type: String, required: true }) managerFullName!: string

  get rows(): { label: string; value: number | string; isError?: true }[] {
    return [
      { label: 'Дата загрузки', value: DateHelper.format(this.createdAt) },
      { label: 'Обновлен за', value: this.processedTime },
      { label: 'Всего записей в файле', value: this.rowsCount },
      {
        label: 'Строк без ошибок',
        value: this.rowsCount,
      },
      {
        label: 'Строк с ошибками',
        value: this.rowsCount - this.errorRowsCount,
        isError: true,
      },
      { label: 'Сотрудник', value: this.managerFullName },
    ]
  }

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