<template>
  <div class="q-pa-md q-col-gutter-y-md archive-page">
    <div class="row q-gutter-sm justify-between">
      <div class="col-12 col-sm section-header">Архив</div>
    </div>
    <search-bar v-model="filter" @search="executeSearch" :loading="loading" />
    <sort-bar
      v-model="sortButtons"
      :pagination="pagination"
      @click="handleSortClick"
      :loading="loading"
    />
    <data-table
      :loading="loading"
      :data="data"
      :pagination.sync="pagination"
      @request="onRequest"
      :rows-per-page-options="[10, 25, 50, 100]"
    />
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import DataTable from '@/recruits/components/archive/data-table.vue';
import SearchBar from '@/recruits/components/archive/search-bar.vue';
import { QPagination } from '@models/models-ui';
import { SortingOption, UrlQueryParams } from '@/recruits/models';
import { PersonArchiveApi } from '@/recruits/openapi/person-archive';
import { SearchRecruitsResponseWithReasonWithdrawal } from '@/recruits/interfaces/deprecated/search-recruits-response-with-reason-withdrawal';
import SortBar from '@/recruits/components/common/sort-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';

@Component({
  components: {
    DataTable,
    SortBar,
    SearchBar,
  },
})
export default class Archive extends Mixins(UrlIntegratedSearch) {
  ArchiveApi = new PersonArchiveApi();
  pagination: QPagination = {
    sortBy: 'createdAt',
    descending: true,
    page: 1,
    rowsPerPage: 10,
    rowsNumber: 1000,
  };

  sortButtons: Array<
    SortingOption<SearchRecruitsResponseWithReasonWithdrawal>
  > = [
    { label: 'По дате архивации', value: 'createdAt' },
    { label: 'По ФИО', value: 'fullName' },
    { label: 'По дате рождения', value: 'birthDate' },
    { label: 'По ИД ЕРН', value: 'idERN' },
    { label: 'По причине архивации', value: 'reasonWithdrawal' },
    { label: 'По СНИЛС', value: 'snils' },
  ];

  public data: SearchRecruitsResponseWithReasonWithdrawal[] | undefined = [];
  public filter = new SearchFilterUtils();

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

<style lang="scss" scoped>
.section-header {
  font-family: 'Golos Text', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: rgba(2, 12, 18, 0.9);
}

.archive-page {
  // max-height: calc(100vh - 50px);
  overflow: auto;
  display: grid;
  grid-template-rows: min-content min-content min-content 1fr;
}
</style>
