<template>
  <div class="q-pb-md" v-if="common.active === 'solutions'">
    <q-card class="no-shadow q-pb-md q-gutter-y-md q-mx-md" v-if="!loading">
      <div class="q-mx-md">
        <div class="q-pb-md">
          <BaseTable
            class="no-shadow text-grey-9"
            :show-toggle-my="false"
            row-key="id"
            :columns="columns"
            :data="solutions"
            :pagination.sync="pagination"
            :title="$t('departments.SolutionsCard.title')"
            @requestTable="initSolutions"
            @update="initSolutions"
          />
        </div>
      </div>
    </q-card>
    <div style="padding: 200px" v-if="loading">
      <q-inner-loading :showing="loading">
        <q-spinner-gears color="primary" size="50px" />
      </q-inner-loading>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { BaseCardCommon } from '@interfaces/components';
import { LinksApi as LinksApiIdm, Solution } from '@openapi/idm';
import { TablePagination } from '@models/base/TablePagination';
import QColumn from '@/types/QColumn';
import { notifyError } from '@utils/notify';

const linksApiIdm = new LinksApiIdm();

@Component({})
export default class DeparpentCardSolutions extends Vue {
  @Prop({}) private common?: BaseCardCommon;
  @Prop({}) private model?: any;

  private pagination = new TablePagination();
  private loading = false;

  private solutions: Array<any> = [];

  private organisationId = '';

  private get columns(): Array<QColumn> {
    return [
      {
        align: 'left',
        field: 'name',
        label: this.$t('departments.SolutionsCard.columns.name'),
        name: 'name',
        sortable: true,
      },
      {
        align: 'left',
        field: 'description',
        label: this.$t('departments.SolutionsCard.columns.description'),
        name: 'description',
        sortable: true,
      },
    ];
  }

  private async initSolutions(): Promise<void> {
    this.loading = true;
    const solutionsPaging = await linksApiIdm
      .searchLinks('Organization', this.organisationId, 'Solution')
      .catch((e) => {
        notifyError(e.toString());
      });
    // @ts-ignore
    this.solutions = solutionsPaging?.data || [];
    this.loading = false;
  }

  @Watch('model', {
    immediate: true,
  })
  async modelWatcher() {
    if (this.model?.parent) {
      this.organisationId = this.model.parent.id ?? '';
      this.initSolutions();
    }
  }
}
</script>
