<template>
  <el-dialog :title="'查看模板'" :close-on-click-modal="false" :visible.sync="visible">
    <div class="">
      <div class="trainFileWatchContainer">
        <codemirror ref="cm" v-model="code" :options="cmOptions" class="trainFileWatch"></codemirror>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// 全局引入vue-codemirror
import { codemirror } from "vue-codemirror";
// 引入css文件
import "codemirror/lib/codemirror.css";
// 引入主题 可以从 codemirror/theme/ 下引入多个
import "codemirror/theme/idea.css";
// 引入语言模式 可以从 codemirror/mode/ 下引入多个
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/python/python.js";
import "codemirror/mode/javascript/javascript.js";

// 搜索功能
// find：Ctrl-F (PC), Cmd-F (Mac)
// findNext：Ctrl-G (PC), Cmd-G (Mac)
// findPrev：Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
// replace：Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
// replaceAll：Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/dialog/dialog";
import "codemirror/addon/search/searchcursor";
import "codemirror/addon/search/search";
import "codemirror/addon/search/jump-to-line";
import "codemirror/addon/search/matchesonscrollbar";
import "codemirror/addon/search/match-highlighter";

// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/sql-hint";
import "codemirror/addon/hint/anyword-hint";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/lint/javascript-lint.js";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/lint.css";

// 高亮行功能
import "codemirror/addon/selection/active-line";
import "codemirror/addon/selection/selection-pointer";

// 调整scrollbar样式功能
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars";

// 自动括号匹配功能
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/closebrackets";

// 全屏功能 由于项目复杂，自带的全屏功能一般不好使
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/display/fullscreen";

// 显示自动刷新
import "codemirror/addon/display/autorefresh";

// 多语言支持？
import "codemirror/addon/mode/overlay";
import "codemirror/addon/mode/multiplex";

// 代码段折叠功能
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/foldgutter.css";

import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/comment-fold.js";

// merge功能
import "codemirror/addon/merge/merge.css";
import "codemirror/addon/merge/merge";
// google DiffMatchPatch
import DiffMatchPatch from "diff-match-patch";
// DiffMatchPatch config with global
window.diff_match_patch = DiffMatchPatch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;

export default {
  name: "Simple",
  components: {
    codemirror
  },
  data() {
    return {
      visible: false,
      code: "",
      insertCode: "",
      cmOptions: {
        // 语言及语法模式
        mode: "text/x-python",
        // 主题
        theme: "idea",
        //只读
        readOnly: "nocursor",
        // 显示行数
        line: true,
        lineNumbers: true,
        // 软换行
        lineWrapping: true,
        // tab宽度
        tabSize: 4,

        foldGutter: true, // 启用行槽中的代码折叠

        autoCloseBrackets: true, // 自动闭合符号
        styleActiveLine: true, // 显示选中行的样式

        lint: true,
        gutters: [
          "CodeMirror-lint-markers", //代码错误检测
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter" //展开收起
        ],
        hintOptions: {
          // 避免由于提示列表只有一个提示信息时，自动填充
          completeSingle: false,
          // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
          tables: {
            table1: ["c1", "c2"]
          }
        },

        // 高亮行功能
        styleActiveLine: true,
        // 调整scrollbar样式功能
        scrollbarStyle: "overlay",
        // 自动括号匹配功能
        matchBrackets: true
      }
    };
  },
  methods: {
    init(algorithmNameToVersion, verisionToFile, algFrameId, fileName) {
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl("/minio/readUrlContent"),
        method: "get",
        params: this.$http.adornParams({
          algorithmNameToVersion,
          verisionToFile,
          algFrameId,
          fileName
        })
      }).then(({ data }) => {
        this.code = data;
        this.visible = true;
      });
    }
  },
  mounted() {}
};
</script>
<style scope>
.trainFileWatchContainer {
  height: 600px;
}
.CodeMirror {
  height: 600px;
}
</style>
