<template>
  <div class="main">
    <div id="edit">

    </div>
    <div id="result">

    </div>
    <el-button class="submit" @click="submit" :loading="loading">提交</el-button>
  </div>
</template>

<script>
@import("/static/css/jsoneditor.min.css")
@import("/static/js/jsoneditor.min.js")
export default {
  name: "kibana",
  data() {
    return {
      loading:false,
      editor: null,
      result: null
    }
  },
  created() {},
  methods: {
    submit(){
      const data = {
        json:this.editor.get()
      };
      console.log(data)
      this.loading = true;
      ajax().post('/kibana.result',data).then(res=>{
        console.log(res)
        this.loading = false;
        this.result.set(res);
      })
    }
  },
  mounted() {

    this.editor = new JSONEditor(document.getElementById("edit"), {
      mode:"code",
      enableSort: false,
      enableTransform: false,
    });

    this.result = new JSONEditor(document.getElementById("result"), {
      mode:"code",
      enableSort: false,
      enableTransform: false,
      editable : false,
      mainMenuBar : false
    });

  }
}
</script>

<style scoped>
.main{
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#edit{
  width: 50%;
}
#result{
  width: 50%;
}
.submit{
  position: fixed;
  top: 2px;
  left: calc(50% - 82px);
  z-index: 9999;
  width: 80px;
}
</style>