<template>
  <div class="schema_content">
    <div class="project-name">
      <!-- <p>{{ $route.matched[1].meta.title }}</p> -->
    </div>
      <el-row :gutter="20">
        <el-col :span="9">
          <div class="grid-content ">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              resize="none"
              v-model="jsontext">
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content btnGroup">
            <el-button type="primary" @click="toSchema">--></el-button>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
              <el-input
              type="textarea"
              placeholder="Schema"
              :readonly="readonly"
              resize="none"
              v-model="schematext">
            </el-input>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>

// import { querySqlBuilderList , deleteSqlBuilder} from '@/api/esb_global_management'
import { jsonToSchema } from '@/api/esb_global_management'

export default {
  components: {
  },
  data() {
    return {
      jsontext: '',
      schematext: '',
      readonly: true
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    toSchema() {
      console.log(this.jsontext)
      console.log(typeof this.jsontext)
      jsonToSchema({
        // jsonStr: JSON.stringify(obj)
        jsonStr: this.jsontext
      }).then((rt) => {
        if (rt.status === '200') {
          this.schematext = rt.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.schema_content{
  margin: 10px 10px;
}
</style>
<style type="text/scss" lang="scss" >
.schema_content{
  background-color: #ffffff;
  overflow: hidden;
  font-size: 20px;
  padding: 20px;
}
.grid-content .el-textarea__inner{
height: calc(100vh - 166px);
}
</style>

<style type="text/scss" lang="scss" scoped>
.btnGroup{
  text-align: center;
  padding-top: calc((100vh - 166px)/2 - 12px);
}
</style>
