<template >
  <view class="examListBox">
    <view v-for="item in examList"
          :key="item.id"
          class="examListitem"
          @click="goExamDetail(item.exam_code)">
      <view>
        <text>试卷编号:</text><text>{{item.exam_code}}</text>
      </view>
      <view>
        <text>得分:</text><text>{{item.total_score}} 分</text>
      </view>
      <view>
        <text>总分:</text><text>{{item.score}} 分</text>
      </view>
      <view>
        <text>用时:</text><text>{{item.user_exam_time}} 分钟</text>
      </view>
      <view>
        <text>总时:</text><text>{{item.exam_time}} 分钟</text>
      </view>
      <view>
        <text>答题日期:</text><text>{{item.add_time}}</text>
      </view>
    </view>
    <view class="noExam"
          v-if="examList.length === 0">暂无答题记录!</view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      examList: [],
    };
  },
  created() {
    this.getExamList();
  },
  methods: {
    async getExamList() {
     // console.log(this.userinfo);
      const res = await this.$request.get("examination/Question/getExamList", {
        params: {
          user_id: this.userinfo.userId,
        },
      });
      this.examList = res.data;
    },
    async goExamDetail(exam_code) {
      const res = await this.$request.get(
        "examination/Question/getExamQusestionList",
        {
          params: {
            exam_code: exam_code,
          },
        }
      );
      let data = JSON.stringify(res.data);
      uni.navigateTo({
        url: `/pages/template/exam/examSelect/examQuestion?data=${data}`,
      });
    },
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.examListBox {
  height: 100vh;
  overflow: scroll;
  .examListitem {
    margin: 20rpx 20rpx;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border-radius: 30rpx;
    border: 1rpx solid #eeeeee;
    view {
      margin-bottom: 5rpx;
      text {
        display: inline-block;
        font-size: 36rpx;
        // font-weight: bold;
      }
      & > text:nth-child(1) {
        min-width: 150rpx;
        // color: red;
      }
    }
  }
  .noExam {
    color: rgb(147, 147, 147);
    text-align: center;
    margin-top: 500rpx;
    font-size: 30rpx;
  }
}
</style>