<template>
  <!-- 单选题 -->
  <view>
    <view class="item" style="padding: 0 20px">
      <view class="name">
        <view class="grow">
          {{ changeNumToHan(sortIndex) }}、{{ data.GroupName }}
          <text class="Exam_Score">（共{{ data.DetailsList.length }}道,{{ data.GScore }}分）</text>
        </view>
        <view class="ExamIndex_Box">
          <text class="Single_Before">{{ ExamIndex }}</text
          >/<text class="Exam_Total">{{ data.DetailsList.length }}</text>
        </view>
      </view>
      <swiper
        class="swiper-box"
        :style="{
          height: `calc(100vh - 300rpx - ${statusBarHeight}px)`,
        }"
        :autoplay="autoplay"
        :current="current"
        @change="onchange"
        :skip-hidden-item-layout="true"
        :disable-programmatic-animation="true"
      >
        <swiper-item v-if="sortIndex != 1"></swiper-item>
        <swiper-item v-for="(item1, index1) in data.DetailsList" :key="index1">
          <view class="item1" :style="{height: `calc(100vh - 390rpx - ${statusBarHeight}px)`}">
            <view class="flex flex_start_center">
              <view class="num" v-html="item1.Title"></view><text class="Exam_Score">（{{item1.Score}}）</text>
            </view>

            <view
              v-for="(item2, index2) in item1.QuestionContentObj"
              :key="index2"
              class="flex item2 flex_start_center"
            >
              <template v-if="isOperate">
                <view
                  class="chooseNum"
                  :class="{ myAnswer: item2.IsAnswer }"
                  @click="change(item1, item2)"
                  >{{ item2.ShowName }}
                </view>
                <view
                  class="chooseName"
                  @click="change(item1, item2)"
                  v-html="item2.Content"
                ></view>
              </template>
              <template v-else>
                <view
                  class="chooseNum"
                  :class="{ isTrueAnswer: item2.IsAnswer }"
                  >{{ item2.Name }}
                </view>
                <view
                  class="chooseName"
                  :class="{ isTrueAnswer: item2.IsAnswer }"
                  v-html="item2.Content"
                >
                </view>
              </template>
            </view>
			<view class="AnswerContent" v-if="!isOperate">
			  <view>
			    <text style="color: #8c8a94">正确答案：</text>
			    <text class="isTrueAnswer">{{ item1.Answer }}</text
			    >，
			    <text
			      >您的答案是：
			      <template v-if="item1.StundetAnswer != ''">
			        <text
			          v-if="item1.Answer == item1.StundetAnswer"
			          class="isTrueAnswer"
			        >
			          {{ item1.StundetAnswer }}，回答正确
			        </text>
			        <text v-else class="isNotAnswer"
			          >{{ item1.StundetAnswer }}，回答错误</text
			        >
			      </template>
			      <template v-else>
			        <text>未作答</text>
			      </template>
			    </text>
			  </view>
						<view style="margin:20rpx 0;" v-if="item1.StudentScore!=''||item1.StudentScore===0">
							<text style="color:#8c8a94">您的得分：</text>
							<text class="isTrueAnswer" v-if="item1.StudentScore>0">{{item1.StudentScore}}</text>
							<text class="isNotAnswer" v-else>{{item1.StudentScore}}</text>
						</view>
			  <view
			    style="margin-top: 20rpx; word-wrap: break-word"
			    v-if="item1.AnswerParse" class="flex"
			  >
			    <text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
			    <view style="color: #000" v-html="item1.AnswerParse"></view>
			  </view>
			</view>
          </view>
		  <view class="AnswerBtn clear">
		  	<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="ExamIndex!=1||sortIndex!=1">上一题</view>
		  	<view class="AnswerBtnSecond" v-if="sortIndex != sortTotal" @click="getNextExam()">下一题</view>
		  </view>
        </swiper-item>
        <swiper-item v-if="sortIndex != sortTotal">
          <!-- 最后一页 -->
        </swiper-item>
      </swiper>
    </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";
