<!--考核预览-->
<template>
  <div class="assessmentPreview">
    <p class="reset-button-one" style="margin:20px 0 0 20px;font-weight:700;" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    <div class="course-info">
      <div class="name-p">{{exerciseData.assessName}}</div>
      <div class="title-p">{{exerciseData.title}}</div>
      <div class="top-name-max-box">
        <div class="top-num-max-box">
          <div>题目总数：{{maxTotal}}</div>
          <div v-if="singleList.length>0">单选题数：{{singleList.length}}</div>
          <div v-if="multipleList.length>0">多选题数：{{multipleList.length}}</div>
          <div v-if="judgeList.length>0">多选题数：{{judgeList.length}}</div>
        </div>
      </div>
      <p class="num-p"></p>
    </div>
    <div class="center-info-box scrollbar-box">
      <div class="for-max-box" v-if="singleList[0]">
        <p class="for-title-p">单选题 (共{{singleList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in singleList" :key="index">
          <div class="for-name-box">
            <p>单选</p>
            <p>{{index+1}}．{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">
            <img v-if="item.isRight != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.isRight == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}．{{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p v-if="item.isRight == 1" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">答案：{{item.abc}}</p>
          </div>
        </div>
      </div>
      <div class="for-max-box" v-if="multipleList[0]">
        <p class="for-title-p">多选题 (共{{multipleList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in multipleList" :key="index">
          <div class="for-name-box">
            <p>多选</p>
            <p>{{index+1}}．{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">
            <img v-if="item.isRight != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.isRight == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}．{{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p>答案：</p>
            <p v-if="item.isRight == 1" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">{{item.abc}}</p>
          </div>
        </div>
      </div>
      <div class="for-max-box" v-if="judgeList[0]">
        <p class="for-title-p">判断题 (共{{judgeList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in judgeList" :key="index">
          <div class="for-name-box">
            <p>判断</p>
            <p>{{index+1}}．{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">
            <img v-if="item.isRight != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.isRight == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}．{{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p v-if="item.isRight == 1" v-for="(item,indexOne) in minItem.chapterQuAnswerList" :key="indexOne">答案：{{item.abc}}</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { queryChapterQu } from "@/api/exam/el_course";
  export default {
    name: 'assessmentPreview',
    props:{
      exerciseData:{},
    },
    data() {
      return {
        maxTotal:0,
        singleList:[],
        multipleList:[],
        judgeList:[],
      }
    },
    created() {

    },
    mounted() {
      this.getQueryChapterQu();
    },
    methods: {
      //返回
      backPage(){
        this.$parent.goPage(1);
      },
      //获取章节题目数据
      getQueryChapterQu(){
        queryChapterQu(this.exerciseData.id).then( res => {
          console.log("res",res)
          let num = 0;
          let single = [];
          let multiple = [];
          let judge = [];
          for(let i=0;i<res.data.length;i++){
            num ++
            if(res.data[i].quType == 1){
              single.push(res.data[i]);
            }else if(res.data[i].quType == 2){
              multiple.push(res.data[i]);
            }else if(res.data[i].quType == 3){
              judge.push(res.data[i]);
            }
          }
          this.maxTotal = num;
          this.singleList = single;
          this.multipleList = multiple;
          this.judgeList = judge;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .assessmentPreview{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    *{
      margin:0;
      padding:0;
      font-weight:500;
      color:#333;
    }
    .course-info{
      .name-p{
        color:#333;
        font-size:18px;
        line-height:30px;
        font-weight:700;
        margin:10px 40px 0;
      }
      .title-p{
        color:#333;
        font-size:18px;
        line-height:30px;
        margin:0 40px 10px;
      }
      .top-name-max-box{
        padding: 0 40px 20px;
        .top-name-box{
          font-size:18px;
          line-height:40px;
          font-weight:700;
        }
        .top-title-box{
          font-size:18px;
          line-height:40px;
        }
        .top-num-max-box{
          display: flex;
          div{
            background: #f0f0f0;
            padding:15px 20px;
            font-size:14px;
          }
        }
        .top-text-box{
          font-size:16px;
          line-height:40px;
        }
      }
      .num-p{
        border-bottom:3px dashed #dedede;
      }
    }
    .center-info-box{
      flex:1;
      overflow-y: scroll;
      padding:20px;
      .for-max-box{
        margin-top:40px;
        .for-title-p{
          font-size:18px;
          font-weight:700;
        }
        .for-box{
          margin-top:30px;
          .for-name-box{
            display: flex;
            p:nth-child(1){
              height:16px;
              font-size:12px;
              line-height:16px;
              width:40px;
              background: #0E9EED;
              margin:4px 20px 0 10px;
              color:#fff;
              text-align: center;
              border-radius:4px;
            }
            p:nth-child(2){
              font-size:18px;
              font-weight:700;
              line-height: 24px;
            }
          }
          .for-min-p{
            margin:20px 0 0 70px;
            display: flex;
            img{
              width:16px;
              height:16px;
              margin:3px 10px 0 0;
            }
            p{
              line-height:20px;
            }
          }
          .for-bottom-text-box{
            margin:20px 60px;
            display: flex;
            width:400px;
            padding:15px 20px;
            border:1px solid #dedede;
            p{
              font-size:16px;
              width:40px;
              font-weight:700;
              text-align: left;
            }
            p:nth-child(1){
              font-size:16px;
              text-align: right;
              width:80px;
              font-weight:700;
            }
            p:nth-child(2){
            }
            .p-color-a{
              color:#FF4E00;
            }
            .p-color-b{
              color:#0183FA
            }
          }
        }
      }
    }
  }
</style>
