<template>
  <view>
    <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'
              "
              >{{ index1 + 1 }}.</view
            >
            <view class="item1" v-else @click="jumpPage(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">{{ index2 + 1 }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="submitBox">
      <view class="submit">立即提交</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";
export default {
  setup() {
    let paperData = uni.getStorageSync("paperData");
    console.log(66, paperData);
    let Gid = uni.getStorageSync("userInfo").Id;
    let data = reactive({
      msg: { GuestId: Gid, PaperId: 5, PublishId: 1 },
      questionList: paperData.Paper.GroupList,
    });
    let methods = {
      changeNumToHan,
      jumpPage(index, index1) {
        uni.navigateTo({
          url:
            "/pages/exam/examPaper?index=" + index + "&&index1=" + (index1 + 1),
        });
      },

      // async getPaperDetail() {
      //   let res = await getPaperDetail(data.msg);
      //   if (res) {
      //     data.questionList = res.Data.Paper.GroupList;
      //     console.log(90, res.Data.Paper.GroupList);
      //   }
      // },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "答题卡",
    });
  },
};
</script>

<style scoped>
.answer-sheets {
  box-sizing: border-box;
  padding: 30rpx;
  height: calc(100vh - 150rpx);
  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: 44rpx;
  height: 44rpx;
  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;
}
</style>
