<template>
  <vue-json-editor
    v-model="inputValue"
    :showBtns="false"
    :mode="'code'"
    :lang="'zh'"
    :expanded-on-start="true"
    style="height: 100%"
    @json-change="onJsonChange"
    @json-save="onJsonSave"
    @has-error="onError"
  />
</template>

<script>
// 导入模块
import VueJsonEditor from 'vue-json-editor'

export default {
  name: 'CmsJsonEditor',
  // 注册组件
  components: { VueJsonEditor },
  data() {
    return {
      hasJsonFlag: true,  // json是否验证通过
      // json数据
      resultInfo: {
        'employees': [
          {
            'firstName': 'Bill',
            'lastName': 'Gates'
          },
          {
            'firstName': 'George',
            'lastName': 'Bush'
          },
          {
            'firstName': 'Thomas',
            'lastName': 'Carter'
          }
        ]
      }
    }
  },
  mounted: function () {
  },
  methods: {
    onJsonChange(value) {
      // 实时保存
      this.onJsonSave(value)
    },
    onJsonSave(value) {
      this.inputValue = value
      this.hasJsonFlag = true
    },
    onError(value) {
      // console.log("json错误了value:", value);
      this.hasJsonFlag = false
    },
    // 检查json
    checkJson() {
      return new Promise((resolve) => {
        debugger;
        if (!this.inputValue) {
          resolve(true)
        } else {
          if (this.hasJsonFlag === false) {
            resolve(false)
          } else {
            resolve(true)
          }
        }
      })
    },
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value);
      }
    },
  },
  props: {
    value: {
      type: [ Object, Array ],
      default: () => {
        return {}
      }
    }
  },
}
</script>

<style>
.ace_content, .jsoneditor-vue {
  height: 100% !important;
}

.jsoneditor-poweredBy {
  display: none;
}
</style>
