<i18n>
{
  "ru": {
    "incidents": {
      "title": "Список заявлений, которые не были импортированы в ПГС",
      "resendTriesСount": "Всего попыток",
      "lastTryTime": "Последняя попытка",
      "id": "Идентификатор"
    }
  },
  "en": {
    "incidents": {
      "title": "List of statements that have not been ported to GSP",
      "resendTriesСount": "Total attempts",
      "lastTryTime": "Last try time",
      "id": "ID"
    }
  }
}
</i18n>

<template>
  <BaseTable
    v-model="filter.search"
    :columns="columns"
    :data="model"
    :loading="loading"
    :pagination.sync="filter.pagination"
    :selected="selectedItems"
    :visible-columns="visibleColumns"
    selection="multiple"
    saveQuery
    @requestTable="$emit('updatePagination', $event)"
    @update:selected="selectedItems = $event"
  >
    <template #top>
      <div class="column full-width">
        <slot name="top">
          <div class="row q-my-md">
            <div class="q-table__control">
              <div class="q-table__title">
                {{ $t('incidents.title') }}
              </div>
            </div>
            <q-space />
            <div>
              <span>{{ $tc('statements.name') }}</span>
              <span style="display: inline-block">
                <div class="q-pl-md">МВЗ</div>
                <q-toggle
                  toggle-indeterminate
                  v-model="isPetitionToggleActive"
                  label="Потерянный статус"
                  @input="$emit('reload')"
                />
              </span>
            </div>
          </div>
        </slot>
      </div>
    </template>
    <template v-slot:search>
      <a ref="csvLink" />
      <search-bar
        @updateFilter="$emit('updatePagination', filter)"
        @search="$emit('search', $event)"
        :tableFilter.sync="filter"
      />
    </template>
  </BaseTable>
</template>

<script lang="ts">
import { Component, Vue, PropSync, Prop } from 'vue-property-decorator';
import SearchBar from './searchBar.vue';
import type QColumn from '@/types/QColumn';
import type { Incident } from '@components/incidents/types';
import { convertDateFromBackendFormat } from '@utils/format-date';
import { DateFormat } from '@constants/utils/format-date';
import { TableFilter } from '@models/base/TableFilter';

@Component({
  components: {
    SearchBar,
  },
})
export default class IncidentsTable extends Vue {
  @PropSync('selected', { type: Array }) selectedItems: Incident[];
  @PropSync('toggle') isPetitionToggleActive: boolean | null;
  @PropSync('tableFilter', { type: Object }) filter: TableFilter;
  @Prop() model: Incident[];
  @Prop() loading: boolean;

  columns: QColumn[] = [
    {
      align: 'left',
      label: this.$t('statements.id'),
      name: 'orderId',
      field: 'orderId',
      required: false,
    },
    {
      align: 'left',
      label: this.$t('incidents.id'),
      name: 'id',
      field: 'id',
      required: false,
    },
    {
      align: 'left',
      label: this.$t('base.labels.class'),
      name: 'className',
      field: 'className',
    },
    {
      align: 'left',
      label: this.$tc('date.name', 0),
      format: (val: any) =>
        convertDateFromBackendFormat(val || 1, DateFormat.date),
      name: 'timestamp',
      field: 'timestamp',
    },
    {
      align: 'left',
      label: this.$t('incidents.resendTriesСount'),
      format: (val: any) => String(val),
      name: 'resendTries.count',
      field: 'resendTries.count',
    },
    {
      align: 'left',
      label: this.$t('incidents.lastTryTime'),
      format: (val: any) => convertDateFromBackendFormat(val, DateFormat.date),
      name: 'resendTries.lastTryTime',
      field: 'resendTries.lastTryTime',
    },
  ];

  private get visibleColumns(): Array<string> {
    const baseColumns = [
      'className',
      'timestamp',
      'resendTries.count',
      'resendTries.lastTryTime',
    ];
    if (this.isPetitionToggleActive === false) {
      baseColumns.push('orderId');
    } else {
      baseColumns.push('id');
    }
    return baseColumns;
  }
}
</script>
