<template>
  <div class="ace-container" style="height:88%">
    <!-- 官方文档中使用 id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
    <div class="ace-editor" ref="ace" style="max-height:100%;height:100%"></div>
  </div>
</template>
<script>
import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/theme-xcode"; // 默认设置的主题
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
import beautify from "ace-builds/src-noconflict/ext-beautify"; // 默认设置的语言模式

export default {
  mounted() {
    this.aceEditor = ace.edit(this.$refs.ace, {
      maxLines: 46, // 最大行数，超过会自动出现滚动条
      minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      fontSize: 14, // 编辑器内字体大小
      theme: this.themePath, // 默认设置的主题
      mode: this.modePath, // 默认设置的语言模式
      tabSize: 4, // 制表符设置为 4 个空格大小
    wrap:true,
      value: this.value ? this.value : "",
    });
    // 激活自动提示
    this.aceEditor.setOptions({
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true,
    });
    this.aceEditor.getSession().on("change", this.change);
    console.log(beautify)
    beautify.beautify(this.aceEditor.getSession()); 
  },
  props: ["value"],
  data() {
    return {
      aceEditor: null,
      themePath: "ace/theme/xcode", // 不导入 webpack-resolver，该模块路径会报错
      modePath: "ace/mode/json", // 同上
    };
  },
  methods: {
    change() {
      this.$emit("input", this.aceEditor.getSession().getValue());
    },
  },
};
</script>
<style scoped>
</style>
