<i18n>
{
  "en": {
    "SolutionsCard": {
      "columns": {
        "description": "Description",
        "name": "Name"
      },
      "edit": "Edit",
      "tab": "Solutions",
      "title": "Solutions"
    }
  },
  "ru": {
    "SolutionsCard": {
      "columns": {
        "description": "Описание",
        "name": "Наименование"
      },
      "edit": "Редактировать",
      "tab": "Приложения",
      "title": "Приложения"
    }
  }
}
</i18n>

<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('SolutionsCard.title')"
            @requestTable="initSolutions"
            @update="initSolutions"
          />
          <q-btn
            unelevated
            color="primary"
            @click="editAssignSolutions"
            :label="$t('SolutionsCard.edit')"
            type="button"
          />
        </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">
// @ts-nocheck
import { LinksApi } from '@openapi/idm';
import get from 'lodash/get';

const linksApi = new LinksApi();

export default {
  props: ['common', 'model'],
  data() {
    return {
      organization: {
        dialogDelete: false,
        fullname: '',
        id: '',
      },
      pagination: {
        descending: true,
        page: 1,
        rowsNumber: 0,
        rowsPerPage: 10,
        sortBy: 'modified',
      },
      loading: false,
      solutions: [],
    };
  },
  computed: {
    columns() {
      return [
        {
          align: 'left',
          field: 'name',
          label: this.$t('SolutionsCard.columns.name'),
          name: 'name',
          sortable: true,
        },
        {
          align: 'left',
          field: 'description',
          label: this.$t('SolutionsCard.columns.description'),
          name: 'description',
          sortable: true,
        },
      ];
    },
    outputData() {
      return {};
    },
  },
  watch: {
    model: {
      handler: function (val) {
        if (val) {
          if (val.solutions) {
            this.solutions = val.solutions;
          }
          if (val.fullname) {
            this.organization.fullname = val.fullname;
          }
          if (val.id) {
            this.organization.id = val.id;
            this.initSolutions();
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    editAssignSolutions() {
      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'AssignSolutionToOrganizationProcess',
        data: {
          organizationId: this.organization.id,
        },
      });
      this.loading = true;
    },
    initSolutions(data) {
      const pagination = get(data, 'pagination')
        ? data.pagination
        : this.pagination;

      linksApi
        .pagingLinks(
          'Organization',
          this.common.id,
          'Solution',
          pagination.page,
          pagination.rowsPerPage
        )
        .then(({ data }) => {
          this.solutions = data.records || [];
          this.pagination.rowsNumber = data.totalRows;
          this.pagination.page = data.page;
          this.pagination.rowsPerPage = data.perPage;
        })
        .catch(() => {
          throw new Error(
            '[components][cards][organizations][Solutions][linksApi]'
          );
        });
    },
  },
};
</script>
