<template>
  <q-card v-if="interagency && model" class="no-shadow">
    <q-card-section class="q-pt-none">
      <Spoiler :expand-title="$t('interagencies.bpmnProcessSpoilerBtn')">
        <ProcessEditor
          locked-type="MzBPMNTemplate"
          :template="model.bpmnTemplate"
        />
      </Spoiler>
      <q-separator />
    </q-card-section>

    <q-card-section class="q-pt-none">
      <Spoiler :expand-title="$t('interagencies.mockResponsesSpoilerBtn')">
        <MockResponsesManager
          :clazz="interagency.clazz"
          :mock-response="model.mockResponse"
          @change="(response) => $emit('set-mock-response', response)"
        />
      </Spoiler>
      <q-separator />
    </q-card-section>

    <q-card-section class="q-pt-none row items-center">
      <span class="text-subtitle1">HTML-шаблон</span>
      <InteragencyAttachmentsBtn
        :attachments="model.attachments"
        :interagency-id="interagency.id"
        extensions=".html"
        :multiple="false"
        @set-attachments="setAttachments"
      />
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import MockResponsesManager from '@/components/common/mock-responses-manager.vue';
import Spoiler from '@/components/common/spoiler.vue';
import ProcessEditor from '../process-editor.vue';
import InteragencyAttachmentsBtn from '../interagency-attachments-btn.vue';

@Component({
  components: {
    MockResponsesManager,
    Spoiler,
    ProcessEditor,
    InteragencyAttachmentsBtn,
  },
})
export default class TemplatesTab extends Vue {
  @Prop() interagency: any;
  @Prop() model: any;

  setAttachments(data: any[]) {
    this.$emit('set-attachments', data);
    this.$store.commit('registryService/interagencies/setChildInteragency', {
      ...this.interagency,
      attachments: data,
    });
  }
}
</script>

<style scoped></style>