<template>
  <div>
    <search-bar v-model='filter' :loading='loading' @search='executeSearch' />
    <re-table
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination.sync="pagination"
      :rows-per-page-options="[10, 25, 50, 100]"
      @request="onRequest"
    />
  </div>
</template>

<script lang='ts'>
import { Component, Mixins } from 'vue-property-decorator';
import UrlIntegratedSearch from '@/recruits/mixins/url-integrated-search';
import SearchBar from './search-bar.vue';
import ReTable from '@/recruits/components/common/r-table/index.vue';
import { AnalyticalUnitsFilter } from '@/recruits/components/analytical-units/search-filter';
import { FileUpload, SchedulerServiceApi } from '@/recruits/openapi/ervu-service';
import { UrlQueryParams } from '@/recruits/models';
import { RTableColumn } from '@/interfaces';
import { fetchDocumentAttachment } from '@utils/fetch-document-attachment';

const API = new SchedulerServiceApi();
@Component({
  components: { SearchBar, ReTable }
})
export default class AnalyticalUnits extends Mixins(UrlIntegratedSearch) {

  filter = new AnalyticalUnitsFilter();
  data: FileUpload[] = [];

  get columns(): RTableColumn<AnalyticalUnitsFilter>[] {
    return [
      {
        label: 'Дата и время',
        name: 'date',
        field: 'date',
        width: '180px',
        align: 'left',
        borderless: true,
        componentPath: 'date-time',
        componentOptions: {
          time: true,
        },
      },
      {
        label: 'Наименование БД',
        name: 'databaseName',
        field: 'databaseName',
        width: '150px',
        align: 'center',
        borderless: true,
      },
      {
        label: 'Файл',
        name: 'file',
        field: 'file.s3Name',
        align: 'left',
        borderless: true,
        componentPath: 'icon-text-pair',
        componentOptions: {
          icon: 'pgs-file-plus',
          align: 'left',
          iconColor: 'black',
        },
      },
      {
        label: 'Действия',
        name: 'actions',
        width: '110px',
        align: 'right',
        componentPath: 'action-buttons',
        componentOptions: {
          actions: [
            {
              icon: 'pgs-export',
              color: 'primary',
              tooltipText: 'Скачать',
              cb: this.downloadFile,
            }
          ]
        },
      },
    ]
  }

  async fetchData(
    query: UrlQueryParams
  ): Promise<{ totalRows: number | undefined }> {
    const { data } = await API.getFileUploads(
      {
        pagination: {
          sortBy: query.sortby,
          descending: query.descending ? query.descending === 'true' : undefined,
          page: Number(query.page),
          rowsPerPage: Number(query.perpage)
        },
        search: this.filter.prepareRequestParams()
      }
    );
    this.data = data.data || [];
    return {
      totalRows: data.totalRows
    };
  }

  async downloadFile({ file }: FileUpload): Promise<void> {
    try {
      await fetchDocumentAttachment(
        file,
        'download',
        's3Name',
        's3Url'
      );
    } catch (e) {
      if (e) {
        this.$q.notify({
          color: 'negative',
          icon: 'error',
          message: (e as Error)?.message ?? e,
        });
      }
    }
  }
}
</script>