<template>
  <!--考试试卷详细信息，考试过的试卷内容-->
  <view style="padding-bottom: 60px;">
    <u-toast ref="messager"></u-toast>
    <page-title :showBack="true">查看我的答卷</page-title>
    <view style="background-color: #FFFFFF;">
      <u-cell-group>
        <u-cell title="答卷时间" :value="answerSurveyTime"></u-cell>
        <u-cell title="答卷用时" :value="testDuration+'秒'"></u-cell>
        <u-cell title="本次得分" :value="score"></u-cell>
      </u-cell-group>
    </view>
    <view style="padding: 20upx;">
      <view style="padding-top: 10upx;color: #757575; ">第{{ curIndex + 1 }}题 / 共{{ total }}题</view>
    </view>
    <view class="qitem">
      <view class="qitem-content">
        <view>[{{ getTypeName(curItem.type) }}]{{ curItem.content }}</view>
        <view class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></view>
      </view>
      <view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt"
            :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
        <view>
          <view>{{ toLetter(optIdx + 1) }}, {{ opt.content }}</view>
          <view v-if="opt.images" class="qimg">
            <img class="qimg-fit" :src="imageBaseUrl+opt.images"/>
          </view>
        </view>
        <view>
          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√
          </text>
          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×
          </text>
        </view>
      </view>
    </view>
    <view class="tit">试题答案</view>
    <view class="answer">
      <view class="result">
        <text v-if="curResult" style="color: #00aa00; ">回答正确</text>
        <text v-else style="color: #ff0000; ">回答错误</text>
      </view>
      <view class="wrought">
        <view class="correct-response">
          <view class="response-tit">正确答案</view>
          <view class="response-sels">
            <text v-for="op in correctOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
          </view>
        </view>
        <view class="wrong-response">
          <view class="wrong-tit">我的答案</view>
          <view class="wrong-sels">
            <text v-for="op in userOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="analysis">解析</view>
    <view class="analysis-con">联言判断就是断定集中事物情况同时存在的判断,因此该判断属于联言判断,答案为A</view> -->
    <view class="bottom-btns">
      <u-button type="info" text="上一题" @click="prevSub" class="next" :disabled="this.curIndex<1"></u-button>
      <u-button type="info" text="下一题" @click="nextSub" class="next"
                :disabled="this.curIndex>=(this.total-1)"></u-button>
    </view>
  </view>
</template>

<script>
import config from '@/config/index.js'
import apiCourseStudy from '@/api/modules/courseStudy.js'
import {formatDate, getQuestionType, correctJudgment, numberToLetter} from '@/utils/tools.js';

