<template>
  <codemirror ref="codeEdit"
              :options="cmOptions"
              v-model="_value"
              @input="inputChange"
              class="code"/>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 引入主题 可以从 codemirror/theme/ 下引入多个
import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
import 'vue-codemirror/node_modules/codemirror/theme/duotone-dark.css'
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
import "vue-codemirror/node_modules/codemirror/mode/sql/sql"; // 代码高亮必须引入
//代码补全
import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.css';
import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.js';

// 代码段折叠功能
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldcode'
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter'
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter.css'

import 'vue-codemirror/node_modules/codemirror/addon/fold/brace-fold'
import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold'
import 'vue-codemirror/node_modules/codemirror/addon/fold/xml-fold.js';
import 'vue-codemirror/node_modules/codemirror/addon/fold/indent-fold.js';
import 'vue-codemirror/node_modules/codemirror/addon/fold/markdown-fold.js';
import 'vue-codemirror/node_modules/codemirror/addon/fold/comment-fold.js';

export default {
  name: "CodeEdit",
  components:{codemirror},
  props:{
    value:{
      type:String,
      default:"",
    }
  },
  data(){
    return {
      code:"",
      cmOptions:{
        tabSize: 4, // tab
        indentUnit: 2,
        mode: 'javascript', // 模式
        theme: 'idea', // 主题
        lineNumbers: true, // 是否显示行号
        lineWrapping: true,//是否自动换行
        styleActiveLine: true, // 高亮选中行
        highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        line: true,
        matchBrackets: true,
        // 自动括号匹配功能
        showCursorWhenSelecting: false,
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        foldGutter: true, // 支持折叠
        extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
        gutters: ['CodeMirror-linenumbers', "lock", "warn"],
      },
    }
  },
  computed:{
    _value :{
      get(){
        return this.value;
      },
      set(val){
        this.value = val;
      }
    }
  },
  mounted() {
    this.$refs.codeEdit.codemirror.on("inputRead",(cm)=>{
      cm.showHint();
    })
    this.$refs.codeEdit.codemirror.on("change", (cm) => {
      this._value = cm.getValue()
      this.$emit("input",this._value)
    })
  },
  methods:{
  }
}
</script>

<style scoped>

</style>
