<template>
  <div>
    <search-bar v-model="filter" :loading="loading" @search="executeSearch" />
    <sort-bar
      v-model="sortButtons"
      :pagination="pagination"
      :loading="loading"
      @click="handleSortClick"
    />
    <re-table
      :data="data"
      :columns="columns"
      :loading="loading"
      :pagination.sync="pagination"
      :rows-per-page-options="[10, 25, 50, 100]"
      @request="onRequest"
    />
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import {
  NotificationsGepsObjectV2,
  TemplatePrefillServiceApi,
} from '@/recruits/openapi/template-prefill';
import ReTable from '@/recruits/components/common/r-table/index.vue';
import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import { SortingOption, UrlQueryParams } from '@/recruits/models';
import { RTableColumn } from '@/interfaces';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';
import { prepareApiParams } from '@/recruits/utils/prepare-api-params';
import SortBar from '@/recruits/components/common/sort-bar.vue';
import SearchBar from './search-bar.vue';
import { snils } from '@/utils/masks';

@Component({
  components: {
    SortBar,
    ReTable,
    SearchBar,
  },
})
export default class GepsNotifications extends Mixins(UrlIntegratedSearch) {
  TemplatePrefillServiceApi = new TemplatePrefillServiceApi();

  public data: Array<NotificationsGepsObjectV2> | undefined = [];
  public filter = new SearchFilterUtils();
  public sortButtons: Array<SortingOption<NotificationsGepsObjectV2>> = [
    { label: 'По ФИО', value: 'fullName' },
    { label: 'По ИД ЕРН', value: 'systemIdErn' },
    { label: 'По СНИЛС', value: 'snils' },
    { label: 'По статусу', value: 'status' },
  ];

  public async fetchData(
    query: UrlQueryParams
  ): Promise<{ totalRows: number | undefined }> {
    const params = prepareApiParams(query);
    const {
      data,
    } = await this.TemplatePrefillServiceApi.getGEPSNotificationsV1(params);
    this.data = data.data || [];
    return {
      totalRows: data.totalRows,
    };
  }

  get columns(): RTableColumn<Array<NotificationsGepsObjectV2>>[] {
    return [
      {
        name: 'person',
        fullLabel: 'Данные гражданина',
        fields: [
          {
            label: 'ФИО',
            name: 'fullName',
            field: 'fullName',
            width: '100%',
            componentPath: 'link',
            componentOptions: {
              route: 'recruit-personal',
              routeParams: (row: any) => ({ id: row.recruitId }),
            },
          },
          {
            label: 'ИД ЕРН',
            name: 'idern',
            field: 'systemIdErn',
            width: 'auto',
          },
          {
            label: 'СНИЛС',
            name: 'snils',
            field: 'snils',
            width: '50%',
            format: (row: any) => snils(row),
          },
        ],
        width: '0.8fr',
        align: 'left',
        borderless: true,
      },
      {
        label: 'Тип уведомления',
        name: 'type',
        field: 'type',
        width: '0.5fr',
        align: 'center',
        borderless: true,
        collaps: true,
        componentPath: 'status-box',
        componentOptions: {
          type: 'typeGeps',
        },
      },
      {
        label: 'Дата и время отправки',
        name: 'sendDate',
        field: 'sendDate',
        width: '0.5fr',
        align: 'center',
        componentPath: 'date-time',
        componentOptions: {
          time: true,
        },
      },
      {
        label: 'Дата и время получения',
        name: 'receiveDate',
        field: 'receiveDate',
        width: '0.5fr',
        align: 'center',
        componentPath: 'date-time',
        borderless: true,
        componentOptions: {
          time: true,
        },
      },
      {
        label: 'Статус',
        name: 'status',
        field: 'status',
        width: '0.5fr',
        align: 'center',
        borderless: true,
        collaps: true,
        componentPath: 'status-box',
        componentOptions: {
          type: 'statusGeps',
        },
      },
    ];
  }
}
</script>
