<template>
  <div class="q-pa-md q-col-gutter-y-md redesigned Lists">
    <div class="row Lists-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"
        :pagination.sync="pagination"
        @request="onRequest"
        @refresh="refresh"
        @addLink="addLink"
        @addOpis="addOpis"
        @loadingList="loadingList"
        @disabledList="disabledList"
        @extend-list="extendList"
        :rows-per-page-options="[10, 25, 50, 100]"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import { SortingOption, UrlQueryParams } from '@/recruits/models';
import SortBar from '@/recruits/components/common/sort-bar.vue';
import DataTable from './data-table.vue';
import {
  SummonListRegistryApi,
  ListRecordV2,
} from '@/recruits/openapi/summon-list-service';
import SearchBar from './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';

interface IListOptions {
  merge?: string;
  opis?: string;
  loading?: boolean;
  extend?: boolean;
  disabled?: boolean;
}

@Component({
  components: {
    DataTable,
    SortBar,
    SearchBar,
  },
})
export default class CallLists extends Mixins(UrlIntegratedSearch) {
  SummonListRegistryApi = new SummonListRegistryApi();

  public filter = new SearchFilterUtils();

  public data: Array<ListRecordV2 & IListOptions> | undefined = [];

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

  public sortButtons: Array<SortingOption<ListRecordV2>> = [
    { label: 'По номеру', value: 'number' },
    { label: 'По причине вызова', value: 'summonObjective' },
    { label: 'По дате вызова', value: 'turnoutDate' },
    { label: 'По дате формирования', value: 'createDate' },
    { label: 'По кол-ву записей', value: 'freeCount' },
    { label: 'По статусу', value: 'status' },
  ];

  addLink({ listId, s3Url }: { listId: string; s3Url: string }) {
    this.data = this.data?.map((e) => {
      if (e.id === listId) e.merge = s3Url;
      return e;
    });
  }

  addOpis({ listId, s3Url }: { listId: string; s3Url: string }) {
    this.data = this.data?.map((e) => {
      if (e.id === listId) e.opis = s3Url;
      return e;
    });
  }

  loadingList({ listId, loading }: { listId: string; loading: boolean }) {
    this.data = this.data?.map((e) => {
      if (e.id === listId) e.loading = loading;
      return e;
    });
  }

  disabledList({ listId, disabled }: { listId: string; disabled: boolean }) {
    this.data = this.data?.map((e) => {
      if (e.id === listId) e.disabled = disabled;
      return e;
    });
  }

  extendList(listId: string) {
    this.data = this.data?.map((e) => {
      if (e.id === listId) e.extend = !e?.extend;
      return e;
    });
  }

  public refresh(): void {
    this.fetchData({
      page: this.$route.query.page || '1',
      perpage: this.$route.query.perpage || '10',
    } as UrlQueryParams);
  }
}
</script>

<style lang="scss" scoped>
.Lists {
  &-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>
