mark-web/src/features/mark/composables/useAutoChooseFirstQuestion.ts

import { Question } from "@/types";
import { useMarkStore } from "@/store";
import { watch, nextTick } from "vue";
import useTaskRejection from "./useTaskRejection";

/** chooseQuestion 当currentTask改变是，自动选择第一题 */
export default function useAutoChooseFirstQuestion() {
  const markStore = useMarkStore();
  const { showRejectedReason } = useTaskRejection();

  watch(
    () => markStore.currentTask,
    () => {
      // 重置当前选择的quesiton和score
      markStore.currentQuestion = undefined;
      markStore.currentScore = undefined;

      // FIXed ME: 此时取到的还是score:null，但是 chooseQuestion之后就变成了score:0
      const firstQuestion = markStore.currentTask?.questionList[0];
      if (firstQuestion) {
        chooseQuestion(firstQuestion);
      }
    }
  );

  const scrollToQuestionOfBoard = async (question: Question) => {
    const node = document.querySelector(
      `#bq-${question.mainNumber}-${question.subNumber}`
    );
    const questionNode = document.querySelector(
      `#q-${question.mainNumber}-${question.subNumber}`
    );
    if (!questionNode) {
      // 非多媒体阅卷
      node && node.scrollIntoView({ block: "center", behavior: "smooth" });
      return;
    }
    // console.log(node);
    // node && node.scrollIntoView({ behavior: "smooth" });
    // if (node) node.scrollBy({ top: -50 });
    // setTimeout(() => {
    //   if (node) node.parentElement?.scrollTo({ top: 50, left: 0 });
    //   // node && node.scrollTop = 50//node.scrollIntoView({ behavior: "auto", block: "center" });
    //   if(node.)
    // }, 1500);
    async function checkIfEleMoving(ele: Element) {
      const { top: oldTop } = ele.getBoundingClientRect();
      await new Promise((res) => setTimeout(res, 200));
      // console.log(ele.getBoundingClientRect().top, oldTop);
      return ele.getBoundingClientRect().top - oldTop !== 0;
    }
    if (questionNode) {
      let isMoving = await checkIfEleMoving(questionNode);
      while (isMoving) {
        isMoving = await checkIfEleMoving(questionNode);
      }
      node && node.scrollIntoView({ block: "center", behavior: "smooth" });
    }
  };

  function chooseQuestion(question: Question) {
    if (!question.selfMark) return;
    markStore.currentQuestion = question;
    // FIXME: maybe should be an async function, temp fix for eslint
    void scrollToQuestionOfBoard(question);

    void nextTick(() => {
      if (markStore.currentQuestion) {
        showRejectedReason(markStore.currentQuestion);
      }
    });
  }

  return { chooseQuestion };
}