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

<template>
  <q-form @submit="submit">
    <div v-if="!readonly" class="q-gutter-y-md">
      <div class="row q-gutter-x-md">
        <div class="col q-gutter-y-md">
          <q-select
            v-model="senderRole"
            :options="senderRoles"
            map-options
            emit-value
            filled
            :label="$t('senderRole')"
          />
        </div>
      </div>
      <div class="row q-gutter-x-md">
        <div class="col-xs-12 col-sm q-mr-sm-md">
          <q-input
            v-model="senderId"
            filled
            :label="$t('senderId')"
            unmasked-value
            :rules="[urnFormatRule]"
          />
        </div>
        <div class="col-xs-12 col-sm q-mt-xs-md q-mt-sm-none">
          <q-input
            v-model="originatorId"
            filled
            :label="$t('originatorId')"
            unmasked-value
            :rules="[urnFormatRule]"
          />
        </div>
      </div>

      <q-btn
        v-if="!inputData.isEditProcess"
        color="primary"
        :label="$t('send')"
        type="submit"
      />
      <div v-if="inputData.isEditProcess" class="row q-gutter-y-md">
        <q-btn
          class="col-xs-12 col-sm-auto"
          color="primary"
          :label="$t('cancel')"
          type="button"
          outline
          @click="cancelProcess"
        />
        <q-btn
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          color="primary"
          :label="$t('save')"
          type="submit"
        />
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { urnFormatRule } from '@utils/field-validation/organizations';
import isPlainObject from 'lodash/isPlainObject';

@Component({
  methods: {
    urnFormatRule,
  },
})
export default class OrganizationsFromGisGmp extends Vue {
  @Prop() readonly inputData: any;
  @Prop() readonly readonly: boolean;

  id = '';
  senderRoles = [];
  senderRole = '';
  senderId = '';
  originatorId = '';

  private created() {
    this.setDictionaryValues('gisgmp_sender_role', this.senderRoles);
  }

  @Watch('inputData', { immediate: true })
  private inputDataUpdate(val: any) {
    const organization = val.organization;

    if (organization) {
      this.id = organization.id;

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

      this.senderId = organization.senderId || '';
      this.originatorId = organization.originatorId || '';
    }
  }

  private setDictionaryValues(id: string, data: any, valueName = 'value') {
    this.$store
      .dispatch('registryService/referenceBooks/fetchReferenceBook', {
        id,
        limit: 200,
      })
      .then((dict) => {
        if (isPlainObject(dict)) {
          // eslint-disable-next-line array-callback-return
          Object.entries(dict).map(([key, value]: [string, any]) => {
            data.push({
              value: key,
              label: value[valueName] || '',
            });
          });
        }
      });
  }

  private submit(e: any): void {
    this.$emit('submit', e, this.outputData);
  }

  private cancelProcess(e: any): void {
    this.$emit('submit', e, {
      transExit: true,
    });
  }

  private get outputData() {
    return {
      organization: {
        id: this.id,
        senderRole: this.senderRole,
        senderId: this.senderId,
        originatorId: this.originatorId,
      },
      transExit: false,
    };
  }
}
</script>
