<template>
  <el-dialog
    v-loading="loading"
    :title="'变更详情'"
    :center="true"
    align="left"
    top="5vh"
    width="1040px"
    custom-class="contrastModel"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="showModelThis = false"
    append-to-body
  >
    <el-card style="margin-top: -20px">
      <el-image-viewer
        v-show="showViewer"
        :on-close="closeViewer"
        :url-list="srcListView"
      />
      <el-row :gutter="10">
        <el-col :span="24" class="title">
          <el-row>
            <el-col :span="12" class="tl">
              <span>操作人：</span><span v-if="sitem">{{ sitem.action_name }}</span>
            </el-col>
            <el-col :span="12" class="tr"
              ><span>操作时间：</span
              ><span v-if="sitem">{{ sitem.addtime }}</span></el-col
            >
          </el-row>
        </el-col>
        <el-col :span="12">
          <div class="contrast-title">操作前:</div>
          <div class="contrast-main" v-html="x" ref="contentfx" @click="imageChange($event)" />
        </el-col>
        <el-col :span="12">
          <div class="contrast-title">操作后:</div>
          <div class="contrast-main" v-html="y" ref="contentfy" @click="imageChange($event)" />
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
export default {
  name: "contrastModel",
  props: ["showModel", "id", "sitem"],
  components: {
    "el-image-viewer": () => import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      showViewer: false,
      srcListView: [],
      loading: true,
      showModelThis: this.showModel,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },

  methods: {
    imageChange(e) {
      if (e.target.nodeName === "IMG" || e.target.nodeName === "img") {
        const img = e.target.currentSrc;
        this.srcListView = [img];
        this.showViewer = true;
      }
    },
    closeViewer() {
      this.showViewer = false;
    },
    async initForm() {
      this.loading = true;
      const { action_item, action_after } = this.sitem;
      // function htmlStringToArray(str) {
      //   var temp = document.createElement("iframe");
      //   temp.style.display = "none";
      //   document.body.appendChild(temp);
      //   var doc = temp.contentWindow.document;
      //   doc.open();
      //   doc.write(str);
      //   doc.close();

      //   var array = htmlNodeToArray(doc.documentElement);
      //   temp.parentNode.removeChild(temp);
      //   return array;
      // }

      // function htmlNodeToArray(node) {
      //   if (node.nodeType == 1) {
      //     var array = [node.tagName];
      //     if (node.childNodes.length) {
      //       for (var i = 0, child; (child = node.childNodes[i]); i++) {
      //         if (child.nodeType == 1 || child.nodeType == 3) {
      //           array.push(htmlNodeToArray(child));
      //         }
      //       }
      //     } else if (node.innerText) {
      //       array.push([node.innerText]);
      //     }
      //     return array;
      //   } else if (node.nodeType == 3) {
      //     return [node.nodeValue];
      //   }
      // }
      // console.log(   htmlStringToArray(this.b));

      // this.matchHTML();

      this.x = action_item;
      this.y = action_after;
      this.loading = false;
    },
    matchHTML() {
      console.log(this.b);
      // let pattern = /<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g;
      let pattern = /<[^>]+>/g;
      // let pattern = /<(?:[^"'>]|"[^"]*"|'[^']*')*>/g;
      //  let pattern = /<(?:[^"'>]|(["'])[^"']*\1)*>/g;
      console.log(this.b.match(pattern));
    },
    // async initForm() {
    //   this.loading = true;
    //   const { action_item, action_after } = this.sitem;
    //   this.a = action_item;
    //   this.b = action_after;
    //   function StringBuffer() {
    //     this.__strings__ = [];
    //   }
    //   StringBuffer.prototype.append = function (str) {
    //     this.__strings__.push(str);
    //     return this;
    //   };
    //   //格式化字符串
    //   StringBuffer.prototype.appendFormat = function (str) {
    //     for (var i = 1; i < arguments.length; i++) {
    //       var parent = "\\{" + (i - 1) + "\\}";
    //       var reg = new RegExp(parent, "g");
    //       str = str.replace(reg, arguments[i]);
    //     }

    //     this.__strings__.push(str);
    //     return this;
    //   };
    //   StringBuffer.prototype.toString = function () {
    //     return this.__strings__.join("");
    //   };
    //   StringBuffer.prototype.clear = function () {
    //     this.__strings__ = [];
    //   };
    //   StringBuffer.prototype.size = function () {
    //     return this.__strings__.length;
    //   };

    //   var flag = 1;

    //   function getHighLightDifferent(a, b) {
    //     //console.log("输入：" + a);
    //     //console.log("输入：" + b);

    //     var temp = getDiffArray(a, b);
    //     var a1 = getHighLight(a, temp[0]);
    //     //console.log("输出：" + a1);

    //     var a2 = getHighLight(b, temp[1]);
    //     //console.log("输出：" + a2);
    //     //console.log(flag);
    //     return new Array(a1, a2);
    //   }

    //   function getHighLight(source, temp) {
    //     var result = new StringBuffer();
    //     var sourceChars = source.split("");
    //     var tempChars = temp.split("");
    //     var flag = false;
    //     for (var i = 0; i < sourceChars.length; i++) {
    //       if (tempChars[i] != " ") {
    //         if (i == 0) {
    //           result.append("<span style='color:blue'>");
    //           result.append(sourceChars[i]);
    //         } else if (flag) {
    //           result.append(sourceChars[i]);
    //         } else {
    //           result.append("<span style='color:blue'>");
    //           result.append(sourceChars[i]);
    //         }
    //         flag = true;
    //         if (i == sourceChars.length - 1) {
    //           result.append("</span>");
    //         }
    //       } else if (flag == true) {
    //         result.append("</span>");
    //         result.append(sourceChars[i]);
    //         flag = false;
    //       } else {
    //         result.append(sourceChars[i]);
    //       }
    //     }
    //     return result.toString();
    //   }

    //   function getDiffArray(a, b) {
    //     var result = new Array();
    //     //选取长度较小的字符串用来穷举子串
    //     if (a.length < b.length) {
    //       var start = 0;
    //       var end = a.length;
    //       result = getDiff(a, b, start, end);
    //     } else {
    //       var start = 0;
    //       var end = b.length;
    //       result = getDiff(b, a, 0, b.length);
    //       result = new Array(result[1], result[0]);
    //     }
    //     return result;
    //   }

    //   //将a的指定部分与b进行比较生成比对结果
    //   function getDiff(a, b, start, end) {
    //     var result = new Array(a, b);
    //     var len = result[0].length;
    //     while (len > 0) {
    //       for (var i = start; i < end - len + 1; i++) {
    //         var sub = result[0].substring(i, i + len);
    //         var idx = -1;
    //         if ((idx = result[1].indexOf(sub)) != -1) {
    //           result[0] = setEmpty(result[0], i, i + len);
    //           result[1] = setEmpty(result[1], idx, idx + len);
    //           if (i > 0) {
    //             //递归获取空白区域左边差异
    //             result = getDiff(result[0], result[1], start, i);
    //           }
    //           if (i + len < end) {
    //             //递归获取空白区域右边差异
    //             result = getDiff(result[0], result[1], i + len, end);
    //           }
    //           len = 0; //退出while循环
    //           break;
    //         }
    //       }
    //       len = parseInt(len / 2);
    //       //len = len - 1;
    //       //console.log(len);
    //     }
    //     //console.log(result.join(""));
    //     return result;
    //   }

    //   //将字符串s指定的区域设置成空格
    //   function setEmpty(s, start, end) {
    //     var array = s.split("");
    //     for (var i = start; i < end; i++) {
    //       array[i] = " ";
    //     }
    //     return array.join("");
    //   }
    //   let list = getHighLightDifferent(this.a, this.b);
    //   this.x = list[0];
    //   this.y = list[1];
    //   // console.log(this.a);
    //   // console.log(this.b);
    //   // console.log(this.x);
    //   // console.log(this.y);
    //   this.loading = false;
    // },
  },
};
</script>

<style lang="scss" scoped></style>
