<template>
  <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, unref } from 'vue';
  import jsoneditor from 'jsoneditor';
  import 'jsoneditor/dist/jsoneditor.min.css';

  // json 以及初始化JSON
  const jsoneditorRef = ref();

  const jsonValue = ref({});

  const jsonInstance = ref();

  onMounted(() => {
    nextTick(() => {
      let options = {
        mode: 'code',
        mainMenuBar: false,
        statusBar: false,
      };
      let editor = new jsoneditor(jsoneditorRef.value, options);
      editor.set(jsonValue.value);
      jsonInstance.value = editor;
    });
  });

  const getJsonValue = () => unref(jsonInstance).get();

  const setJsonValue = (Json) => {
    nextTick(() => {
      unref(jsonInstance).set(Json);
    });
  };

  defineExpose({
    getJsonValue,
    setJsonValue,
    jsonInstance,
  });
</script>

<style>
  .jsoneditor {
    border: none;
  }
</style>