<template>
  <div class="text-compare-page">
    <div class="text-title" v-if="isTitle">文档对比</div>

    <div class="text-compare" :style="{ height: pageHeight + 'px' }">
      <div class="text-compare-article">
        <div class="text-compare-top">
          <div class="input-group">
            <input
              id="同步滚动"
              type="checkbox"
              name="同步滚动"
              @change="scrollLeftRight"
            />
            <label for="同步滚动">同步滚动</label>

            <input
              id="文档对调"
              type="checkbox"
              name="文档对调"
              @change="articleChange"
            />
            <label for="文档对调">文档对调</label>
          </div>
        </div>
        <div
          class="text-compare-bottom"
          :style="{ height: pageHeight - 97 + 'px' }"
        >
          <!-- 当前 html -->
          <div 
            class="text-compare-left" 
            @mouseover="changeScrollFlag(false)"
          >
            <div class="text-compare-article1" v-if="Htmlj2 && Htmlj1">
              <div v-html="inputChange ? Htmlj2 : Htmlj1"></div>
            </div>
          </div>
          <!-- 对比 html -->
          <div 
            class="text-compare-right" 
            @mouseover="changeScrollFlag(true)"
          >
            <div class="text-compare-article1" v-if="Htmlj2 && Htmlj1">
              <div v-html="inputChange ? Htmlj1 : Htmlj2"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 对比结果 -->
      <div class="text-compare-diff">
        <div class="text-compare-top">对比结果</div>
        <div class="text-compare-bottom">
          <!-- 对比结果标题 -->
          <div class="flex">
            <div
              class="group-title"
              :class="diffActive === item.key ? 'active' : ''"
              v-for="(item, index) in diffGroup"
              :key="index"
              @click="() => compareResult(item)"
            >
              <div>{{ item.name + ' (' + item.value + ')' }}</div>
              <div class="line" v-if="index !== diffGroup.length - 1"></div>
            </div>
          </div>
          <!-- 对比结果内容 -->
          <div class="card-group">
            <div
              v-for="(item, index) in diffCardInfo"
              :key="index"
              class="group-card-card"
              :class="item.key + item.type === selectNode ? 'active' : ''"
              @click="() => clickCard(item)"
            >
              <div class="group-card-title">
                {{ index + 1 + '.' + item.name }}
              </div>
              <div class="group-card-content">
                <div class="group-card-last">原文: {{ item.last }}</div>
                <div class="group-card-next">差异: {{ item.next }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue';
import Compare, { isDiffsProps, DiffGroupProps } from '../../../utils/compare';
import { useWinSize } from '../../../utils/utils';

const props = defineProps({
  html1: String, // 当前文章 html 字符串
  html2: String, // 需要对比的文章 html 字符串
  isTitle: Boolean, // 是否显示对比头
  notFilterTag: Array, // 过滤标签：有数组内的字符串，不进行对比
  familiarity: Number // 相识度
});

const {
  html1,
  html2,
  isTitle,
  notFilterTag = ['table', 'p', 'a', '<', '>'],
  familiarity = 1
} = props;

let Htmlj1 = ref();
let Htmlj2 = ref();
let inputChange = ref(false);
let diffCardInfo: Array<Array<isDiffsProps>> | any = ref([]);

// 修改切换
let diffActive = ref('all');
let diffGroup = ref<Array<DiffGroupProps>>([
  { name: '全部', value: 0, key: 'all', cards: [] },
  { name: '删除', value: 0, key: 'remove', cards: [] },
  { name: '新增', value: 0, key: 'add', cards: [] },
  { name: '修改', value: 0, key: 'edit', cards: [] },
]);

// 对比结果展示
let compareResult = (item: any) => {
  diffActive.value = item.key;
  // console.log(item)
  let g = diffGroup.value.find(itm => itm.key === item.key);
  // console.log(g, 'yyyyyyyyyyy')
  diffCardInfo.value = g?.cards;
};

// 点击卡片
let selectNode = ref('');
let clickCard = (item: any) => {
  // console.log('==============', item.key)
  selectNode.value = item.key + item.type;

  const leftPageSelectDom: Element | any = document.querySelector(
    `.text-compare-left .text-compare-article1 div .${item.key}`,
  );
  const rightPageSelectDom: Element | any = document.querySelector(
    `.text-compare-right .text-compare-article1 div .${item.key}`,
  );
  if (leftPageSelectDom) {
    let l: Element | null | any = document.querySelector('.text-compare-left');
    l.scrollTop = leftPageSelectDom.offsetTop - leftPageSelectDom.clientHeight;
  }
  if (rightPageSelectDom) {
    let r: Element | null | any = document.querySelector('.text-compare-right');
    r.scrollTop =
      rightPageSelectDom.offsetTop - rightPageSelectDom.clientHeight;
  }
};

// 文档对换
let articleChange = (e: { target: { checked: boolean } } | Event | any) => {
  inputChange.value = e.target.checked;
};

//判断鼠标在哪边文档
const flag = ref(false);
const changeScrollFlag = (bl: boolean) => {
  flag.value = bl;
};

// 同屏滚动
let scrollLeftRight = (e: { target: { checked: boolean } } | Event | any) => {
  let l: Element | null | any = document.querySelector('.text-compare-left');
  let r: Element | null | any = document.querySelector('.text-compare-right');
  if (e.target.checked) {
    r.scrollTop = l.scrollTop;
    r.scrollLeft = l.scrollLeft;
  }
  l.addEventListener('scroll', () => {
    if (e.target.checked) {
      if (!flag.value) {
        r.scrollTop = l.scrollTop;
        r.scrollLeft = l.scrollLeft;
      }
    }
  });
  r.addEventListener('scroll', () => {
    if (e.target.checked) {
      if (flag.value) {
        l.scrollTop = r.scrollTop;
        l.scrollLeft = r.scrollLeft;
      }
    }
  });
};

let windowSize = useWinSize();
let pageHeight = ref();

watch(windowSize, v => {
  pageHeight.value = v.height - 50;
});

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

  // 对比两屏 html
  console.log('对比', html1, html2)
  console.time('对比计算');
  let { newHTML1, newHTML2, Diffs } = Compare.compareHTML(
    html1,
    html2,
    notFilterTag,
  );
  console.timeEnd('对比计算');
  console.log('对比塞入标签', html1, html2)
  Htmlj1.value = newHTML1;
  Htmlj2.value = newHTML2;

  console.log(Diffs, '文章对比出的差异')
  // 相似度大于 50 才进行对比结果展示
  if(familiarity * 100 > 50){
    diffCardInfo.value = Diffs.Diffs;
    diffGroup.value = Diffs.DiffsCount;
  }

  nextTick(() => {
    pageHeight.value = document.body.clientHeight - 50;
  });
});
</script>

