<template>
  <div class="SubpoenaSigning">
    <div class="SubpoenaSigning__MaxWidth">
      <search-bar v-model="filter" @search="executeSearch" :loading="loading" />
    </div>
    <div class="SubpoenaSigning__MaxWidth">
      <sort-bar
        v-model="sortButtons"
        :pagination="pagination"
        @click="handleSortClick"
        :loading="loading"
      />
    </div>
    <div class="SubpoenaSigning__MaxWidth">
      <data-table
        :loading="loading"
        :data="data"
        :pagination.sync="pagination"
        @request="onRequest"
        @row-selected="rowSelected"
        :resetSelect="resetter"
        :rows-per-page-options="[10, 25, 50, 100]"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.SubpoenaSigning {
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  &__MaxWidth {
    height: auto;
    width: 100%;
  }
}
</style>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator';
import {
  BatchSigning,
  PersonRegistryApi,
} from '@/recruits/openapi/person-registry';

import SortBar from '@/recruits/components/common/sort-bar.vue';
import { SortingOption, UrlQueryParams } from '@/recruits/models';
import DataTable from './data-table.vue';
import SearchBar from './search-bar.vue';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';
import { prepareApiParams } from '@/recruits/utils/prepare-api-params';
import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import { QPagination } from '@models/models-ui';
import {
  SubpoenaListResponseV1,
  SubpoenaRegistryApi,
} from '@/recruits/openapi/subpoena-service';

interface ISortField extends BatchSigning {
  number: string;
}

@Component({
  components: {
    DataTable,
    SearchBar,
    SortBar,
  },
})
export default class RegistrationSigning extends Mixins(UrlIntegratedSearch) {
  @Prop()
  resetSelect: boolean;

  SubpoenaRegistry = new SubpoenaRegistryApi();
  RecruitApi = new PersonRegistryApi();
  pagination: QPagination = {
    sortBy: '',
    descending: false,
    page: 1,
    rowsPerPage: 25,
  };

  public sortButtons: Array<SortingOption<ISortField>> = [
    { label: 'По ФИО', value: 'fullName' },
    { label: 'По дате рождения', value: 'birthDate' },
    { label: 'По ИД ЕРН', value: 'idERN' },
    { label: 'По статусу', value: 'status' },
    { label: 'По номеру', value: 'number' },
  ];

  public filter = new SearchFilterUtils();
  public data: Array<SubpoenaListResponseV1> | undefined = [];

  get resetter(): string {
    return (
      String(this.resetSelect) +
      this.pagination.page +
      this.pagination.rowsPerPage
    );
  }

  public async fetchData(
    query: UrlQueryParams
  ): Promise<{ totalRows: number | undefined }> {
    const params = prepareApiParams(query);
    const { data } = await this.SubpoenaRegistry.getSubpoenasV1(params);
    this.data = data.data || [];
    this.$emit('data-loading', { data: this.data, loading: false });
    return {
      totalRows: data.totalRows,
    };
  }

  rowSelected(val: string[]): void {
    this.$emit('row-selected', val);
  }
}
</script>
