<template>
  <ie-navbar :left-text="pageTitle" custom-back @left-click="handleLeftClick">
    <template #headerRight>
      <view v-if="!isReadOnly" class="flex items-center gap-x-40 h-full">
        <view class="text-28" :class="{ 'text-red-500': practiceDuration > totalExamTime }">
          {{ formatPracticeDuration }}
        </view>
        <!-- 练习模式才有背题模式 -->
        <view v-if="isPractice" class="px-10 h-full flex items-center" @click="handleMoreClick">
          <ie-image src="/pagesStudy/static/image/icon-setting.png" custom-class="w-38 h-auto" mode="widthFix" />
        </view>
      </view>
      <view v-else class="text-28">用时：{{ formatPracticeDuration }}</view>
    </template>
  </ie-navbar>
</template>
<script lang="ts" setup>
import { EnumPaperType } from '@/common/enum';
import { Transfer } from '@/types';
import { EXAM_PAGE_OPTIONS, EXAM_DATA } from '@/types/injectionSymbols';
import { useExam } from '@/composables/useExam';
import { useTransferPage } from '@/hooks/useTransferPage';

const props = defineProps<{
  totalExamTime: number;
}>();

const { transferTo, transferBack } = useTransferPage();
const examPageOptions = inject(EXAM_PAGE_OPTIONS) || {} as Transfer.ExamAnalysisPageOptions;
const examData = inject(EXAM_DATA) || {} as ReturnType<typeof useExam>;
const { formatPracticeDuration, practiceDuration } = examData;
const titleMap = {
  [EnumPaperType.PRACTICE]: '知识点练习',
  [EnumPaperType.SIMULATED]: '模拟考试',
  [EnumPaperType.TEST]: '组卷作业',
}
const readonlyTitleMap = {
  [EnumPaperType.PRACTICE]: '练习解析',
  [EnumPaperType.SIMULATED]: '考试解析',
  [EnumPaperType.TEST]: '作业解析',
}
const isPractice = computed(() => {
  return examPageOptions?.paperType === EnumPaperType.PRACTICE;
});
const pageTitle = computed(() => {
  if (examPageOptions) {
    const { name, readonly, paperType } = examPageOptions;
    if (readonly) {
      return readonlyTitleMap[paperType as keyof typeof readonlyTitleMap];
    }
    return titleMap[paperType as keyof typeof titleMap];
  }
  return '练习';
});
const isReadOnly = computed(() => {
  return examPageOptions?.readonly || false;
});
const emit = defineEmits<{
  (e: 'left-click'): void;
  (e: 'right-click'): void;
}>();
const handleLeftClick = () => {
  emit('left-click');
}
const handleMoreClick = () => {
  emit('right-click');
}
</script>
<style lang="scss" scoped></style>