<template>
  <div>
    <xd-full-screen :z-index="zIndex" v-model="screen">
      <div class="title">
        <div class="title-old"><slot name="old"><i class="el-icon-document"></i>修改前数据</slot></div>
        <div class="title-new"><slot name="new"><i  class="el-icon-document"></i>修改后数据</slot></div>
      </div>
      <div
        ref="CodeMirror"
        class="code-contrast "
        :class="{maxHeight:screen,minHeight:!screen}"
        style="width: 100%; height: 100%"
      ></div>
    </xd-full-screen>
  </div>
</template>

<script>
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/merge/merge.js";
import "codemirror/addon/merge/merge.css";
import DiffMatchPatch from "diff-match-patch";
import XdFullScreen from "@/components/XdFullScreen.vue";
window.diff_match_patch = DiffMatchPatch;
window.DIFF_DELETE = -1;
window.DIFF_INSERT = 1;
window.DIFF_EQUAL = 0;
export default {
  components:{
    XdFullScreen
  },
  name: 'CodeMirror',
  props: {
    zIndex:{
      type: Number,
      default: 2001,
    },
    mode: {
      type: String,
      default: "text/html",
    },
    oldValue: {
      type: String|Object|Array,
      default: "",
    },
    newValue: {
      type: String|Object|Array,
      default: "",
    },
    isReadOnly: {
      type: Boolean,
      default: false,
    },
    collapse:{
      type: Boolean,
      default: false,
    }
  },
  watch:{

  },
  data() {
    return {
      screen: false,
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.initCodeMirrorUI()
    });
  },
  methods: {
    initCodeMirrorUI() {
      if (this.newValue == null) return;
      let oldValue = this.oldValue, newValue=this.newValue;
      if(this.$xdHelper.checkVarType(oldValue) === 'object'
        || this.$xdHelper.checkVarType(oldValue) === 'array') {
        oldValue = JSON.stringify(this.oldValue, null, 2)
      }
      if(this.$xdHelper.checkVarType(newValue) === 'object'
        || this.$xdHelper.checkVarType(newValue) === 'array') {
        newValue = JSON.stringify(this.newValue, null, 2)
      }
      let target = this.$refs.CodeMirror;
      target.innerHTML = "";
      CodeMirror.MergeView(target, {
        value: oldValue, //上次内容
        origLeft: null,
        orig: newValue, //本次内容
        lineNumbers: true, //显示行号
        //text/css,text/javascript,text/html,application/json
        methods:this.mode,
        highlightDifferences: true,
        connect: "align",
        readOnly: this.isReadOnly, //只读 不可修改
        revertButtons: this.isReadOnly,
        styleActiveLine:true,
        matchBrackets:true,
        collapseIdentical:this.collapse,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.code-contrast {
  padding: 10px;
}
//.code-contrast ::v-deep .CodeMirror-merge-scrolllock,
.code-contrast ::v-deep  .CodeMirror-merge-copy,
//.code-contrast ::v-deep .CodeMirror-merge-scrolllock-wrap,
{
  display: none !important;
}

::v-deep .CodeMirror-scroll {
  margin-bottom: 0!important;
  padding-bottom: 0!important;
}

.maxHeight ::v-deep .CodeMirror-merge,
.maxHeight ::v-deep .CodeMirror-merge .CodeMirror {
  height: calc(100vh - 40px)
}

.minHeight ::v-deep .CodeMirror-merge,
.minHeight ::v-deep .CodeMirror-merge .CodeMirror {
  height: 300px
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 10px;

  & > div {
    width: 47%;
    flex-shrink: 0;
    color: #999;
    font-size: 14px;

    & > i {
      margin-right: 5px;
    }
  }
}


</style>
