<template>
  <ie-popup ref="popupRef" title="模式切换" @confirm="handleConfirm" @close="beforeClose">
    <view class="popup-content">
      <view class="flex items-center gap-x-40 px-40 pt-0 pb-40 bg-white">
        <view class="mode-card" :class="{ 'is-active': form.reviewMode === EnumReviewMode.AFTER_SUBMIT }"
          @click="handleChangeMode(EnumReviewMode.AFTER_SUBMIT)">
          <view class="text-32 font-bold h-60">练习</view>
          <view class="flex-1 mt-4 text-26">答完一组题查看结果解析</view>
        </view>
        <view class="mode-card" :class="{ 'is-active': form.reviewMode === EnumReviewMode.DURING_ANSWER }"
          @click="handleChangeMode(EnumReviewMode.DURING_ANSWER)">
          <view class="text-32 font-bold h-60">背题</view>
          <view class="flex-1 mt-4 text-26">答完一题直接出答案 左滑下一题</view>
        </view>
      </view>
      <view class="h-16 bg-back"></view>
      <view class="mx-40 pt-10">
        <uv-cell-group :border="false">
          <uv-cell title="答对直接下一题" :border="false">
            <template v-slot:value>
              <uv-switch v-model="form.autoNext" active-color="#31A0FC" inactive-color="#eeeeee"></uv-switch>
            </template>
          </uv-cell>
          <uv-cell title="清空重来" :border="false" :isLink="true" :disableHover="true" @click="handleClear"></uv-cell>
        </uv-cell-group>
      </view>
    </view>
  </ie-popup>
</template>
<script lang="ts" setup>
import { EnumReviewMode } from '@/common/enum';
import { useExam } from '@/composables/useExam';
import { Study, Transfer } from '@/types';
import { EXAM_DATA, EXAM_PAGE_OPTIONS } from '@/types/injectionSymbols';
import { useUserStore } from '@/store/userStore';

const emit = defineEmits<{
  (e: 'clear'): void;
}>();
const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { doneCount, startTiming, stopTiming, practiceSettings, setPracticeSettings, reset } = examData;

const form = ref<Study.PracticeSettings>(practiceSettings.value);
const popupRef = ref();
const userStore = useUserStore();
const open = () => {
  form.value = JSON.parse(JSON.stringify(practiceSettings.value));
  stopTiming();
  popupRef.value.open();
}
const close = () => {
  popupRef.value.close();
}
const beforeClose = () => {
  startTiming();
}
defineExpose({
  open,
  close
});

const handleConfirm = () => {
  userStore.setPracticeSettings(form.value);
  setPracticeSettings(form.value);
  close();
}
const handleChangeMode = (mode: EnumReviewMode) => {
  form.value.reviewMode = mode;
}
const handleClear = () => {
  if (doneCount.value <= 0) {
    return;
  }
  stopTiming();
  uni.$ie.showModal({
    title: '重新作答',
    content: '是否确认清空全部作答数据？',
  }).then(confirm => {
    if (confirm) {
      close();
      reset();
      setTimeout(() => {
        startTiming();
      }, 300);
    } else {
      startTiming();
    }
  });
}
</script>
<style lang="scss" scoped>
.popup-content {
  @apply py-30;
}

.mode-card {
  height: 140rpx;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.04);
  @apply flex-1 rounded-12 bg-white px-30 py-14 border border-solid border-white flex flex-col items-center justify-center text-fore-title text-left;
}

.is-active {
  box-shadow: none;
  @apply bg-[#E3F4FA] border-primary text-primary;
}
</style>