<template>
  <div>
    <div v-if="screenValue === 'iframe'" id="currentIframe"
      class="p-4 rounded-lg border-2 border-gray-500 text-gray-300"></div>

    <div v-if="screenValue === '1'" id="currentTextId" v-html="currentText"
      class="p-4 rounded-lg border-2 border-gray-500 text-gray-300"></div>

    <TwoScreenCompare v-if="screenValue === '2'" :html1="html1" :html2="html2"></TwoScreenCompare>
  </div>
</template>


<script setup lang="ts">

import { ref, nextTick, onMounted } from 'vue'

import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch';
import TwoScreenCompare from '../DiffPage/twoScreenCompare/index.vue'

const props: any = defineProps({
  screen: String, // 1 一屏合并， 2 两屏对比
  html1: String,
  html2: String,
})

// 接入对比的两个文本
let html1: string = changeHTMLFormat(props.html1)
let html2: string = props.html2

// 修改后的文本

let currentText = ref('')
let screenValue = ref(props.screen)

// 处理 html 的格式
function changeHTMLFormat(html: string): string {
  return html
}

// 转换处理过后的字符串为html
function changeStrToHtml(str: string) {
  let str1 = str.replace(/\&amp\;/g, '&')
    .replace(/\&lt\;/g, '<')
    .replace(/\&gt\;/g, '>')
    .replace(/\&para\;\<br\>/g, '\n')
    .replace(/list\-style\:none\;/, '')
    .replace(/text\-decoration\:none\;/, '')
  return str1.substring(6, str1.length - 7)
}

// 对比一屏 html
function diffLines(prev: string | undefined, current: string | undefined) {
  var dmp = new DiffMatchPatch();
  var d = dmp.diff_main(prev as string, current as string);
  dmp.diff_cleanupSemantic(d);
  var ds = dmp.diff_prettyHtml(d);

  // 拿到对比完之后的数组
  let html = changeStrToHtml(ds)
  currentText.value = html
}



function selectScreen(str: string) {
  screenValue.value = str
}



onMounted(() => {
  if (!html1 || !html2) {
    console.log('请传递正确 html 节点')
    return
  }

  // 对比一屏 html
  diffLines(html1, html2)

  nextTick(() => {
    let currentTextIdDom: any = document.getElementById("currentTextId")
    if(currentTextIdDom) currentTextIdDom.contentEditable = true

    let currentIframe: any = document.getElementById('currentIframe')
    if(currentIframe) currentIframe.innerHTML = currentText.value
  })

})

</script>

<style lang="scss">
.editor {
  section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    h2 {
      width: 100%;
    }

    div {
      width: calc(50% - 10px);
    }

    textarea {
      width: 100%;
      height: 200px;
    }
  }
}

.gggg div {
  width: 100%;
}

.vue-diff-theme-custom {
  @import 'highlight.js/scss/vs2015.scss'; // import theme

  background-color: #000; // Set background color
}

.vue-diff-cell-removed {
  background-color: rgba(255, 0, 0, 0.1);
  display: inline-block;

  span.modified {
    background-color: rgba(255, 0, 0, 0.15);
  }

  code::before {
    content: '-';
  }
}

.vue-diff-cell-added {
  background-color: rgba(0, 255, 128, 0.1);
  display: inline-block;

  span.modified {
    background-color: rgba(0, 255, 128, 0.15);
  }

  code:before {
    content: '+';
  }
}

.vue-diff-cell-disabled {
  background-color: rgba(128, 128, 128, 0.1);
  display: inline-block;
}

.vue-diff-cell-fold {
  &.lineNum {
    opacity: 0.8;
    font-size: 0.8em;

    &:before {
      content: '>';
    }
  }

  &.code {
    text-align: center;

    &:before {
      color: #999;
      content: '⋯⋯';
    }
  }
}
</style>
