<template>
  <scroll-view v-if="visible" scroll-y class="question-wrap"
    :scroll-with-animation="true">
    <view class="h-20"></view>
    <question-item :question="question" :readonly="readonly" :index="index" :subQuestionIndex="subQuestionIndex"
      @changeSubQuestion="handleChangeSubQuestion" @change-question="handleChangeQuestion" />
    <view class="h-20"></view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { Study } from '@/types';
import QuestionItem from './question-item.vue';
const props = defineProps<{
  question: Study.Question;
  readonly?: boolean;
  currentIndex: number;
  index: number;
  subQuestionIndex: number;
}>();
const visible = computed(() => {
  return Math.abs(props.currentIndex - props.index) <= 2;
});
const emit = defineEmits<{
  (e: 'changeSubQuestion', index: number): void;
  (e: 'changeQuestion', question: Study.Question): void;
}>();
const handleChangeSubQuestion = (index: number) => {
  emit('changeSubQuestion', index);
}

const handleChangeQuestion = (question: Study.Question) => {
  emit('changeQuestion', question);
}
</script>

<style lang="scss" scoped>
.question-wrap {
  @apply h-full box-border;
}
</style>
