<template>
  <view class="bg-white">
    <view class="border-bottom flex items-center justify-between py-32 px-25 leading-27">
      <view class="text-28 text-fore-light flex items-center">
        <view class="w-12 h-12 rounded-full bg-[#E5E5E5]"></view>
        <view class="ml-10">{{ publishTime }}{{ `${data.publishUser ? `-${data.publishUser}` : ''}` }}</view>
      </view>
      <view :class="['text-28', data.state === EnumPaperWorkState.NOT_COMPLETED ? 'text-warning' : 'text-success']">
        {{ data.state === EnumPaperWorkState.NOT_COMPLETED ? '未完成' : '已完成' }}
      </view>
    </view>
    <view class="px-46 py-30 relative">
      <view>
        <text class="text-28 text-fore-title font-bold">{{ paperName }}</text>
        <text v-if="data.directed"
          class="ml-10 bg-[#F0FDF4] text-[#22C55E] border border-solid border-[#22C55E] text-20 rounded-4 px-10 py-2">定向</text>
      </view>
      <view class="mt-40 ml-20 text-24 ">
        <view>
          <text class="text-fore-light">得分/总分：</text>
          <text class="text-fore-title">{{ data.score || '-' }}/{{ data.total }}</text>
        </view>
        <view class="mt-14">
          <text class="text-fore-light">科目/批次：</text>
          <text class="text-fore-title">{{ batchName || '-' }}</text>
        </view>
        <view class="mt-14">
          <text class="text-fore-light">所属校区：</text>
          <text class="text-fore-title">{{ data.campusName || '-' }}</text>
        </view>
      </view>
      <view v-if="data.state === EnumPaperWorkState.COMPLETED"
        class="mt-20 bg-[#FFFBEB] py-18 px-20 rounded-5 text-24 text-[#F59E0B] flex items-center justify-between border border-solid border-[#FEF6DA]">
        <text>提交时间：{{ data.endTime || '-' }}</text>
        <text>做题时长：{{ formatSeconds(data.duration) || '-' }}</text>
      </view>
      <view class="absolute right-50 top-100">
        <view v-if="data.state === EnumPaperWorkState.COMPLETED"
          class="px-28 py-10 border border-solid border-primary rounded-full text-24 text-primary bg-[#EEF8FD]"
          @click="handleDetail">详情
        </view>
        <view v-else class="text-24 text-white bg-primary px-28 py-10 rounded-full" @click="handleStart">去完成</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { EnumPaperType, EnumPaperWorkState } from '@/common/enum';
import { useTransferPage } from '@/hooks/useTransferPage';
import { getPaperWorkDetail, getOpenExaminee } from '@/api/modules/study';
import { Study, Transfer } from '@/types';
import { formatSeconds, formatTime } from '@/utils/format';

const { transferTo } = useTransferPage();
const props = defineProps<{
  data: Study.PaperWork;
}>();
const paperName = computed(() => {
  const { universityName, majorName, name } = props.data;
  if (universityName && majorName) {
    return `${universityName}-${majorName}`;
  }
  return name;
});
const batchName = computed(() => {
  const { subjectName, batchName } = props.data;
  return `${subjectName}(${batchName || ''})`;
});
const publishTime = computed(() => {
  return formatTime(props.data.publishTime, 'yyyy年mm月dd日 hh:MM:ss');
});

const handleDetail = () => {
  uni.$ie.showLoading();
  getPaperWorkDetail(props.data.id).then(res => {
    uni.$ie.hideLoading();
    transferTo('/pagesStudy/pages/simulation-analysis/simulation-analysis', {
      data: {
        examineeId: res.data.examineeId,
        paperType: EnumPaperType.TEST
      }
    });
  }).catch(err => {
    uni.$ie.hideLoading();
    console.error(err);
  });

}

const handleStart = () => {
  getOpenExaminee({
    paperType: EnumPaperType.TEST,
    relateId: props.data.id,
    directed: props.data.directed
  }).then(res => {
    const pageOptions: Transfer.ExamAnalysisPageOptions = {
      paperType: EnumPaperType.TEST,
      readonly: false,
      simulationInfo: {
        examineeId: res.data.examineeId,
        name: batchName.value
      },
    }
    transferTo('/pagesStudy/pages/exam-start/exam-start', {
      data: pageOptions,
    });
  }).catch(err => {
    console.error(err);
  });
}
</script>
<style lang="scss" scoped></style>