<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>
      <re-table
        :selection="
          ($AC.haveOneOfScope([
            $AC.scopes.MILITARY_COMMISSAR,
            $AC.scopes.SYSTEM_ADMINISTRATOR,
          ]) &&
            'multiple') ||
          'none'
        "
        :selected.sync="selected"
        :loading="loading"
        :data="data"
        :columns="columns"
        :pagination.sync="pagination"
        :check-selectable="checkStatuses"
        @request="onRequest"
        :rows-per-page-options="[10, 25, 50, 100]"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop, Watch } from 'vue-property-decorator';
import { SortingOption, UrlQueryParams } from '@/recruits/models';
import {
  PersonRegistryApi,
  SearchRecruitsResponseWithList,
} from '@/recruits/openapi/person-registry';
import { formatDate } from '@/recruits/utils';
import ReTable from '@/recruits/components/common/r-table/index.vue';
import SortBar from '@/recruits/components/common/sort-bar.vue';
import SearchBar from '@/recruits/components/for-cancel-registration/search-bar.vue';

import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import { RTableColumn } from '@/interfaces';
import { prepareApiParams } from '@/recruits/utils/prepare-api-params';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';

@Component({
  methods: {
    formatDate,
  },
  components: {
    SortBar,
    SearchBar,
    ReTable,
  },
})
export default class ForCuncelingRegistration extends Mixins(
  UrlIntegratedSearch
) {
  RecruitApi = new PersonRegistryApi();

  public filter = new SearchFilterUtils();

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

  columns: RTableColumn<SearchRecruitsResponseWithList>[] = [
    {
      name: 'person',
      fullLabel: 'Данные гражданина',
      width: '300px',
      fields: [
        {
          label: 'ФИО',
          name: 'fullName',
          field: 'fullName',
          componentPath: 'link',
          width: '100%',
          componentOptions: {
            route: 'recruit-personal',
          },
        },
        {
          label: 'ИД ЕРН',
          name: 'idern',
          field: 'idern',
          width: 'auto',
          // type: 'gray-numbrts',
        },
      ],
      align: 'left',
    },
    {
      label: 'Адрес регистрации',
      name: 'regAddress',
      field: 'regAddress',
      width: '2fr',
      align: 'left',
      type: 'address',
      // style: 'font-size: 14px; line-height: 16px;',
    },
    {
      label: 'Статус',
      name: 'status',
      field: 'status',
      width: '200px',
      align: 'center',
      borderless: true,
      collaps: true,
      componentPath: 'status-box',
      componentOptions: {
        type: 'recruit',
      },
      // class: 'text-grey',
    },
  ];

  selected: Array<SearchRecruitsResponseWithList> = [];

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

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

  @Watch('selected')
  rowSelected(val: unknown[]): void {
    this.$emit('row-selected', val);
  }

  @Prop()
  resetSelect: boolean;

  @Watch('resetSelect')
  resetSelectedRows(val: boolean): void {
    if (val) {
      this.selected = [];
    }
  }

  public checkStatuses(row?: SearchRecruitsResponseWithList): boolean {
    if (!row?.status) return false;
    return ['14', '8.15'].includes(row?.status);
  }
}
</script>

<style lang="scss" scoped>
.RTable::v-deep {
  .q-table__top {
    padding-left: 0;
    padding-right: 0;
  }
  .RTable-Row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .RTable-Col_Collaps {
    margin: 0 0 !important;
  }
  .date-time {
    color: rgba(2, 12, 18, 0.9) !important;
  }
}

.flip-icon::v-deep {
  i {
    transform: scaleX(-1);
  }
}
</style>
