<i18n>
{
  "en": {
    "senderId": "Organization identifier in GIS GMP",
    "originatorId": "URN of the participant of indirect interaction that formed the entity",
    "senderRole": "Sender role",
    "edit": "Edit"
  },
  "ru": {
    "senderId": "Идентификатор организации в ГИС ГМП",
    "originatorId": "УРН участника косвенного взаимодействия, сформировавшего сущность",
    "senderRole": "Роль организации в ГИС ГМП",
    "edit": "Редактировать"
  }
}
</i18n>

<template>
  <div v-if="common.active === 'gis_gmp' && !loading" class="q-pb-md">
    <q-card class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div class="q-mx-md">
        <div class="q-py-md">
          <table class="text-primary">
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('senderId') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ senderId }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('originatorId') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      {{ originatorId }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
            <tr>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label class="text-grey-9">
                      {{ $t('senderRole') }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
              <td>
                <q-item>
                  <q-item-section>
                    <q-item-label>
                      <reference-book-item
                        dictionary="gisgmp_sender_role"
                        :value="senderRole"
                      />
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </td>
            </tr>
          </table>

          <q-btn
            class="q-mx-md q-mt-md"
            unelevated
            color="primary"
            :label="$t('edit')"
            type="button"
            @click="edit"
          />
        </div>
      </div>
    </q-card>
    <q-inner-loading :showing="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { BaseCardCommon } from '@/interfaces';

@Component
export default class GisGmp extends Vue {
  @Prop() readonly common: BaseCardCommon;
  @Prop() readonly model: any;

  senderId = '';
  originatorId = '';
  senderRole = '';

  @Watch('model')
  private updateModel(val: any): void {
    if (val.senderId) {
      this.senderId = val.senderId;
    }

    if (val.originatorId) {
      this.originatorId = val.originatorId;
    }

    if (val.senderRole) {
      this.senderRole = val.senderRole;
    }
  }

  private async edit() {
    try {
      await this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'EditOrganizationsIDMGisGmpProcess',
        data: {
          organizationId: this.common.id,
        },
      });
    } catch (e) {
      console.log('[Start process error]', e);
    }
  }

  private get card(): any {
    return this.$store.getters['idm/organizations/organizationsCard'] || null;
  }

  private get loading(): boolean {
    return this.card === null;
  }
}
</script>
