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

<script lang="ts">
import {Component, Mixins, Prop} from 'vue-property-decorator';
import DataTable from '@/recruits/components/registered/data-table.vue';
import { SortingOption, UrlQueryParams} from '@/recruits/models';
import {
  PersonRegistryApi, SearchRecruitsResponseWithRegistration,
} from '@/recruits/openapi/person-registry';
import SortBar from '@/recruits/components/common/sort-bar.vue';
import SearchBar from '@/recruits/components/registered/search-bar.vue';

import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import { SearchFilterUtils } from "@/recruits/utils/search-filter";
import { prepareApiParams } from "@/recruits/utils/prepare-api-params";
import {QPagination} from "@models/models-ui";

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

  RecruitApi = new PersonRegistryApi();

  public filter = new SearchFilterUtils();

  pagination: QPagination = {
    sortBy: '',
    descending: false,
    page: 1,
    rowsPerPage: 25,
  };

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

  public data: Array<SearchRecruitsResponseWithRegistration> | undefined = [];

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

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

<style lang="scss" scoped>
.Registered {
  &-Header {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
  }
}
.flip-icon::v-deep {
  i {
    transform: scaleX(-1);
  }
}
</style>
