<template>
  <view>
    <van-nav-bar fixed>
      <template #left>
        <van-icon
          name="cross"
          style="font-size: 32rpx; color: #111"
          @click="back"
        />
      </template>
      <template #title>
        <view
          style="
            font-size: 32rpx;
            color: #111;
            font-family: PingFang SC;
            font-weight: 800;
          "
          >答题卡</view
        >
      </template>
    </van-nav-bar>
    <view class="answer-sheets">
      <view v-for="(item, index) in questionList" :key="index" class="item">
        <view class="name">
          {{ changeNumToHan(index + 1) }}、{{ item.GroupName }}</view
        >
        <view class="flex flex_wrap">
          <view
            v-for="(item1, index1) in item.DetailsList"
            :key="index1"
            class="flex flex_wrap"
          >
            <view
              class="item1-1"
              v-if="
                item1.QuestionTypeKey === 'reading-comprehensio' ||
                item1.QuestionTypeKey === 'listening'
              "
              @click="chooseTopic(index, index1)"
              >{{ index1 + 1 }}.</view
            >
            <view
              class="item1"
              :class="{ isRes: item1.IsRes }"
              v-else
              @click="chooseTopic(index, index1)"
              >{{ index1 + 1 }}</view
            >

            <view
              v-if="
                item1.QuestionTypeKey === 'reading-comprehensio' ||
                item1.QuestionTypeKey === 'listening'
              "
              class="flex flex_wrap"
            >
              <view
                v-for="(item2, index2) in item1.QuestionContentObj"
                :key="index2"
              >
                <view
                  class="item1"
                  :class="{ isRes: item2.IsRes }"
                  @click="chooseTopic(index, index1)"
                  >{{ index2 + 1 }}</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="submitBox" v-if="ExamStatus === 2">
      <view class="submit" @click="savePaper">立即提交</view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { changeNumToHan } from "../../utils/index";
import { submitPaper } from "../../api/exam";
export default {
  props: {
    paperData: Object,
    ExamStuId: Number,
    SubmitTimes: Number,
    StartTime: String,
    ExamStatus: Number,
  },
  setup(props, ctx) {
    let data = reactive({
      questionList: props.paperData.Paper.GroupList,
    });

    let methods = {
      changeNumToHan,
      chooseTopic(index, index1, index2) {
        ctx.emit("chooseTopic", {
          index,
          index1,
          index2,
        });
      },
      //隐藏答题卡
      back() {
        ctx.emit("hideAnswer");
      },
      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(props.paperData.Paper));
        delete obj.Group_Id;
        obj.Exam_Student_Id = props.ExamStuId;
        let time1 = props.StartTime;
        let time2 = methods.getNowTime();
        var d1 = new Date(time1);
        var d2 = new Date(time2);
        let TimeDis = parseInt(d2 - d1) / 1000 / 60;
        if (TimeDis < props.SubmitTimes) {
          uni.showToast({
            title: `开考不足${props.SubmitTimes}分钟禁止交卷哦~`,
            icon: "none",
          });
          return;
        }
        let res = await submitPaper(obj);
        if (res) {
          if (res.Code == 1) {
            uni.showToast({
              title: res.Message,
              icon: "none",
            });
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/index/index",
              });
            }, 1000);
          }
        }
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style scoped>
.answer-sheets {
  box-sizing: border-box;
  padding: 30rpx;
  height: calc(100vh - 300rpx);
  overflow-y: auto;
}
.name,
.num {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #111111;
}
.num {
  width: 100rpx;
  text-align: center;
}
.item {
  margin-bottom: 20rpx;
}
.item1-1 {
  width: 690rpx;
  margin: 22rpx 0 0 0;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #111111;
}
.item1 {
  width: 55rpx;
  height: 55rpx;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  margin: 22rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item2 {
  width: 44rpx;
  height: 44rpx;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  text-align: center;
  line-height: 44rpx;
  margin-right: 55rpx;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.choose {
  background-color: #00acf9 !important;
  color: #ffffff !important;
}
.submitBox {
  width: 750rpx;
  height: 150rpx;
  background-color: #e2e2e2;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding-top: 40rpx;
}
.submit {
  width: 600rpx;
  height: 70rpx;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00acf9;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
  margin: 0 auto;
}
.isRes {
  background-color: #00acf9 !important;
  color: #ffffff !important;
  border: none !important;
}
</style>
