<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('registries.registryOrder.title') }}
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :title="$t('registries.listLabel')"
        :columns="columns"
        :data="model.records"
        :loading="model.loading"
        :pagination.sync="pagination"
        :rows-per-page-options="rowPerPageList"
        :visible-columns="visibleColumns"
        @requestTable="init"
        @update="init"
        saveQuery
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import QColumn from '@/types/QColumn';
import RegistryFormDialog from '@components/registries/registry-form-dialog.vue';
import { pushRoute } from '@utils/routes';
import { RegistryOrder, RegistryOrderApi } from '@openapi/registry-service';
import { notifyError } from '@utils/notify';
import BaseRegistryPage from './base-registry-page.vue';

@Component({
  components: {
    RegistryFormDialog,
  },
})
export default class RegistryOrderPage extends BaseRegistryPage {
  model = {
    loading: false,
    records: [] as RegistryOrder[],
  };

  columns: QColumn[] = [
    {
      align: 'left',
      field: (val: any) => val,
      formatField: 'name',
      handler: (id: string, opts?: any) => {
        pushRoute(
          this.$router,
          {
            name: 'registry-order',
            params: {
              id
            }
          },
          opts?.targetBlank
        );
      },
      handlerField: 'id',
      label: this.$t('registries.name'),
      name: 'name',
      required: true,
      sortable: true,
    },
    {
      align: 'left',
      field: 'description',
      label: this.$t('registries.description'),
      name: 'description',
      required: true,
      classes: ['registries-table__descr-col'],
      sortable: true,
    },
  ];

  pending = 0;

  // Вызывается в родительском классе
  async fetch() {
    if (this.pending) {
      this.pending++;
      return;
    }
    this.pending = 1;

    this.model.loading = true;

    try {
      const paging = await new RegistryOrderApi()
          .pagingRegistryOrder(
            this.pagination.page,
            this.pagination.rowsPerPage,
            undefined,
            undefined,
            this.sort
          )
          .then((it) => it.data);;
      if (paging.totalRows && paging.records) {
        this.pagination.rowsNumber = paging.totalRows;
        this.model.records = paging.records;
      }
    } catch (e) {
      if (e instanceof Error) notifyError(e.message);
    } finally {
      this.model.loading = false;
    }

    if (this.pending > 1) {
      this.pending = 0;
      await this.fetch();
      return;
    }
    this.pending = 0;
  }
}
</script>

<style lang="scss">
.registries-table {
  &__descr-col {
    width: 758px;
    white-space: normal !important;
  }
}
</style>
