<template>
  <BaseTable
    :data="value"
    :columns="columns"
    :useSearch="false"
    title="Список услуг"
    :loading="loading"
    @requestTable="tableRequestHandler"
    @update="() => {}"
    saveQuery
    :isOrganizationServices="true"
  >
  </BaseTable>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import type { BaseCardCommon, TableColumn } from '@/interfaces/components';
import { pushRoute } from '@utils/routes';
import { USER_SCOPES } from '@constants/entities/Scope';
import { Service } from '@openapi/registry-service';
import { TableFilter } from '@models/base/TableFilter';

@Component
export default class OrganisationsServicesTable extends Vue {
  @Prop() common: BaseCardCommon;
  @Prop() value: Service[];
  @Prop() loading: boolean;
  filter: TableFilter = {
    pagination: {
      page: this.$route.query.page ? Number(this.$route.query.page) : 1,
      rowsNumber: 0,
      rowsPerPage: this.$route.query.rowsPerPage
        ? Number(this.$route.query.rowsPerPage)
        : 10,
    },
  };

  tableRequestHandler(filter: TableFilter): void {
    this.$set(this, 'filter', filter);
  }

  private columns: TableColumn<Service>[] = [
    {
      name: 'shortName',
      label: this.$t('base.labels.shortName'),
      align: 'left',
      style: 'white-space: normal;',
      isDisable: !this.$AC.haveScope(USER_SCOPES.CLOUD_ADMIN),
      field: (row: Service) => row,
      formatField: 'shortName',
      handler: (row, options) => {
        pushRoute(
          this.$router,
          {
            name: 'cards',
            params: {
              id: (row as Service).id,
              path: 'services',
            },
            query: {
              active: 'basic',
              components: this.$store.getters[
                'cardComponents/services/components'
              ],
            },
          },
          options?.targetBlank
        );
      },
    },
    {
      name: 'fullName',
      label: this.$t('base.labels.fullName'),
      align: 'left',
      field: 'fullName',
      style: 'white-space: normal;',
    },
    {
      name: 'petitionType',
      label: this.$t('entities.service.type'),
      align: 'left',
      field: 'petitionType',
      style: 'white-space: normal;',
    },
  ];
}
</script>