export default {
  data() {
    return {
      recordId: '',//保存的考试记录的id
      toLetter: numberToLetter,
      getTypeName: getQuestionType,
      imageBaseUrl: config.fileUrl,
      paper: {
        items: []
      },
      total: 0,
      curIndex: 0,//当前试题索引
      curItem: {},//当前试题
      curResult: false,//答案正确
      score: 0,//本次试卷的得分
      testName: '',
      contentId: '',
      courseId: '',
      passLine: 60,
      testDuration: 0,
      lastTime: '',
      correctOptIdxs: [],//正确的答案
      userOptIdxs: [],//用户的答案
    }
  },
  computed: {
    answerSurveyTime() {
      console.log(`answer time: ` , this.lastTime)
      if (!this.lastTime.length) return "Error Date"
      const [y, m, d, h, min, s] = this.lastTime
      return `${y}年${m}月${d}日 ${h}:${min}:${s}`
    }
  },
  onLoad(options) {
    //如果id不存在，应该返回错误页面
    this.recordId = options.id;//当前考试记录的id
    if (this.recordId) {
      this.loadAnswerPaper();
    }
  },
  methods: {
    loadAnswerPaper() {
      apiCourseStudy.myExamPaper(this.recordId).then(res => {
        if (res.status == 200) {
          this.lastTime = res.result.lastTime;
          this.score = res.result.score;
          this.contentId = res.result.contentId;
          this.courseId = res.result.courseId;
          this.passLine = res.result.passLine;
          this.testDuration = res.result.testDuration;
          if (res.result.paper == '') {
            this.$refs.messager.show({message: res.message, type: 'error'});
          } else {
            this.paper = JSON.parse(res.result.paper);
            this.total = this.paper.items.length;
            this.curItem = this.paper.items[this.curIndex];
            this.judgeAnswer();
          }
        } else {
          this.$refs.messager.show({message: res.message, type: 'error'});
        }
      })
    },
    judgeAnswer() {
      //正确答案和错误答案
      this.correctOptIdxs = [];//正确答案
      this.userOptIdxs = [];//用户的答案

      let $this = this;
      let item = this.curItem;
      item.options.forEach((opt, idx) => {
        //填充正确答案
        if (opt.answer) {
          $this.correctOptIdxs.push(idx);
        }
        if (item.type != 102) { //单选或判断
          if (opt.id == item.userAnswer) {
            $this.userOptIdxs.push(idx);
          }
        } else { //多选
          if (item.userAnswer.indexOf(opt.id) > -1) {
            $this.userOptIdxs.push(idx);
          }
        }
      });
      //判断答案是否正确
      if (this.correctOptIdxs.toString() == this.userOptIdxs.toString()) {
        this.curResult = true;
      } else {
        this.curResult = false;
      }
    },
    prevSub() {
      if (this.curIndex == 0) {
        return;
      }
      this.curIndex--;
      if (this.curIndex > -1) {
        this.curItem = this.paper.items[this.curIndex];
        this.judgeAnswer();
      }
    },
    nextSub() {
      this.curIndex++;
      if (this.curIndex < this.total) {
        this.curItem = this.paper.items[this.curIndex];
        this.judgeAnswer();
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.bottom-btns {
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0px;
  display: flex;
  justify-content: space-around;
}

.qitem {
  padding: 20upx 40upx;

  .qitem-content {
    padding: 20upx 0upx;
  }

  .qitem-opt {
    margin-bottom: 20upx;
    min-height: 50upx;
    border-radius: 4px;
    display: flex;
    background-color: #FFFFFF;
    justify-content: space-between;
    padding: 30upx 20upx;
  }

  .qitem-opt-user {
    background-color: #fff3e5;
  }

  .qitem-opt-correct {
    background-color: #5BA2FC;
    color: #FFFFFF;
  }

  .qitem-opt-wrong {
    background-color: #EF826B;
    color: #FFFFFF;
  }
}

.ed-top {
  display: flex;

  .preface {
    color: #D5D5D5;
    margin-left: 16px;
    margin-top: 19px;
  }

  .mold {
    font-size: 12px;
    color: #C1C1C1;
    margin-top: 22px;
    margin-left: 5px;
  }
}

.ed-center {
  .topic {
    color: #2E2E2E;
    margin-left: 16px;
    margin-top: 10px;
  }

  .topic-center {
    &-1 {
      width: 344px;
      height: 64px;
      border-radius: 4px;
      background: #5BA2FC;
      margin-left: 16px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .topic_left {
        line-height: 64px;
        margin-left: 16px;
        color: #FFFFFF;
        display: flex;

        .liany {
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .topic_right {
        color: #FFFFFF;
        line-height: 64px;
        margin-right: 13px;
      }
    }

    &-2 {
      width: 344px;
      height: 64px;
      border-radius: 4px;
      background: #EF826B;
      margin-left: 16px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .topic_left {
        line-height: 64px;
        margin-left: 16px;
        color: #FFFFFF;
        display: flex;

        .liany {
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .topic_right {
        color: #FFFFFF;
        line-height: 64px;
        margin-right: 13px;
      }
    }

    &-3 {
      width: 344px;
      height: 64px;
      border-radius: 4px;
      background: #FFFFFF;
      margin-left: 16px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .topic_left {
        line-height: 64px;
        margin-left: 16px;
        color: #000000;
        display: flex;

        .liany {
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .topic_right {
        color: #000000;
        line-height: 64px;
        margin-right: 13px;
      }
    }

    &-4 {
      width: 344px;
      height: 64px;
      border-radius: 4px;
      background: #FFFFFF;
      margin-left: 16px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      .topic_left {
        line-height: 64px;
        margin-left: 16px;
        color: #000000;
        display: flex;

        .liany {
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .topic_right {
        color: #000000;
        line-height: 64px;
        margin-right: 13px;
      }
    }

  }
}

.tit {
  color: #333333;
  margin-left: 14px;
  margin-top: 38px;
}

.answer {
  width: 346px;
  height: 112px;
  background: #FFFFFF;
  margin-left: 14px;
  margin-top: 18px;

  .result {
    font-size: 12px;
    color: #EF826B;
    padding-left: 20px;
    padding-top: 10px;
  }

  .wrought {
    display: flex;

    .correct-response {
      width: 87px;
      height: 70px;

      .response-tit {
        font-size: 14px;
        color: #B3B3B3;
        text-align: center;
        padding-top: 10px;
      }

      .response-sels {
        color: #5B5B5B;
        text-align: center;
        padding-top: 8px;
      }
    }

    .wrong-response {
      width: 87px;
      height: 70px;

      .wrong-tit {
        font-size: 14px;
        color: #B3B3B3;
        text-align: center;
        padding-top: 10px;
      }

      .wrong-sels {
        color: #5B5B5B;
        text-align: center;
        padding-top: 8px;
      }
    }
  }
}

.analysis {
  font-size: 14px;
  color: #D3D3D3;
  margin-left: 14px;
  margin-top: 20px;
}

.analysis-con {
  font-size: 12px;
  color: #000000;
  margin-left: 14px;
  margin-top: 10px;
}

.question {
  height: 52px;
  background: #EF826B;
  margin-top: 93px;
  color: #FFFFFF;
  text-align: center;
  line-height: 52px;
}

.qimg {
  //padding-left: 30px;
  width: 100%;
  text-align: left;

  .qimg-fit {
    width: 100%;

    object-fit: scale-down
  }
}
</style>
