<template>
  <q-card class="full-width no-shadow">
    <q-tabs
      v-model="tab"
      no-caps
      outside-arrows
      mobile-arrows
      class="text-blue-10"
    >
      <q-tab name="table" label="Таблица" />
      <q-tab name="json" label="JSON" />
    </q-tabs>

    <q-card-section class="full-width q-pa-none">
      <JsonEditor
        :mode="tab === 'table' ? 'tree' : 'code'"
        :value="value"
        @input="(v) => $emit('input', v)"
        :should-update-key="true"
      />
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import JsonEditor from '@/components/common/json-editor-with-errors.vue';

@Component({
  components: {
    JsonEditor,
  },
})
export default class Mapping extends Vue {
  @Prop({ required: true }) value: any;

  tab = 'json';
}
</script>
