<template>
  <editor
    v-model="editorValue"
    @setCompletions="setCompletions"
    @init="initEditor"
    :lang="mode"
    :theme="'chrome'"
    width="100%"
    height="100%"
  />
</template>

<script>
export default {
  data() {
    return {
      editorValue: this.initEditorValue, //编辑器内容
    };
  },
  components: {
    editor: require("vue-ace-editor-compate")
  },
  props: {
    initEditorValue: {
      type: String,
      default: ""
    },
    //智能语法提示自定义字符集
    customMetas: {
      type: Array,
      default: () => {
        return [{ meta: "", value: "" }];
      }
    },
    //模式
    mode: {
      type: String,
      default: "sql"
    }
  },
  methods: {
    //ace自定义提示文字列表
    setCompletions(editor, session, pos, prefix, callback) {
      if (prefix.length === 0) {
        return callback(null, []);
      } else {
        return callback(null, this.customMetas);
      }
    },
    //ace编辑器初始化设置需要的模式和主题
    initEditor() {
      require(`brace/mode/${this.mode}`);
      require("brace/theme/chrome");
      require("brace/ext/emmet");
      require("brace/ext/language_tools");
    }
  },
  watch: {
    initEditorValue: function() {
      this.editorValue = this.initEditorValue;
    },
    editorValue: function() {
      this.$emit("handleEvent", this.editorValue);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
::v-deep.ace-chrome {
  background-color: #f5f5f5;
  .ace_print-margin-layer {
    display: none;
  }
}
</style>
