<template>
  <view class="bg-white rounded-5">
    <view class="px-30 pt-32 pb-20">
      <view class="text-28 text-fore-title font-bold ellipsis-2">{{ data.name }}</view>
      <view class="flex items-center gap-16 mt-20">
        <view class="tag-item bg-[#FFFBEB] text-[#F97316]">{{ data.subjectName }}</view>
        <view class="tag-item bg-back text-fore-light">{{ data.subjectGroup }}</view>
      </view>
    </view>
    <uv-line color="#F6F8FA" />
    <view class="px-30 py-20 flex items-center justify-between">
      <view class="text-24 text-fore-light">
        <template v-if="data.score !== null">
          <text>得分：</text>
          <text class="text-primary">{{ data.score }}</text>
          <text>分</text>
        </template>
      </view>
      <view class="px-20 py-8 border border-solid rounded-full text-24 text-white"
        :class="[isFinished ? 'bg-success border-success' : 'bg-primary border-primary']" @click="handleStartExam">
        <text>{{ isFinished ? '查看分析' : '继续考试' }}</text>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { EnumPaperType, EnumSimulatedRecordStatus } from '@/common/enum';
import { Study, Transfer } from '@/types';
import { useTransferPage } from '@/hooks/useTransferPage';

const { transferTo } = useTransferPage();
const props = defineProps<{
  data: Study.SimulatedRecord;
  type?: number
}>();
const isFinished = computed(() => {
  return props.data.state === EnumSimulatedRecordStatus.SUBMIT;
});

const handleStartExam = () => {
  if (isFinished.value) {
    transferTo('/pagesStudy/pages/simulation-analysis/simulation-analysis', {
      data: {
        examineeId: props.data.id,
        paperType: EnumPaperType.SIMULATED
      }
    });
  } else {
    const pageOptions: Transfer.ExamAnalysisPageOptions = {
      paperType: EnumPaperType.SIMULATED,
      readonly: false,
      simulationInfo: {
        name: props.data.name,
        // 难受
        examineeId: props.data.id,
      }
    }
    transferTo('/pagesStudy/pages/exam-start/exam-start', {
      data: pageOptions,
    });
  }
}

</script>
<style lang="scss" scoped>
.tag-item {
  @apply text-24 rounded-4 px-10 py-6 w-fit;
}
</style>