<template>
  <view class="question-item">
    <question-title :question="question" />
    <template v-if="!question.hasSubQuestions">
      <question-options :question="question" />
      <question-result :question="question" />
      <question-parse :question="question" />
    </template>
    <view v-else class="mt-20">
      <uv-tabs ref="tabRef" :current="question.activeSubIndex" keyName="label"
        :animationEnabled="true" :itemStyle="tabItemStyle" :list="tabs" :scrollable="true" lineHeight="0"
        @change="handleTabChange">
        <template #default="{ data: { item, index } }">
          <view class="px-40 py-8 rounded-full"
            :class="[index === question.activeSubIndex ? 'bg-primary-light text-primary' : 'bg-back']">
            {{ getNo(index) }}
          </view>
        </template>
      </uv-tabs>
      <view v-if="question.subQuestions.length" class="mt-20">
        <view v-for="subQuestion in question.subQuestions" :key="subQuestion.subIndex">
          <question-item v-show="subQuestion.subIndex === question.activeSubIndex" :question="subQuestion" />
        </view>
      </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 QuestionItem from './question-item.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 props = defineProps<{
  question: Study.Question;
}>();

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

const tabRef = ref();
const tabs = computed(() => {
  return props.question.subQuestions.map((item, index) => {
    return {
      label: props.question.index + props.question.offset + index + 1,
      value: item.subIndex
    }
  });
});
const tabItemStyle = {
  padding: '0 5px',
};

watch(() => currentIndex.value, (val) => {
  if (currentIndex.value === props.question.index && props.question.hasSubQuestions) {
    nextTick(() => {
      tabRef.value?.init();
    });
  }
}, {
  immediate: false
});
const getNo = (subIndex: number) => {
  return props.question.index + props.question.offset + subIndex + 1;
}
const handleTabChange = (e: any) => {
  setSubQuestionIndex(e.index);
}
</script>
<style lang="scss" scoped></style>