<template>
  <div style="height: 100%">
    <!-- <DiffPage 
      ref="childDom" 
      screen='1' 
      :title="false" 
      :html1="Htmljson1.data.content" 
      :html2="Htmljson2.data.content"
    ></DiffPage> -->

    <DiffPage
      ref="childDom"
      :title="false"
      :html1="Htmljson11"
      :html2="Htmljson22"
      :notFilterTag="notFilterTag"
      :familiarity="familiarity"
      v-if="Htmljson11"
    ></DiffPage>
  </div>
</template>

<script setup>
import Htmljson1 from './html1';
import Htmljson2 from './html2';
import { onUnmounted, ref } from 'vue';
const childDom = ref(null);

let Htmljson11 = ref('');
let Htmljson22 = ref('');
let notFilterTag = ref(['table', 'p', 'a', '<', '>']);
let familiarity = ref(1)

onMounted(() => {
  // 获取组件内的方法
  // const text = childDom.value.getDiffArr('123', '12345')
  // console.log(text, '=========')
  setTimeout(() => {
    console.log(!!Htmljson1.data.content);
    console.log(!!Htmljson2.data.content);
    Htmljson11.value = Htmljson1.data.content;
    Htmljson22.value = Htmljson2.data.content;
  });
});

onUnmounted(() => {
  Htmljson11.value = ''
})
</script>

<style lang="scss">
html,
body {
  height: 100%;
}

@import '@leonwerth/vue-diff/dist/index.css';
</style>
