<template>
  <div style="height: 800px">
<!--       <el-button type="danger" @click="test">编译执行</el-button>-->
    <codemirror ref="codeMirror" :value="code" :options="cmOptions" @input="handleCodeMirrorInput"    style="height: 200px"/>

  </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';
// import 'codemirror/theme/monokai.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';
import {testCompile} from "@/api/ruleEngine/ruleEngine";
export default {
  components: {
    codemirror,
  },
  props: {
    ruleInfo: {
      default: "",
      type: String
    },
    readOnly: {
      default: false,
      type: Boolean
    }
  },
  watch: {
    ruleInfo: {
      handler(newVal,oldValue){

      }
    }
  },
  name: "Encoding",
  data() {
    return {
      codemirror: null,
      code: this.ruleInfo,
      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: false, // 设置为只读true/false;也可设置为"nocursor"失去焦点
        lineWrapping: false,
        foldGutter: true,
        gutters: [
          'CodeMirror-lint-markers', //代码错误检测
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter', //展开折叠
        ],
      },
    }
  },
  created() {
  },
  methods: {
    test() {
      console.log(this.cmOptions.value)
      testCompile(this.ruleInfo).then(
        res => {
          this.$message.success("编译执行成功!");
        }
      )
    },
    handleCodeMirrorInput(newValue) {
      // 当 CodeMirror 组件的内容变化时，这个函数会被调用
      // newValue 参数将包含新的代码内容
      this.ruleInfo = newValue // 如果你需要更新父组件的 data 属性来反映新值
      this.$emit('transmit', this.ruleInfo)

    },
  }
}
</script>

<style>

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

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