export default {
  props: {
    paperData: Object,
    sort: Number,
    sortTotal: Number,
    isLast: Boolean,
    startIndex: Number,
    isOperate: Boolean,
	ExamStatus: Number
  },
  setup(props, context) {
    let { ctx } = getCurrentInstance();
    let data = reactive({
      autoplay: false,
      sortIndex: props.sort + 1, //大题序号
      sortTotal: props.sortTotal, //总共多少道大题
      data: props.paperData,
      current: 1, //默认从第几个开始-用于从快捷菜单点入
      ExamIndex: 1, //第几题
      isOperate: props.isOperate,
      statusBarHeight: 0,
	  ExamStatus: props.ExamStatus
    });
    //判断是否是第一大题
    if (data.sortIndex === 1) {
      data.current = 0;
      //从答题卡进入
      if (props.startIndex) {
        data.current = props.startIndex - 1;
        data.ExamIndex = props.startIndex;
      }
    } else {
      if (props.startIndex) {
        data.current = props.startIndex;
        data.ExamIndex = props.startIndex;
      }
    }

    let methods = {
      changeNumToHan,
      jumpPage() {
        uni.navigateTo({
          url: "/pages/exam/examPaper",
        });
      },
      back() {
        uni.navigateBack();
      },
      //选题
      change(item1, item2) {
        context.emit("answerChange", data.data);
        item1.QuestionContentObj.map((e) => {
          if (e.Name == item2.Name) {
            e.IsAnswer = true;
          } else {
            e.IsAnswer = false;
          }
          if (e.IsAnswer) {
            //标记已回答
            item1.IsRes = true;
          }
        });
      },
      onchange(e) {
        data.ExamIndex = e.detail.current;
        if (data.sortIndex == 1) {
          data.ExamIndex = e.detail.current + 1;
        }

        if (data.ExamIndex === data.data.DetailsList.length + 1) {
          this.$emit("getAfterTopic");
        }
        if (e.detail.current == 0 && data.sortIndex != 1) {
          this.$emit("getBeforeTopic");
        }
      },
      jumpAnswerSheet() {
        uni.navigateTo({
          url: "/pages/exam/answerSheet",
        });
      },
	  //点击上一题
	  getBeforeExam(){
	  	data.current = data.current-1;
	  },
	  //点击下一题
	  getNextExam(){
	  	data.current = data.current+1;
	  }
    };
    onMounted(() => {
      if (props.isLast) {
        if (data.sortIndex === 1) {
          data.current = props.paperData.DetailsList.length - 1;
        } else {
          data.current = props.paperData.DetailsList.length;
        }
      }
      data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    });
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>
<style scoped>
.AnswerBtn{
	margin-top: 20rpx;
	padding:0 20px;
}
.clear{ clear:both} 
.AnswerBtnFirst{
	width:250rpx;
	height:60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 10rpx;
	border:1px solid #00ACF9;
	color:#00ACF9;
	float:left;
}
.AnswerBtnSecond{
	width:250rpx;
	height:60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 10rpx;
	background-color: #00ACF9;
	color:#fff;
	float:right;
}
.name {
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.isTrueAnswer {
  color: green !important;
}

.isNotAnswer {
  color: red !important;
}

.AnswerContent {
  font-size: 28rpx;
  padding: 25rpx;
  background-color: #f4f4f4;
  border-radius: 5px;
}

.Single_Before {
  font-size: 30rpx;
  font-weight: bold;
  color: #da7878;
}

.ExamIndex_Box {
  margin-right: 40rpx;
}

.Exam_Total {
  font-size: 25rpx;
  color: gray;
}

.answerSheet {
  font-size: 30rpx;
  margin-left: 20rpx;
  color: #000;
}

.swiper-box {
  box-sizing: border-box;
}

.num {
  font-size: 30rpx;
  font-family: PingFang SC;
  color: #111111;
}

.item {
  /* margin-bottom: 40rpx; */
  position: relative;
}

.item1 {
  /* margin: 25rpx 0; */
  align-items: center;
}

.item2 {
  padding-left: 25rpx;
  margin: 30rpx 0;
}

.myAnswer {
  background-color: #00acf9 !important;
  color: #ffffff !important;
}

.chooseNum {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  margin-right: 30rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}

.chooseName {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.Exam_Score{
	color:#999999;
	font-size:28rpx;
}

</style>
