<template>
  <div class="q-gutter-y-md q-mx-md q-mt-md">
    <template v-if="model && parentInteragency">
      <Header
        :is-changed="isChanged"
        :go-back-func="onBack"
        :edit-mode="editMode"
        :model="model"
        @set-edit-mode="(v) => (editMode = v)"
        @saved="onSaved"
      />

      <!-- PARENT INTERAGENCY REQUEST DATA -->
      <div class="bg-white q-pa-md rounded-borders q-col-gutter-y-sm">
        <base-label-value padded-label class="items-center">
          <template v-slot:label>{{ $t('base.table.id') }}</template>
          <template v-slot:value>
            {{ model.id }}
          </template>
        </base-label-value>
        <template v-if="editMode">
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('interagencies.class') }}</template>
            <template v-slot:value>
              <q-input
                v-model="model.clazz"
                map-options
                emit-value
                option-value="label"
              />
            </template>
          </base-label-value>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('base.table.title') }}</template>
            <template v-slot:value>
              <q-input
                v-model="model.requestName"
                map-options
                emit-value
                option-value="label"
              />
            </template>
          </base-label-value>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('base.table.description') }}</template>
            <template v-slot:value>
              <q-input
                v-model="model.description"
                map-options
                emit-value
                option-value="label"
              />
            </template>
          </base-label-value>
        </template>
        <template v-else>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('interagencies.class') }}</template>
            <template v-slot:value>
              {{ model.clazz }}
            </template>
          </base-label-value>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('base.table.title') }}</template>
            <template v-slot:value>
              {{ model.requestName }}
            </template>
          </base-label-value>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>{{ $t('base.table.description') }}</template>
            <template v-slot:value>
              {{ model.description }}
            </template>
          </base-label-value>
          <base-label-value padded-label class="items-center">
            <template v-slot:label>xsl-сценарий</template>
            <template v-slot:value>
              <InteragencyAttachmentsBtn
                :attachments="model.attachments"
                :interagency-id="parentInteragency.id"
                :multiple="false"
                @set-attachments="setAttachments"
              />
            </template>
          </base-label-value>
        </template>
      </div>

      <!-- CHILD INTERAGENCY REQUEST DATA -->
      <child-interagency-table :data="parentInteragency.childrenInteragency" @sync="getCurrentInteragency" />
    </template>

    <q-inner-loading :showing="!model">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>

<script lang="ts">
import ReturnToParentView from '@mixins/ReturnToParentView';
import isEqual from 'lodash/isEqual';
import { Component, Mixins } from 'vue-property-decorator';
import ChildInteragencyTable from './child-interagency-table.vue';
import { notifyError } from '@/utils/notify';
import Header from '../header.vue';
import InteragencyAttachmentsBtn from '../interagency-attachments-btn.vue';

@Component({
  components: {
    ChildInteragencyTable,
    Header,
    InteragencyAttachmentsBtn,
  },
})
export default class ParentInteragency extends Mixins(ReturnToParentView) {
  model: any = null;
  editMode = false;

  mounted() {
    this.getCurrentInteragency();
  }

  get parentInteragency() {
    return this.$store.getters[
      'registryService/interagencies/getParentInteragency'
    ];
  }

  async getCurrentInteragency() {
    const id = this.$route.params.id;
    try {
      this.model = await this.$store.dispatch(
        'registryService/interagencies/getParentInteragencyById',
        id
      );
    } catch (e) {
      if (e instanceof Error) {
        notifyError(e.message);
      }
    }
  }

  get isChanged() {
    return !isEqual(this.parentInteragency, this.model);
  }

  onBack() {
    this.returnToParentView('/interagency-requests');
  }

  async onSaved() {
    this.model = await this.$store.dispatch(
      'registryService/interagencies/getParentInteragencyById',
      this.model.id
    );
  }

  setAttachments(data: any[]) {
    this.model.attachments = data;
    this.$store.commit('registryService/interagencies/setParentInteragency', {
      ...this.parentInteragency,
      attachments: data,
    });
  }
}
</script>

<style scoped></style>