<template>
  <!-- 填空题 -->
  <view>
    <view class="item" style="padding: 0 20px">
      <view class="name">
        <view> {{ changeNumToHan(sortIndex) }}、{{ data.GroupName }} </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"
      >
        <swiper-item v-if="sortIndex != 1"></swiper-item>
        <swiper-item
          v-for="(item1, index1) in data.DetailsList"
          :key="item1.id"
        >
          <view class="item1">
            <view class="flex flex_start_center">
              <view>{{ index1 + 1 }}、</view>
              <view class="num" v-html="item1.Title"></view>
            </view>
            <!-- <view v-for="(item2, index2) in item1.QuestionContentObj" :key="item2.id"
							class="flex item2 flex_start_center">
							<view class="chooseName" @click="change(index1, index2)">
								<input type="text" v-model="item1.myAnswer" class="input" />
							</view>
						</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,
    isLast: Boolean,
    sort: Number,
    sortTotal: Number,
    startIndex: Number,
  },
  setup(props, context) {
    let { ctx } = getCurrentInstance();
    props.paperData.DetailsList.forEach((item, index) => {
      item.myAnswer = "";
    });
    let data = reactive({
      data: props.paperData,
      sortIndex: props.sort + 1,
      sortTotal: props.sortTotal,
      current: 1, //默认从第几个开始-用于从快捷菜单点入
      ExamIndex: 1, //第几题
      statusBarHeight: 0,
    });
    //判断是否是第一大题
    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(index1, index2) {
        data.data.DetailsList[index1].choose =
          data.data.DetailsList[index1].QuestionContentObj[index2].Name;
      },
      onchange(e) {
        data.ExamIndex = e.detail.current;
        if (data.ExamIndex === data.data.DetailsList.length + 1) {
          console.log("进入");
          this.$emit("getAfterTopic");
        }
        if (e.detail.current == 0) {
          this.$emit("getBeforeTopic");
        }
      },
    };
    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;
    });
    return {
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>
<style scoped>
.name {
  height: 90rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ExamIndex_Box {
  margin-right: 40rpx;
}
.Single_Before {
  font-size: 28rpx;
  font-weight: bold;
  color: #da7878;
}

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

.swiper-box {
  height: calc(100vh - 270rpx);
  box-sizing: border-box;
}

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

.item {
  margin-bottom: 40rpx;
}

.item1 {
  align-items: center;
}

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

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

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

.chooseName {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}

.input {
  box-sizing: border-box;
  width: 690rpx;
  border-bottom: 2rpx solid #000;
}
</style>
