<template>
  <monaco-editor v-model="code"
                 :read-only="disabled"
                 :language="language"
                 :options="options"
                 :height="height"></monaco-editor>
</template>

<script>
import MonacoEditor from '../../utils/monaco-editor'
export default {
  components: { MonacoEditor },
  data () {
    return {
      code: '',
      options: {
        fontSize: 14
      }
    }
  },
  props: {
    language: String,
    disabled: Boolean,
    height: {
      type: [String, Number],
      default: 400
    },
    value: {
      type: [String, Object, Array],
      default: ''
    }
  },
  watch: {
    code (val) {
      this.$emit('input', val);
    },
    value: {
      handler (val) {
        if (['object', 'array'].includes(typeof val)) {
          this.code = JSON.stringify(val, null, 4);
        } else {
          this.code = val;
        }
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>
<style >
.monaco_editor_container {
  margin-top: 30px;
}
</style>
