<template>
  <view :style="{ 'padding-top': `${statusBarHeight}px` }">
    <view style="height: 100rpx"></view>
    <van-nav-bar fixed>
      <template #left>
        <van-icon name="cross" size="32rpx" @click="back" />
      </template>
      <template #title>
        <view class="flex" style="justify-content: center" @click="start">
          <van-image
            width="30rpx"
            height="30rpx"
            fit="cover"
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/clock.png"
            style="margin-right: 10rpx"
          />
          <van-count-down
            :time="time"
            :auto-start="autoTimeStart"
            class="flex flex_center_center"
            ref="countdown"
            @finish="examFinish"
          />
        </view>
      </template>
    </van-nav-bar>
    <view class="exam-con" v-if="!isShowAnswer && !isShowNotice">
      <i
        class="iconfont icon-caidanzu answerSheet"
        style="
          position: absolute;
          right: 30rpx;
          z-index: 999;
          margin-top: 26rpx;
        "
        :style="{ top: `calc(${statusBarHeight}px + 105rpx)` }"
        @click="showAnswerSheet"
      ></i>
      <view v-for="(item, index) in peaperDetail.Paper.GroupList" :key="index">
        <!-- 数字单选题 -->
        <SingleChoiceNumber
          :startIndex="item.startIndex"
          :paperData="item"
          @getBeforeTopic="getBeforeTopic()"
          @getAfterTopic="getAfterTopic()"
          @answerChange="getAnswerChange($event, index)"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isLast="isLast"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          v-if="
            item.QuestionTypeKey === 'single-number' && index === changeIndex
          "
        />
        <!-- 多选题 -->
        <MultipleChoice
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getBeforeTopic="getBeforeTopic()"
          @getAfterTopic="getAfterTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'multiple' && index === changeIndex"
        />
        <!-- 单选题 -->
        <SingleChoice
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getBeforeTopic="getBeforeTopic()"
          @getAfterTopic="getAfterTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'single' && index === changeIndex"
        />
        <!-- 听力题 -->
        <ListenTopic
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getBeforeTopic="getBeforeTopic()"
          @getAfterTopic="getAfterTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'listening' && index === changeIndex"
        />
        <!-- 填空题 -->
        <FillInTheBlanks
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getBeforeTopic="getBeforeTopic()"
          @getAfterTopic="getAfterTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'fill-in' && index === changeIndex"
        />

        <!-- 阅读理解 -->
        <readingCompre
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'reading-comprehensio' &&
            index === changeIndex
          "
        />
        <!-- 判断题 -->
        <Judge
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'judge' && index === changeIndex"
        />
        <!-- 简答题 -->
        <shortAnswer
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'short-answer' && index === changeIndex
          "
        />
        <!-- 名词解释 -->
        <nounExplanation
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'noun-explanation' && index === changeIndex
          "
        />
        <!-- 论述题 -->
        <easyQuestion
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'essay-question' && index === changeIndex
          "
        />
        <!-- 计算题 -->
        <Calculation
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'calculation' && index === changeIndex"
        />
        <!-- 分录题 -->
        <EntryProblem
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'entry-problem' && index === changeIndex
          "
        />
        <!-- 口语题 -->
        <Spoken
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'spoken' && index === changeIndex"
        />
        <!-- 其他 -->
        <Other
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'other' && index === changeIndex"
        />
        <!-- 完型填空 -->
        <Cloze
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'cloze' && index === changeIndex"
        />
        <!-- 资料题 -->
        <Dataquestion
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'data-question' && index === changeIndex
          "
        />
        <!-- 公用选择题 -->
        <SharingChoose
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'sharing-choose' && index === changeIndex
          "
        />
        <!-- 排序题 -->
        <SortingProblem
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          :isOperate="isOperate"
          :ExamStatus="ExamStatus"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="
            item.QuestionTypeKey === 'sorting-problem' && index === changeIndex
          "
        />
        <!-- 连线题待完善 -->
        <Connect
          :startIndex="item.startIndex"
          :paperData="item"
          :isLast="isLast"
          :sort="index"
          :sortTotal="peaperDetail.Paper.GroupList.length"
          @getAfterTopic="getAfterTopic()"
          @getBeforeTopic="getBeforeTopic()"
          @answerChange="getAnswerChange($event, index)"
          v-if="item.QuestionTypeKey === 'matching' && index === changeIndex"
        />
      </view>
    </view>
    <view v-if="isShowAnswer">
      <view class="answer-con" v-if="!isShowAnswerSee">
        <answer
          :paperData="peaperDetail"
          :ExamStuId="Exam_Student_Id"
          :StartTime="StartTime"
          :ExamStatus="ExamStatus"
          :SubmitTimes="SubmitTimes"
          @hideAnswer="hideAnswerSheet"
          @chooseTopic="jumpTopic"
          ref="answer"
        />
      </view>
      <!-- 答题卡查看对错 -->
      <answerSee
        :paperData="peaperDetail"
        @hideAnswer="hideAnswerSheet"
        @chooseTopic="jumpTopic"
        v-if="isShowAnswerSee"
      />
    </view>
    <view class="answer-con" v-if="isShowNotice">
      <examNotice
        :msg="msg"
        :ExamStatus="ExamStatus"
        @hideNotice="hideNotice"
      />
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { getPaperDetail } from "../../api/exam";
import { changeNumToHan } from "../../utils/index";
import { submitPaper } from "../../api/exam";

