<template>
  <view class="flex-1 min-h-1 relative">
    <view class="absolute inset-0">
      <swiper class="h-full" :disable-touch="false" :current="currentIndex" :duration="swiperDuration"
        @change="handleSwiperChange" @transition="handleSwiperTransition"
        @animationfinish="handleSwiperAnimationFinish">
        <block v-for="(item, index) in questionList" :key="item.id">
          <swiper-item class="h-full" v-show="showSwiperItem(index)">
            <scroll-view v-if="showSwiperItem(index)" scroll-y class="question-wrap" :scroll-with-animation="true">
              <view class="h-20"></view>
              <view class="mx-40">
                <question-item :question="item" />
              </view>
              <view class="h-40"></view>
            </scroll-view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
  <view class="btn-group flex items-center justify-evenly pt-10 pb-30">
    <view class="">
      <ie-button type="primary" size="mini" :round="4" :shadow="false" custom-class="w-180" :disabled="!prevEnable"
        @click="handlePrevQuestion">上一题</ie-button>
    </view>
    <view class="" v-if="!isReadOnly">
      <ie-button type="primary" size="mini" :round="4" :shadow="false" custom-class="w-160"
        @click="submit">交卷</ie-button>
    </view>
    <view class="">
      <ie-button type="primary" size="mini" :round="4" :shadow="false" custom-class="w-180" :disabled="!nextEnable"
        @click="handleNextQuestion">下一题</ie-button>
    </view>
  </view>

</template>
<!-- <script lang="ts">
export default {
  name: 'ExamSwiper'
}
</script> -->
<script lang="ts" setup>
defineOptions({
  options: {
    virtualHost: true
  }
});
import { Study, Transfer } from '@/types';
import QuestionItem from './question-item.vue';
import { useExam } from '@/composables/useExam';
import { EXAM_DATA, EXAM_PAGE_OPTIONS } from '@/types/injectionSymbols';
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const { swiperDuration, currentIndex, subQuestionIndex, startTiming, stopTiming, questionList, prevEnable, nextEnable, prevQuestion, nextQuestion, changeIndex } = examData;
const current = 0;
// const props = defineProps<{
//   question: Study.Question;
//   readonly?: boolean;
//   currentIndex: number;
//   index: number;
//   subQuestionIndex: number;
// }>();

const isReadOnly = computed(() => {
  const { readonly } = examPageOptions;
  return readonly
});
const showSwiperItem = (index: number) => {
  return Math.abs(currentIndex.value - index) <= 2;
};
const isViewMode = computed(() => {
  return isReadOnly.value || false;
});
const isAnimationFinish = ref(false);
const transitionStartX = ref(null);
const transitionEndX = ref(null);

const emit = defineEmits<{
  (e: 'changeSubQuestion', index: number): void;
  (e: 'changeQuestion', question: Study.Question): void;
  (e: 'submit'): void;
}>();

const handleSwiperChange = (e: any) => {
  changeIndex(e.detail.current);
};
const handleSwiperTransition = (e: any) => {
  if (currentIndex.value === questionList.value.length - 1) {
    if (!transitionStartX.value) {
      transitionStartX.value = e.detail.dx;
    } else {
      transitionEndX.value = e.detail.dx;
    }
    return;
  }
};

const handleSwiperAnimationFinish = (e: any) => {
  if (transitionStartX.value == null || transitionEndX.value == null || currentIndex.value !== questionList.value.length - 1) {
    isAnimationFinish.value = true;
    transitionStartX.value = null;
    transitionEndX.value = null;
    return;
  }
  const offsetX = transitionEndX.value - transitionStartX.value;
  if (offsetX < 0 && offsetX > -150) {
    if (!isViewMode.value) {
      submit();
    }
  }
  isAnimationFinish.value = true;
  transitionStartX.value = null;
  transitionEndX.value = null;
};

const submit = () => {
  emit('submit');
}

const handlePrevQuestion = () => {
  prevQuestion();
}
const handleNextQuestion = () => {
  nextQuestion();
}
</script>

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

.btn-group {
  box-shadow: 0 -20px 10px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 1;
}
</style>
