<template>
  <ie-safe-toolbar :height="64" :shadow="false">
    <view
      class="px-18 h-full flex items-center justify-around bg-white border-0 border-t border-solid border-[#EFEFEF]">
      <view class="min-w-100 flex flex-col items-center" id="question-calendar-btn" @click="handleCalendar">
        <view class="w-48 h-48 flex items-center justify-center">
          <uv-icon name="calendar" size="26" />
        </view>
        <text class="mt-6 text-24 text-fore-subcontent">答题卡</text>
      </view>
      <view class="min-w-100 flex flex-col items-center" id="question-favorite-btn" @click="handleFavorite">
        <view class="w-48 h-48 flex items-center justify-center">
          <uv-icon v-if="currentQuestion.isFavorite" name="star-fill" color="#FF9A18" size="27" />
          <uv-icon v-else name="star" size="25" />
        </view>
        <text class="mt-6 text-24 text-fore-subcontent">收藏</text>
      </view>
      <view class="min-w-100 flex flex-col items-center" id="question-mark-btn" @click="handleMark">
        <view class="w-48 h-48 flex items-center justify-center">
          <ie-image
            :src="currentQuestion.isMark ? '/pagesStudy/static/image/icon-mark-active.png' : '/pagesStudy/static/image/icon-mark.png'"
            custom-class="w-34 h-34" mode="aspectFill" />
        </view>
        <text class="mt-6 text-24 text-fore-subcontent">标记</text>
      </view>
      <view class="min-w-100 flex flex-col items-center" id="question-correct-btn" @click="handleCorrect">
        <view class="w-48 h-48 flex items-center justify-center">
          <uv-icon name="info-circle" size="22" />
        </view>
        <text class="mt-6 text-24 text-fore-subcontent">试题纠错</text>
      </view>
    </view>
  </ie-safe-toolbar>
  <exam-stats-card ref="examStatsCardRef" @submit="handleSubmit" />
  <question-correct-popup ref="questionCorrectPopupRef" @close="beforeClose" />
</template>
<script lang="ts" setup>
defineOptions({
  options: {
    virtualHost: true
  }
});
import ExamStatsCard from './exam-stats-card.vue';
import QuestionCorrectPopup from './question-correct-popup.vue';
import { Study, Transfer } from '@/types';
import { EXAM_PAGE_OPTIONS, EXAM_DATA } from '@/types/injectionSymbols';
import { useExam } from '@/composables/useExam';
import { collectQuestion, cancelCollectQuestion } from '@/api/modules/study';

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

const examStatsCardRef = ref<InstanceType<typeof ExamStatsCard>>();
const currentQuestion = computed(() => {
  const qs = stateQuestionList.value[currentIndex.value];
  if (qs.subQuestions && qs.subQuestions.length > 0) {
    return qs.subQuestions[subQuestionIndex.value] || {};
  }
  return qs || {};
});
const emit = defineEmits<{
  (e: 'correct', question: Study.Question): void;
  (e: 'favorite', question: Study.Question): void;
  (e: 'mark', question: Study.Question): void;
  (e: 'submit'): void;
}>();

const questionCorrectPopupRef = ref();
const handleCorrect = () => {
  stopTiming();
  questionCorrectPopupRef.value.open(currentQuestion.value.id);
}
/**
 * 收藏
 */
const handleFavorite = async () => {
  if (!currentQuestion.value.isFavorite) {
    await collectQuestion(currentQuestion.value.id);
    currentQuestion.value.isFavorite = true;
    uni.$ie.showToast('收藏成功');
  } else {
    await cancelCollectQuestion(currentQuestion.value.id);
    currentQuestion.value.isFavorite = false;
    uni.$ie.showToast('取消收藏成功');
  }
}
const beforeClose = () => {
  const { readonly } = examPageOptions;
  // 避免在阅卷模式下点击纠错后开始计时
  if (readonly) {
    return;
  }
  startTiming();
}
const handleMark = () => {
  currentQuestion.value.isMark = !currentQuestion.value.isMark;
};
const handleCalendar = () => {
  examStatsCardRef.value?.open();
}
const handleSubmit = () => {
  emit('submit');
}
</script>
<style lang="scss" scoped></style>