<template>
  <q-card class="no-shadow">
    <template v-if="response">
      <q-card-section>
        <v-json-editor
          v-model="response"
          class="full-height q-mb-sm"
          :options="{
            mode: 'code',
            mainMenuBar: false,
            onEditable: () => false,
          }"
        />
      </q-card-section>
      <q-separator />
    </template>

    <q-card-section v-if="isChild">
      <span class="text-subtitle1">Экранная форма ответа</span>
      <ScreenFormEditor
        schema="Interagency"
        :form-id="formId"
        form-key="formResponse"
        :parent-linked-object="childInteragency"
        @change="onFormIdChange"
      />
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
// @ts-ignore
import VJsonEditor from 'v-jsoneditor';
import { Component, Prop, Vue } from 'vue-property-decorator';
import ScreenFormEditor from '../screen-form-editor.vue';

@Component({
  components: {
    ScreenFormEditor,
    VJsonEditor,
  },
})
export default class ResponseTab extends Vue {
  @Prop() model: any;

  formId = '';

  mounted() {
    this.formId = this.model.formResponse?.id;
  }

  get isChild() {
    return !!this.$route.params.parentId;
  }

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

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

  onFormIdChange(id: string) {
    this.formId = id;
    this.$emit('update-form-id', id);
  }
}
</script>

<style scoped></style>