<template>
  <div class="diff-page-c" v-if="destroy">
    <ConcatText 
      v-show="screenValue === '1'" 
      :html1="html1" 
      :html2="html2"
      :notFilterTag="notFilterTag"
      v-if="html1 && html2"
    ></ConcatText>
    <CompareText 
      v-show="screenValue === '2'" 
      :html1="html1" 
      :html2="html2"
      :isTitle="isTitle"
      :notFilterTag="notFilterTag"
      :familiarity="familiarity"
      v-if="html1 && html2"
    ></CompareText>
  </div>
</template>


<script setup lang="ts">

import { ref, nextTick, onMounted, onUnmounted } from 'vue'
import Compare from '../../utils/compare'
import CompareText from './compareText/index.vue'
import ConcatText from './concatText/index.vue'

const props: any = defineProps({
  screen: String, // 1 一屏合并， 2 两屏对比
  html1: String,  // 对比文本字符串1
  html2: String,  // 对比文本字符串2
  title: Boolean,
  notFilterTag: Array,
  familiarity: Number
})


let html1 = ref(props.html1)
let html2 = ref(props.html2)
let isTitle = ref(props.title)
let notFilterTag = ref(props.notFilterTag)
let familiarity = ref(props.familiarity)

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

let destroy = ref(true)

onMounted(() => {
  destroy.value = true

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

  // 对比一屏 html
  currentText.value = Compare.concatHTML(html1.value, html2.value)

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

// 用于销毁当前dom,避免html内的样式污染全局样式
onUnmounted(()=> {
  destroy.value = false
})

defineExpose(Compare)

</script>

<style lang="scss">
  .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>
