<template>
  <div
    ref="container"
    class="monaco-editor"
    :style="`height: ${height}px`"
  ></div>
</template>

<script>
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import "monaco-editor/esm/vs/editor/contrib/find/browser/findController"; // 引入查找控件
import "monaco-editor/esm/vs/editor/contrib/format/browser/format"
export default {
  name: "MonacoeditorView",
  props: {
    opts: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: Number,
      default: 300,
    },
    isDiff: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 主要配置
      defaultOpts: {
        value: "", // 编辑器的值
        theme: "vs-dark",
        language: "json",
        links: false,
        readOnly: true,
        cursorStyle: true ? "underline-thin" : "line",
        lineNumbers: "on",
        contextmenu: false,
        // set fontsize and family to avoid cursor offset
        fontSize: 14,
        showFoldingControls: "always",
        // auto layout, performance cost
        automaticLayout: true,
        wordWrap: "on",
        // long text indent when wrapped
        wrappingIndent: "indent",
        // cursor line highlight
        renderLineHighlight: "none",
        // highlight word when cursor in
        occurrencesHighlight: false,
        // disable scroll one page at last line
        scrollBeyondLastLine: false,
        // hide scroll sign of current line
        hideCursorInOverviewRuler: true,
        minimap: {
          enabled: false,
        },
        // vertical line
        guides: {
          indentation: false,
          highlightActiveIndentation: false,
        },
        scrollbar: {
          useShadows: false,
          verticalScrollbarSize: "9px",
          horizontalScrollbarSize: "9px",
        },
      },
      // 编辑器对象
      monacoEditor: {},
      oldValue: "",
      newValue: "",
    };
  },
  watch: {
    opts: {
      handler() {
        this.reload();
      },
      deep: true,
    },
  },
  methods: {
    reload() {
      if (this.monacoEditor) {
        this.monacoEditor.updateOptions(Object.assign(this.defaultOpts, this.opts))
      }
    },
    edit(val){
        this.init();
        this.monacoEditor.setValue(val)
    },
    init() {
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = "";
      // 生成编辑器配置
      let editorOptions = Object.assign(this.defaultOpts, this.opts);
      // 初始化编辑器实例
      this.monacoEditor = monaco.editor.create(
        this.$refs.container,
        editorOptions
      );
      // 编辑器内容发生改变时触发
      this.monacoEditor.onDidChangeModelContent(() => {
        this.$emit("change", this.monacoEditor.getValue());
      });
    },
    upDateDiff(val) {
      this.monacoDiffInstance.updateOptions({
        renderSideBySide: !val,
      });
    },
    // 供父组件调用手动获取值
    getVal() {
      return this.monacoEditor.getValue();
    },
  },
};
</script>
<style scoped>
.text-formated-container .monaco-editor-con {
  min-height: 150px;
  height: calc(100vh - 730px);
  clear: both;
  overflow: hidden;
  background: none;
}
/*recovery collapse icon font in monaco*/
.text-formated-container .monaco-editor .codicon {
  font-family: codicon !important;
}

/*change default scrollbar style*/
.text-formated-container .monaco-editor .scrollbar {
  background: #eaeaea;
  border-radius: 4px;
}
.dark-mode .text-formated-container .monaco-editor .scrollbar {
  background: #475156;
}
.text-formated-container .monaco-editor .scrollbar:hover {
  background: #e0e0dd;
}
.dark-mode .text-formated-container .monaco-editor .scrollbar:hover {
  background: #565656;
}

.text-formated-container .monaco-editor-con .monaco-editor .slider {
  border-radius: 4px;
  background: #c1c1c1;
}
.dark-mode .text-formated-container .monaco-editor-con .monaco-editor .slider {
  background: #5d676d;
}
.text-formated-container .monaco-editor-con .monaco-editor .slider:hover {
  background: #7d7d7d;
}

/*remove background color*/
.text-formated-container .monaco-editor .margin {
  background-color: inherit;
}
.monaco-editor-con .monaco-editor,
.monaco-editor-con .monaco-editor-background,
.monaco-editor-con .monaco-editor .inputarea.ime-input {
  background-color: inherit;
}

/*json key color*/
.monaco-editor-con .mtk4 {
  color: #111111;
}
.dark-mode .monaco-editor-con .mtk4 {
  color: #ebebec;
}
/*json val string color*/
.monaco-editor-con .mtk5 {
  color: #42b983;
}
/*json val number color*/
.monaco-editor-con .mtk6 {
  color: #fc1e70;
}
/*json bracket color*/
.monaco-editor-con .mtk9 {
  color: #111111;
}
/*json bracket color*/
.dark-mode .monaco-editor-con .mtk9 {
  color: #b6b6b9;
}

/* common string in json editor*/
.monaco-editor-con .mtk1 {
  color: #606266;
}
.dark-mode .monaco-editor-con .mtk1 {
  color: #f3f3f4;
}
</style>

