<template>
  <ie-page :safe-area-inset-bottom="false">
    <z-paging ref="paging" v-model="list" :safe-area-inset-bottom="true" :hide-no-more-by-limit="10"
      @query="handleQuery">
      <template #top>
        <ie-navbar title="收藏夹" />
      </template>
      <view v-for="item in list" :key="item.id">
        <question-book-item :data="item" @correct="handleCorrect" @cancelCollect="handleCancelCollect" />
      </view>
    </z-paging>
    <question-correct-popup ref="questionCorrectPopupRef" />
  </ie-page>
</template>

<script lang="ts" setup>
import type { Study } from '@/types';
import { getFavoriteQuestionList } from '@/api/modules/study';
import QuestionBookItem from '@/pagesStudy/components/question-book-item.vue';
import QuestionCorrectPopup from '@/pagesStudy/pages/exam-start/components/question-correct-popup.vue';
import { decodeHtmlEntities } from '@/composables/useExam';
import useQuestionBook from '@/composables/useQuestionBook';

const list = ref<Study.FavoriteQuestionVO[]>([]);
const paging = ref<ZPagingInstance>();
const questionCorrectPopupRef = ref();
const { cancelCollect, isOptionCorrect, isOptionSelected } = useQuestionBook();

const transfomeToQuestionBookVO = (list: Study.FavoriteQuestion[]): Study.FavoriteQuestionVO[] => {
  const orders = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  return list.map(item => {
    const originalOptions = [item.optionA, item.optionB, item.optionC, item.optionD, item.optionE, item.optionF, item.optionG].filter(Boolean) as string[];
    const options: Study.QuestionOption[] = originalOptions.map((option, index) => {
      const cleanedOption = option.replace(/[A-Z]\./g, '').replace(/\s/g, ' ');
      return {
        name: decodeHtmlEntities(cleanedOption),
        no: orders[index],
        id: index,
        isAnswer: false,
        isCorrect: false,
        isSelected: false,
        isIncorrect: false,
        isMissed: false
      }
    });
    return {
      id: item.id,
      title: item.title,
      options: options,
      answers: [], // 收藏下没有答案
      answer: decodeHtmlEntities(item.answer1 || ''),
      qtype: item.qtpye,
      typeId: item.typeId,
      parse: decodeHtmlEntities(item.parse || ''),
      collect: true
    }
  })
}
const handleQuery = (page: number, size: number) => {
  getFavoriteQuestionList({ pageNum: page, pageSize: size, type: 'question', subjectId: 0 }).then(res => {
    const data = transfomeToQuestionBookVO(res.rows);
    // 补充状态
    data.forEach(qs => {
      qs.options.forEach(option => {
        option.isCorrect = isOptionCorrect(qs, option);
        option.isSelected = isOptionSelected(qs, option);
        option.isMissed = !option.isSelected && option.isCorrect;
        option.isIncorrect = !option.isCorrect && option.isSelected;
      });
    });
    console.log(data)
    paging.value?.completeByTotal(data, res.total);
  });
};
const handleCorrect = (question: Study.FavoriteQuestionVO) => {
  questionCorrectPopupRef.value.open(question.id);
}
const handleCancelCollect = (question: Study.FavoriteQuestionVO) => {
  cancelCollect(question.id).then(res => {
    if (res) {
      paging.value?.refresh();
    }
  });
}
</script>

<style lang="scss"></style>