<style lang="scss">
.text-compare-page {
  overflow: hidden;
  height: 100%;
  .text-title {
    width: 100%;
    height: 50px;
    background: #1564bb;
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 50px;
  }

  .text-compare {
    display: flex;
    padding: 20px;

    .text-compare-article {
      width: calc(100% - 368px);
      background: #ffffff;
      box-shadow: 0px 8px 18px 0px rgba(75, 74, 140, 0.22);
      border-radius: 8px;
      margin-right: 20px;

      .text-compare-top {
        width: 100%;
        height: 57px;
        border-bottom: 1px solid #dcdcdc;
        line-height: 57px;
        position: relative;

        font-size: 18px;
        font-weight: 400;
        color: #454545;

        .input-group {
          position: absolute;
          right: 10px;
          user-select: none;
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          color: #4d4d59;
          & > input {
            padding-right: 12px;
            margin-left: 5px;
          }
          & > label {
            padding: 0px 10px;
            margin-top: 5px;
          }
        }
      }

      .text-compare-bottom {
        width: 100%;
        display: flex;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 3%;

        .text-compare-left,
        .text-compare-right {
          width: calc(50% - 40px);
          overflow: auto;
          margin-left: 3%;
          padding: 0 0 0 13px;
          border: 13px solid #eeeeee;
          // border-right: 0;
          // border-bottom: 0;

          .text-compare-article1 {
            background: #fff;
          }
        }
      }
    }

    .text-compare-diff {
      width: 348px;
      background: #ffffff;
      box-shadow: 0px 8px 18px 0px rgba(75, 74, 140, 0.22);
      border-radius: 8px;

      .text-compare-top {
        height: 57px;
        border-bottom: 1px solid #dcdcdc;
        line-height: 57px;
        padding-left: 20px;
        font-size: 18px;
        font-weight: 400;
        color: #454545;
      }

      .text-compare-bottom {
        padding: 10px 20px;
        height: calc(100% - 57px);
        & > .flex {
          background: #eeeeee;
          border-radius: 4px;
          height: 43px;
          width: 100%;
          display: flex;
        }
        .group-title.active {
          background: #3e74ef;
          & > div {
            color: #ffffff !important;
          }
        }
        .group-title {
          background: #eeeeee;
          width: 25%;
          position: relative;
          display: flex;
          cursor: pointer;
          div {
            width: 100%;
            text-align: center;
            line-height: 42px;
            font-size: 14px;
            font-weight: 400;
            color: #757575;
          }
          .line {
            height: 43px;
            width: 1px;
            background-color: #d2d2d2;
            position: absolute;
            right: 0px;
          }
        }
      }

      .card-group {
        overflow: auto;
        height: calc(100% - 37px);
        .group-card-card {
          margin-top: 10px;
          cursor: pointer;
          &.active {
            .group-card-title {
              background: #9ac685;
            }
            .group-card-content {
              border: 2px solid #9ac685;
            }
          }
          .group-card-title {
            height: 50px;
            // background: #9AC685;
            background: #bfbfbf;
            border-radius: 4px 4px 0px 0px;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            line-height: 50px;
            padding-left: 10px;
          }
          .group-card-content {
            padding: 21px 23px;
            font-size: 16px;
            font-weight: 400;
            color: #6f6f6f;
            // border: 2px solid #9AC685;
            border: 2px solid #bfbfbf;
            border-radius: 0px 0px 4px 4px;
            .group-card-last {
            }
            .group-card-next {
            }
          }
        }
      }
    }
  }
}
</style>
