<template>
  <view class="question-item">
    <question-title :question="question" />
    <question-options :question="question" />
    <question-result :question="question" />
    <question-parse :question="question" />
    <view v-if="question.subQuestions.length">
      <scroll-view class="w-full h-fit sticky top-0 bg-white py-10 z-1" scroll-x :scroll-into-view="scrollIntoView"
        :scroll-left="scrollLeft">
        <view class="flex items-center px-20 gap-x-20">
          <view class="px-40 py-8 rounded-full" :id="`sub_question_${getNo(subIndex)}`"
            :class="[subIndex === subQuestionIndex ? 'bg-[#EBF9FF] text-primary font-bold' : 'bg-back']"
            v-for="(subQuestion, subIndex) in question.subQuestions" @click="setSubQuestionIndex(subIndex)">
            {{ getNo(subIndex) }}
          </view>
        </view>
      </scroll-view>
      <view v-if="currentSubQuestion" class="mt-20">
        <question-item :question="currentSubQuestion" />
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import QuestionTitle from './question-title.vue';
import QuestionOptions from './question-options.vue';
import questionResult from './question-result.vue';
import QuestionParse from './question-parse.vue';
import { EnumQuestionType, EnumReviewMode } from '@/common/enum';
import { useExam } from '@/composables/useExam';
import { Study, Transfer } from '@/types';
import { EXAM_DATA, EXAM_PAGE_OPTIONS, EXAM_AUTO_SUBMIT } from '@/types/injectionSymbols';

const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { subQuestionIndex, nextQuestion, isAllDone, currentSubQuestion, setSubQuestionIndex } = examData;
const examAutoSubmit = inject(EXAM_AUTO_SUBMIT);

const scrollIntoView = ref('')
const scrollLeft = ref(0);

watch(subQuestionIndex, (val) => {
  scrollIntoView.value = '';
  nextTick(() => {
    scrollIntoView.value = `sub_question_${val}`;
    if (props.question.subQuestions && props.question.subQuestions.length > 0) {
      if (props.question.subQuestions[0].subIndex === val) {
        scrollLeft.value = -1;
        setTimeout(() => {
          scrollLeft.value = 0;
        }, 0);
      }
    }
  });
}, {
  immediate: false
});

const props = defineProps<{
  question: Study.Question;
}>();
const getNo = (subIndex: number) => {
  return props.question.index + props.question.offset + subIndex + 1;
}
</script>
<style lang="scss" scoped></style>