<template>
  <div class="bg-white q-pa-md rounded-borders">
    <base-table
      v-model="pagination.search"
      :columns="columns"
      :data="records"
      :use-search="true"
      :pagination.sync="pagination"
      :loading="loading"
      :hide-refresh="true"
      @update="getInteragencies"
      @requestTable="getInteragencies"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import QColumn from '@/types/QColumn';
import { pushRoute } from '@utils/routes';
import { Interagency, InteragencyApi } from '@openapi/registry-service';
import isEmpty from 'lodash/isEmpty';
import { generateParentInteragencySearchQuery } from '../../utils';
import { notifyError } from '@/utils/notify';
import axios from 'axios';

const sortByDefault = 'modified';
const interagencyApi = new InteragencyApi();

@Component
export default class extends Vue {
  columns: QColumn[] = [
    {
      name: 'id',
      label: this.$t('base.table.id'),
      field: (val: any) => val,
      formatField: 'id',
      align: 'left',
      handler: (id: string, opts?: any) => {
        pushRoute(
          this.$router,
          {
            name: 'parent-interagency-page',
            params: {
              id,
            },
          },
          opts?.targetBlank
        );
      },
      handlerField: 'id',
    },
    {
      name: 'requestName',
      label: this.$t('base.table.title'),
      field: 'requestName',
      align: 'left',
      sortable: true,
    },
  ];
  pagination = {
    descending:
      this.$route.query.descending === undefined
        ? true
        : this.$route.query.descending === 'true',
    rowsPerPage: this.$route.query.rowsPerPage
      ? Number(this.$route.query.rowsPerPage)
      : 10,
    sortBy: this.$route.query.sortBy ? this.$route.query.sortBy : sortByDefault,
    rowsNumber: 0,
    page: this.$route.query.page ? Number(this.$route.query.page) : 1,
    search: this.$route.query.search ? this.$route.query.search : '',
  };
  loading: boolean = false;
  records: Interagency[] = [];

  async getInteragencies(val: any = null) {
    if (val?.pagination) {
      this.pagination = val.pagination;
    } else if (!isEmpty(val)) {
      this.pagination = val;
    }
    this.loading = true;
    const response = await interagencyApi
      .pagingInteragency(
        this.pagination.page,
        this.pagination.rowsPerPage,
        generateParentInteragencySearchQuery(
          this.columns.map(c => c.name!),
          '' + this.pagination.search
        ),
        '',
        `${this.pagination.descending ? '-' : '+'}${this.pagination.sortBy}`,
        ''
      )
      .catch((e) => {
        if (e instanceof Error) {
          notifyError(e.message);
        } else if (axios.isAxiosError(e)) {
          notifyError(e.response?.data?.message);
        }
      })
      .finally(() => (this.loading = false));
    if (!response || !response.data) {
      return;
    }
    this.records = response.data.records!;
    this.pagination.rowsNumber = response.data.totalRows!;
  }

  mounted() {
    this.getInteragencies();
  }
}
</script>

<style scoped></style>