import SingleChoiceNumber from "../../components/subject/SingleChoiceNumber.vue";
import SingleChoice from "../../components/subject/SingleChoice.vue";
import MultipleChoice from "../../components/subject/MultipleChoice.vue";
import ListenTopic from "../../components/subject/ListenTopic.vue";
import FillInTheBlanks from "../../components/subject/FillInTheBlanks";
import readingCompre from "../../components/subject/readingCompre";
import Judge from "../../components/subject/judge.vue";
import ShortAnswer from "../../components/subject/shortAnswer.vue";
import nounExplanation from "../../components/subject/nounExplanation.vue";
import easyQuestion from "../../components/subject/easyQuestion.vue";
import Calculation from "../../components/subject/Calculation.vue";
import EntryProblem from "../../components/subject/EntryProblem.vue";
import Spoken from "../../components/subject/Spoken.vue";
import Other from "../../components/subject/Other.vue";
import Cloze from "../../components/subject/Cloze.vue";
import Dataquestion from "../../components/subject/Dataquestion.vue";
import SortingProblem from "../../components/subject/SortingProblem.vue";
import Connect from "../../components/subject/Connect.vue"; //"连线题"
import SharingChoose from "../../components/subject/SharingChoose.vue";
import answer from "../../components/subject/answer.vue"; //答题卡
import answerSee from "../../components/subject/answerSee.vue"; //查看答题卡对错,
import examNotice from "../../components/subject/examNotice.vue"; //考前须知
export default {
  components: {
    SingleChoiceNumber,
    SingleChoice,
    MultipleChoice,
    ListenTopic,
    FillInTheBlanks,
    readingCompre,
    Judge,
    ShortAnswer,
    nounExplanation,
    easyQuestion,
    Calculation,
    Spoken,
    Other,
    Cloze,
    Dataquestion,
    SortingProblem,
    EntryProblem,
    SharingChoose,
    Connect,
    answer,
    answerSee,
    examNotice,
  },
  setup(props, context) {
    let { refs } = getCurrentInstance();
    console.log(refs);
    let data = reactive({
      time: 999,
      statusBarHeight: 0,
      msg: {
        GuestId: 0,
        PaperId: 0,
        PublishId: 0,
      },

      peaperDetail: {},
      changeIndex: 0, //大题序号
      isLast: false, //用于判断是否从后往前翻
      isShowAnswer: false, //是否显示答题卡
      Exam_Student_Id: 0,
      autoTimeStart: false,
      isOperate: false, //考试状态 判断是考试还是查看答案
      isAutoTime: false,
      ExamStatus: -1,
      StartTime: "", //页面加载后的时间
      SubmitTimes: 0, //后台设置几分钟后可提交
      isShowNotice: false, //是否显示考前须知
      isShowAnswerSee: false,
    });
    let methods = {
      changeNumToHan,
      jumpPage() {
        uni.navigateTo({
          url: "/pages/exam/examPaper",
        });
      },
      start() {
        refs.countdown.start();
      },
      back() {
        uni.navigateBack();
      },
      async getPaperDetail() {
        let res = await getPaperDetail(data.msg);
        if (res) {
          if (res.Code == 1) {
            data.peaperDetail = res.Data;
            this.SubmitTimes = res.Data.Publish.SubmitTimes;
            data.time = res.Data.Publish.ExamTimes * 60 * 1000;
          }
        }
      },
      //往后翻
      getAfterTopic() {
        this.changeIndex++;
        this.isLast = false;
      },
      //往前翻
      getBeforeTopic() {
        this.changeIndex--;
        this.isLast = true;
      },
      //显示答题卡
      showAnswerSheet() {
        data.isShowAnswer = true;
      },
      //隐藏答题卡
      hideAnswerSheet() {
        data.isShowAnswer = false;
      },
      //隐藏考前提示
      hideNotice() {
        console.log("进入");
        data.isShowNotice = false;
      },
      //获取答案改变后的数据
      getAnswerChange(val, index) {
        data.peaperDetail.Paper.GroupList[index] = val;
      },
      //跳转到指定题目
      jumpTopic(val) {
        this.changeIndex = val.index;
        data.peaperDetail.Paper.GroupList[val.index].startIndex =
          val.index1 + 1;
        data.isShowAnswer = false;
        data.isLast = false;
      },
      //倒计时完成考试结束
      examFinish() {
        uni.showToast({
          title: "考试时间已到，系统将自动保存",
          icon: "none",
        });
        methods.savePaper();
      },
      getNowTime() {
        let dateTime;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf =
          new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
        let ss =
          new Date().getSeconds() < 10
            ? "0" + new Date().getSeconds()
            : new Date().getSeconds();
        dateTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
        return dateTime;
      },
      //交卷
      async savePaper() {
        let obj = JSON.parse(JSON.stringify(data.peaperDetail.Paper));
        delete obj.Group_Id;
        obj.Exam_Student_Id = parseInt(data.Exam_Student_Id);
        let time1 = data.StartTime;
        let time2 = methods.getNowTime();
        var d1 = new Date(time1);
        var d2 = new Date(time2);
        let TimeDis = parseInt(d2 - d1) / 1000 / 60;
        if (TimeDis < data.SubmitTimes) {
          uni.showToast({
            title: `开考不足${data.SubmitTimes}分钟禁止交卷哦~`,
            icon: "none",
          });
          return;
        }
        let res = await submitPaper(obj);
        if (res) {
          if (res.Code == 1) {
            uni.showToast({
              title: res.Message,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 1000);
          }
        }
      },
    };
    onMounted(() => {
      data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      data.StartTime =
        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    });
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  async onLoad(options) {
    if (options.GuestId) {
      this.msg.GuestId = options.GuestId;
    }
    if (options.PaperId) {
      this.msg.PaperId = options.PaperId;
    }
    if (options.Id) {
      this.msg.PublishId = options.Id;
    }
    if (options.Exam_Student_Id) {
      this.Exam_Student_Id = options.Exam_Student_Id;
    }
    //ExamStatus 1未开始 2已开始 3已考试 4缺考 5已阅卷
    if (options.ExamStatus) {
      this.ExamStatus = options.ExamStatus;
      if (
        this.ExamStatus == 2 ||
        this.ExamStatus == 1 ||
        this.ExamStatus == 4
      ) {
        this.isShowNotice = true;
        this.isOperate = true;
        this.autoTimeStart = true;
      }
      if (this.ExamStatus == 3 || this.ExamStatus == 5) {
        this.msg.isShowAnswer = true;
        this.isShowAnswerSee = true;
        this.isOperate = false;
        this.msg.isShowAnswer = true;
      }
    }
    await this.getPaperDetail();
    if (options.showScore) {
      this.isShowAnswer = true;
      this.isShowAnswerSee = true;
    }
  },
};
</script>

<style scoped>
.exam-con {
  box-sizing: border-box;
}

.answerSheet {
  font-size: 40rpx;
  margin-left: 30rpx;
  color: #000;
}
</style>
