<template>
  <div style="height: 800px">
    <codemirror ref="codeMirror" v-model="code" :value="code" :options="cmOptions"  style="height: 800px"/>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'

import 'codemirror/mode/clike/clike';
// cm-setting.js
// 组件样式
import 'codemirror/lib/codemirror.css';
// 主题
import 'codemirror/theme/eclipse.css';
// html代码高亮
import 'codemirror/mode/htmlmixed/htmlmixed.js';

// 语言模式
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/xml/xml.js';
// 代码展开折叠
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/brace-fold.js';

export default {
  components: {
    codemirror,
  },
  props: {
    value: {
      default: "",
      type: String
    },
    readOnly: {
      default: false,
      type: Boolean
    }
  },
  watch:{
    'code':{
      handler(val){
        if (val != null){
          console.log(this.$emit('input',val))
        }
      }
    }
  },
  name: "Encoding",
  data() {
    return {
      codemirror: null,
      code: this.value,
      cmOptions: {
        autoRefresh: true, // 重点是这句，为true
        value: '', // 初始内容
        mode: 'text/x-java', //实现Java代码高亮
        tabSize: 4, // tab的空格宽度
        styleActiveLine: true, // 设置光标所在行高亮true/false
        lineNumbers: true, //显示行号
        theme: 'eclipse', //设置主题cobalt/monokai
        // json: true,
        readOnly: this.readOnly, // 设置为只读true/false;也可设置为"nocursor"失去焦点
        lineWrapping: false,
        foldGutter: true,
        gutters: [
          'CodeMirror-lint-markers', //代码错误检测
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter', //展开折叠
        ],
      },
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style>

.CodeMirror {
  font-family: 'JetBrainsMono-Medium', monospace;
  height: 500px;
}

.CodeMirror-lines {
  line-height: 1.5; /* 这里的1.5是示例，表示行间距是字体大小的1.5倍 */
}
</style>
