<template>
  <div ref="code" class="code-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/editor.main.js";

// javascript依赖包，提供代码语法解析及代码高亮等功能
// import "monaco-editor/esm/vs/language/css/monaco.contribution.js";
// import "monaco-editor/esm/vs/language/html/monaco.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/css/css.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/html/html.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/less/less.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/go/go.contribution.js";
 import "monaco-editor/esm/vs/basic-languages/java/java.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/python/python.contribution.js";
import "monaco-editor/esm/vs/basic-languages/xml/xml.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/scala/scala.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js";
// import "monaco-editor/esm/vs/basic-languages/csharp/csharp.contribution.js";
import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.js";

export default {
  name: "CodeEditor",
    model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    height: {
      type: [String, Number],
      default: 300,
    },
    width: {
      type: [String, Number],
      default: 300,
    },
    value: {
      type: String,
      default: () => {
        return ``;
      },
    },
    language: {
      type: String,
      default: "javascript",
    },
    theme:{
      type: String,
      default:"vs-dark"
    },
    autoFormat:{
      type: Boolean,
      default:false
    }
  },
  data() {
    return {
      monacoEditor: null,
      defaultOptions: {
        language: "javascript", // json、less
        theme: "vs-dark",
        fontSize: "14px",
        isMonospace: true,
        zoomLevel: 100,
        wordWrap: "on",
        lineNumbers:"on",
        useTabStops: true,
        formatOnType: true,
        automaticLayout: true, // resize自动布局
        overviewRulerBorder: false, // 不要滚动条的边框
        foldingStrategy: 'indentation', // 代码可分小段折叠
        autoIndent: true, // 自动缩进
         minimap: {
          enabled: false, // 不要小地图
        },
        // readOnly: true, // 只读
      },
    };
  },
  watch: {

    options: {
      handler() {
        this.initEditor();
      },
      deep: true,
    },
    value: {
      handler(nv,ov) {

        if(this.monacoEditor){
          if(this.monacoEditor.getValue() != nv){

            this.monacoEditor.setValue(nv);
            this.autoFormat&&this.formatDoc();

            //console.log("editor.setValue---")
          }
        }else{
          try {
            this.initEditor();
          } catch (e) {
            console.log(e);
          }
        }

      },
    },
    language: {
      handler() {
        this.initEditor();
      },
    },
  },
  methods: {
    initEditor() {
      //console.log("init---")
      const { defaultOptions, options, value, language,theme } = this;
      const root = this.$refs.code;
      /* 销毁之前的编辑器 */
      if (this.monacoEditor) {
        this.monacoEditor.dispose();
      }
      const monacoOptions = Object.assign(defaultOptions, options);
      this.monacoEditor = monaco.editor.create(root, {
        ...monacoOptions,
        value: value,
        language: language,
        theme
      });


    this.formatDoc();
      this.monacoEditor.onDidChangeModelContent(() => {
        this.$emit("input", this.monacoEditor.getValue());
        this.$emit("change", this.monacoEditor.getValue());

      });

      //var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
      //console.log(modesIds);
      //var actions = require('monaco-editor/esm/vs/editor/browser/editorExtensions.js').EditorExtensionsRegistry.getEditorActions();
      //console.log(actions);
    },
    /* 父组件调用获取值 */
    getValue() {
      return this.monacoEditor.getValue();
    },
    /* 动态切换语言 */
    setLanguage(language) {
      this.monacoEditor.setModelLanguage(
        this.monacoEditor.getModel(),
        language
      );
    },
    /* 格式化代码 */
    formatDoc() {

      if(this.monacoEditor){
          this.monacoEditor.trigger('anyString','editor.action.formatDocument');
        }
    },
  },
  mounted() {
    this.initEditor();
    /* 实时获取编辑器内容 */
  },
  beforeDestory() {
    this.monacoEditor.dispose();
  },
};
</script>

<style lang="less" scoped>
.code-editor {
  min-height: 300px;
  // border: 1px solid #ccc;
  margin-left: -15px;
}

</style>