<template>
  <div class="json-editor">
    <textarea ref="textarea" />
  </div>
</template>

<script>
// import sqlFormatter from "sql-formatter";
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/sql/sql.js";
// 替换主题这里需修改名称
import "codemirror/theme/idea.css";
// 支持代码自动补全
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";

// JSON代码高亮需要由JavaScript插件支持
import "codemirror/mode/javascript/javascript.js";

// 支持各种代码折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";

// 支持括号自动匹配
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/edit/closebrackets.js";

// 行注释
import "codemirror/addon/comment/comment.js";
// JSON错误检查
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";

export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    height: {
      type: String,
      required: true,
    },
    myMode: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      editor: false,
    };
  },
  watch: {
    value(value) {
      const editorValue = this.editor.getValue();
      if (value !== editorValue) {
        this.editor.setValue(this.value);
      }
    },
    height(value) {
      this.editor.setSize("auto", this.height);
    },
  },
  mounted() {
    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
      mode: this.myMode, //语言
      smartIndent: true, // 是否智能缩进
      styleActiveLine: true, // 当前行高亮
      lineNumbers: true, // 是否显示行数
      indentUnit: 2, // 缩进单位，默认2
      gutters: [
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
        "CodeMirror-lint-markers",      // CodeMirror-lint-markers是实现语法报错功能
      ],
      lint: true,
      //lineWrapping: true, // 自动换行
      matchBrackets: true, // 括号匹配显示
      autoCloseBrackets: true, // 输入和退格时成对
      readOnly: false, // 只读
      foldGutter: true,
      autoRefresh: true
    });
    //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
    this.editor.on("inputRead", () => {
      this.editor.showHint();
    });
    this.editor.setSize("auto", this.height);
    this.editor.setValue(this.value);
  },
  methods: {
    getValue() {
      return this.editor.getValue();
    },
    // formatSql() {
    //   /*（sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
    //   this.content = sqlFormatter.format(this.content);
    // },
  },
};
</script>

<style scoped>
.json-editor {
  height: 100%;
}

.json-editor >>> .CodeMirror {
  font-size: 14px;
  /* overflow-y:auto; */
  font-weight: normal;
}

.json-editor >>> .CodeMirror-scroll {
}

.json-editor >>> .cm-s-rubyblue span.cm-string {
  color: #f08047;
}
</style>