<template>
  <div class="">

    <div>
      <codemirror
        ref="cm"
        v-model="code"
        :options="cmOptions"
      ></codemirror>
    
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="writeCode()">确定</el-button>
    </span>
  </div>
</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'
  import { Message } from "element-ui"
  // 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 {
      code:'',
      bucket:'test0706',
      fileId:'',
      algorithmNameToVersion:null,
      verisionToFile:null,
      fileName:'',
      cmOptions: {
          // 语言及语法模式
          mode: 'text/x-python',
          // 主题
          theme: 'idea',
          // 显示行数
          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
        }
    };
  },
  activated() {
    //   处理参数，根据参数初始化数据
    let algorithmNameToVersion = this.$route.query.algorithmNameToVersion;
    let verisionToFile=this.$route.query.verisionToFile;
    let fileName=this.$route.query.fileName;
    this.init(algorithmNameToVersion,verisionToFile,fileName);
  },
  methods: {
    init(algorithmNameToVersion,verisionToFile,fileName) {
      this.algorithmNameToVersion=algorithmNameToVersion;
      this.verisionToFile=verisionToFile;
      this.fileName=fileName;
      console.log(this.algorithmNameToVersion)
      console.log(this.verisionToFile)
      console.log(this.fileName)
      this.$http({
          url:this.$http.adornUrl('/minio/readUrlContent'),
          method:'get',
          params:this.$http.adornParams({
            algorithmNameToVersion:this.algorithmNameToVersion,
            verisionToFile:this.verisionToFile,
            fileName:this.fileName
          }),
        }).then(({data})=>{
          this.code=data
      });
      
    },

    //将codemirror中内容写入本地文件
      writeCode(){
        this.$http({
          url:this.$http.adornUrl('/minio/writeFile'),
          method:'post',
          data: this.$http.adornData({
              'algorithmNameToVersion': this.algorithmNameToVersion,
              'verisionToFile':this.verisionToFile,
              'fileName':this.fileName,
              'content': this.code,
            }),
        }).then(({data})=>{
          Message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  
                },
              });
          this.$router.replace({ name: 'filetest',query:{algorithmNameToVersion:this.algorithmNameToVersion,verisionToFile:this.verisionToFile} });
        });

      },
    //点击取消按钮，跳转回原路径
    cancel(){
      this.$router.replace({ name: 'filetest',query:{algorithmNameToVersion:this.algorithmNameToVersion,verisionToFile:this.verisionToFile} });
    }
    
  },
  mounted(){
    this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
    this.$nextTick(() => {
    window.addEventListener('resize', () => {
        //监听浏览器窗口大小改变
        //浏览器变化执行动作
        this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
      });
    });
    // 代码提示功能 当用户有输入时，显示提示信息
      this.$refs.cm.codemirror.on('inputRead', cm => {
        cm.showHint();
      });
    this.$http({
          url:this.$http.adornUrl('/minio/readUrlContent'),
          method:'get',
          params:this.$http.adornParams({
            algorithmNameToVersion:this.algorithmNameToVersion,
            verisionToFile:this.verisionToFile,
            fileName:this.fileName
          }),
        }).then(({data})=>{
          this.code=data
        });
  }
  
};
</script>