<template>
  <BaseTable
    :columns="columns"
    :data="model.records"
    :loading="model.loading"
    :pagination="model.pagination"
    :selected.sync="model.selected"
    :binary-sort="true"
    selection="multiple"
    @requestTable="updateTableData"
    @update="updateTableData"
  >
    <template v-slot:body-item-xml="props">
      <div class="row no-wrap text-no-wrap float-right">
        <q-btn
          :disable="!props.row.xmlReportLink"
          target="_blank"
          icon="arrow_downward"
          flat
          dense
          size="16"
          style="color: rgba(0, 0, 0, 0.54)"
          color="primary"
          @click="
            fetchDocumentAttachment(
              props.row,
              'download',
              'orderId',
              'xmlReportLink'
            )
          "
        >
          <q-tooltip>
            {{ $t('registries.objectCard.downloadXml') }}
          </q-tooltip>
        </q-btn>
      </div>
    </template>
    <template #top>
      <div class="q-pt-md"></div>
    </template>
    <template #search>
      <UkranianRefugeeSearchBar
        v-if="isUkranianRefugeePositiveDecisionRegistry"
        @save-data="exportRecords"
        @query="search"
        :status-options="ukranianRefugeeStatuses"
      />
      <RegistriesSearchBar
        v-else
        @save-data="exportRecords"
        @query="search"
      />
    </template>
  </BaseTable>
</template>

<script lang="ts">
import { Component, PropSync, Prop, Vue } from 'vue-property-decorator';

import { convertDateFormat } from '@utils/format-date';
import { DateFormat } from '@constants/utils/format-date';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';

import RegistriesSearchBar from '@components/registries/search-bars/search-bar.vue';
import UkranianRefugeeSearchBar from '@components/registries/search-bars/ukranian-refugee-search-bar.vue';
import { Registry } from '@openapi/registry-service';

import { RegistryTableColumn } from '@/models/RegistryTableColumn';
import {
  registryPositiveDecisionId as ukranianRefugeePositiveDecisionRegistryId,
  columns as ukranianRefugeeColumns,
  statuses as ukranianRefugeeStatuses
} from '../constants/ukranianRefugee';

@Component({
  components: {
    RegistriesSearchBar,
    UkranianRefugeeSearchBar,
  },
  methods: {
    fetchDocumentAttachment,
  },
})
export default class BaseList extends Vue {
  @Prop() model: any;
  @Prop() goToRegistryObject: any;
  @Prop() updateTableData: any;
  @Prop() exportRecords: any;
  @Prop() search: any;
  @PropSync('defaultColumns', { default: () => [] }) localDefaultColumns: RegistryTableColumn[];

  firstColumn = {
    align: 'left',
    field(val: Registry) {
      return val;
    },
    format: (val: any) => {
      return val.orderId ?? this.$t('registries.noStatement');
    },
    handler: (id: string, opts = {}) => {
      this.goToRegistryObject(id, opts);
    },
    handlerField: 'id',
    label: this.$t('registries.applicationNumber'),
    name: 'orderId',
    required: true,
    sortable: true,
  };

  lastColumn = {
    align: 'left',
    label: this.$t('signedApplications.actions'),
    name: 'xml',
    field: 'xml',
  };

  get defaultColumnsBySelected() {
    return this.localDefaultColumns.filter(column => !!column.selected);
  }

  get isUkranianRefugeePositiveDecisionRegistry() {
    return this.$route.params.id === ukranianRefugeePositiveDecisionRegistryId;
  }
  ukranianRefugeeStatuses = ukranianRefugeeStatuses;

  get columns() {
    return [
      this.firstColumn,
      ...this.defaultColumnsBySelected.map((column) => {
        let format;

        switch (column.name) {
          case 'finishDate':
          case 'applicationSystem.startDate': {
            format = this.dateFormater;
            break;
          }
          case 'status.internal': {
            format = this.statusFormater;
            break;
          }
          default: {
            format = undefined;
          }
        }

        return {
          align: 'left',
          required: true,
          sortable: true,
          field: column.name,
          name: column.name,
          label: column.label,
          format,
        };
      }),
      this.lastColumn,
    ];
  }

  statusFormater(val: string) {
    const res = this.$store.getters[
      'registryService/referenceBooks/appliedReferenceBook'
    ]({
      key: val,
      id: 'gpzu_2_application_status',
      valueName: 'description',
    });

    return res.value;
  }

  /**
   * Форматер даты
   *
   * Иногда приходит дата в формате 2021-05-01T00:00:00.000+03:00, что приводит к ошибке преобразования.
   * Ошибка встречается в реестре ГПЗУ. Не все реестры протестированы, возможно, встречается где-то еще.
   * Чтобы избежать возможные ошибки, добалена проверка и форматирование соответствующего типа.
   *
   * Требуется переодически проверять необходимость данного форматера и удалить проверку,
   * когда даты с бека будут возвращаться в едином формате
   */
  dateFormater(date: string): string {
    const toFormat = DateFormat.date;
    let fromFormat = DateFormat.invertedDate;

    if (date?.includes('T')) {
      fromFormat = DateFormat.backend;
    } else if (date?.includes('.') && !date?.includes('-')) {
      return date;
    }

    try {
      return convertDateFormat(date, fromFormat, toFormat);
    } catch {
      return '';
    }
  }
}
</script>
