import { throttle } from "lodash";
export default {
  data() {
    return {
      leftScrollTimeStamp: 0,
      rightScrollTimeStamp: 0,
    };
  },
  methods: {
    registScrollEvent() {
      document
        .getElementById("qe-part-paper")
        .addEventListener("scroll", this._paperScrollEvent);
      document
        .getElementById("qe-part-richtext-list")
        .parentNode.addEventListener("scroll", this._richTextScrollEvent);
    },
    removeScrollEvent() {
      document
        .getElementById("qe-part-paper")
        .removeEventListener("scroll", this._paperScrollEvent);
      document
        .getElementById("qe-part-richtext-list")
        .parentNode.removeEventListener("scroll", this._richTextScrollEvent);
    },
    _paperScrollEvent: throttle(function (e) {
      this.paperScrollEvent(e);
    }, 20),
    paperScrollEvent(e) {
      this.rightScrollTimeStamp = e.timeStamp;
      if (
        this.leftScrollTimeStamp > this.rightScrollTimeStamp ||
        this.rightScrollTimeStamp - this.leftScrollTimeStamp < 15
      ) {
        //判断为用户是从左边触发滚动的
        return;
      }
      if (this.scrollType === "rich-text") {
        this.lastPaperScrollTop =
          document.getElementById("qe-part-paper").scrollTop;
        return;
      }
      this.scrollType = "paper";
      setTimeout(() => {
        this.scrollType = "";
      }, 100);

      if (!this.$refs.QuestionImportPaperEdit) return;

      const questionContIndexList =
        this.$refs.QuestionImportPaperEdit.questionContIndexList;

      const scrollTop = e.target.scrollTop;
      const isScrollDown = scrollTop > this.lastPaperScrollTop;
      this.lastPaperScrollTop = scrollTop;
      const targeContIndex = questionContIndexList.findIndex(
        (item) => scrollTop < item[3]
      );
      let targeContPercent = 0;
      let targeCont = null;
      let nextTargetCont = null;
      if (targeContIndex !== -1) {
        targeCont = questionContIndexList[targeContIndex - 1];
        nextTargetCont = questionContIndexList[targeContIndex];
        targeContPercent =
          (scrollTop - targeCont[3]) / (nextTargetCont[3] - targeCont[3]);
      } else {
        targeCont = questionContIndexList.slice(-1)[0];
        const textHeight = this.$refs.QuestionImportPaperEdit.$el.offsetHeight;
        targeContPercent =
          (scrollTop - targeCont[3]) / (textHeight - targeCont[3]);
      }

      const richTextSectionDom = document.getElementById(
        `section-${targeCont[2][0]}`
      );
      if (!richTextSectionDom) return;

      const richTextListDom = document.getElementById("qe-part-richtext-list");
      const elPos = richTextListDom.getBoundingClientRect();
      const richTextContainerDom = richTextListDom.parentNode;

      const sectionOffsetTop =
        richTextSectionDom.getBoundingClientRect().y - elPos.y;
      let nextSectionOffsetTop = richTextListDom.offsetHeight;

      if (nextTargetCont) {
        const nextRichTextSectionDom = document.getElementById(
          `section-${nextTargetCont[2][0]}`
        );
        if (nextRichTextSectionDom) {
          nextSectionOffsetTop =
            nextRichTextSectionDom.getBoundingClientRect().y - elPos.y;
        } else {
          nextSectionOffsetTop =
            richTextSectionDom.offsetTop + richTextSectionDom.offsetHeight;
        }
      }

      const textScrollTop =
        sectionOffsetTop +
        targeContPercent * (nextSectionOffsetTop - sectionOffsetTop);
      richTextContainerDom.scrollTop = isScrollDown
        ? Math.max(textScrollTop, richTextContainerDom.scrollTop)
        : Math.min(textScrollTop, richTextContainerDom.scrollTop);
    },
    _richTextScrollEvent: throttle(function (e) {
      this.richTextScrollEvent(e);
    }, 20),
    richTextScrollEvent(e) {
      this.leftScrollTimeStamp = e.timeStamp;
      if (
        this.rightScrollTimeStamp > this.leftScrollTimeStamp ||
        this.leftScrollTimeStamp - this.rightScrollTimeStamp < 15
      ) {
        //判断为用户是从右边触发滚动的
        return;
      }
      if (this.scrollType === "paper") {
        this.lastRichTextScrollTop = document.getElementById(
          "qe-part-richtext-list"
        ).parentNode.scrollTop;
        return;
      }
      this.scrollType = "rich-text";
      setTimeout(() => {
        this.scrollType = "";
      }, 100);

      if (!this.$refs.QuestionImportPaperEdit) return;

      const isScrollDown = e.target.scrollTop > this.lastRichTextScrollTop;
      this.lastRichTextScrollTop = e.target.scrollTop;
      const offsetH = isScrollDown ? 150 : 0;
      const scrollTop = e.target.scrollTop + offsetH;

      const richTextListDom = document.getElementById("qe-part-richtext-list");

      const questionContIndexList =
        this.$refs.QuestionImportPaperEdit.questionContIndexList;

      const findQuestionItemDom = (sectionIndex) => {
        const questionCont = questionContIndexList.find((item) =>
          item[2].includes(sectionIndex)
        );
        if (!questionCont) return;
        const [id, type] = questionCont;
        let itemDom = document.getElementById(id);
        if (type === "body") {
          itemDom = itemDom.querySelector(".ep-question-title");
        } else if (type === "option") {
          itemDom = itemDom.querySelector(".ep-question-body");
        } else if (type === "answer") {
          itemDom =
            itemDom.querySelector(".question-info-view") ||
            itemDom.querySelector(".ep-question-props");
        }
        return itemDom;
      };

      const targeContIndex = this.richTextIndexList.findIndex(
        (item) => scrollTop < item[1]
      );
      if (!targeContIndex) return;
      let targeContPercent = 0;
      let targeCont = null;
      let nextTargetCont = null;
      if (targeContIndex !== -1) {
        targeCont = this.richTextIndexList[targeContIndex - 1];
        nextTargetCont = this.richTextIndexList[targeContIndex];
        targeContPercent =
          (scrollTop - targeCont[1]) / (nextTargetCont[1] - targeCont[1]);
      } else {
        targeCont = this.richTextIndexList.slice(-1)[0];
        const textHeight = richTextListDom.offsetHeight;
        targeContPercent =
          (scrollTop - targeCont[1]) / (textHeight - targeCont[1]);
      }

      const questionContDom = findQuestionItemDom(targeCont[0]);
      if (!questionContDom) return;
      const questionListDom = this.$refs.QuestionImportPaperEdit.$el;
      const elPos = questionListDom.getBoundingClientRect();
      const questionPos = questionContDom.getBoundingClientRect();
      const questionContOffsetTop = questionPos.y - elPos.y;
      let nextQuestionContOffsetTop = questionListDom.offsetHeight;

      if (nextTargetCont) {
        const nextQuestionContDom = findQuestionItemDom(nextTargetCont[0]);
        if (nextQuestionContDom) {
          const nextQuestionPos = nextQuestionContDom.getBoundingClientRect();
          nextQuestionContOffsetTop = nextQuestionPos.y - elPos.y;
        } else {
          nextQuestionContOffsetTop =
            questionContOffsetTop + questionContDom.offsetHeight;
        }
      }

      const questionScrollTop =
        questionContOffsetTop +
        targeContPercent * (nextQuestionContOffsetTop - questionContOffsetTop);
      const questionContainerDom = document.getElementById("qe-part-paper");
      questionContainerDom.scrollTop = isScrollDown
        ? Math.max(questionScrollTop, questionContainerDom.scrollTop)
        : Math.min(questionScrollTop, questionContainerDom.scrollTop);
    },
  },
};
