<!--考核详情-->
<template>
  <div class="assessInfo">
    <div class="top-name-max-box">
      <div class="top-name-box">{{assessName}}</div>
      <div class="top-title-box">{{cateTitle}}</div>
      <div class="top-num-max-box">
        <div>题目总数：{{newData.otherData.allQu}}</div>
        <div v-if="newData.otherData.radioQu>0">单选题数：{{newData.otherData.radioQu}}</div>
        <div v-if="newData.otherData.multiQu>0">多选题数：{{newData.otherData.multiQu}}</div>
        <div v-if="newData.otherData.judgeQu>0">判断题数：{{newData.otherData.judgeQu}}</div>
      </div>
      <div class="top-text-box" :class="newData.otherData.accuracy == 100?'top-text-box-color-a':'top-text-box-color-b'">考核结果：{{newData.otherData.accuracy == 100?'全部正确，考核通过。':'正确数 '+correctNum+'，错题数 '+mistakeNum+'，考核未通过。'}}</div>
    </div>
    <div class="center-info-box scrollbar-box">
      <div class="for-max-box" v-if="newData.radioList[0]">
        <p class="for-title-p">单选题 (共{{newData.radioList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in newData.radioList" :key="index">
          <div class="for-name-box">
            <p>单选</p>
            <p>{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne">
            <img v-if="item.checked != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.checked == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}. {{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p :class="minItem.isRight == 1?'p-color-b':'p-color-a'">{{minItem.isRight == 1?'正确':'错误'}}</p>
            <p>答案：<span v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne" v-if="item.isRight == 1">{{item.abc}}</span></p>
          </div>
        </div>
      </div>
      <div class="for-max-box" v-if="newData.multiList[0]">
        <p class="for-title-p">多选题 (共{{newData.multiList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in newData.multiList" :key="index">
          <div class="for-name-box">
            <p>多选</p>
            <p>{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne">
            <img v-if="item.checked != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.checked == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}. {{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p :class="minItem.isRight == 1?'p-color-b':'p-color-a'">{{minItem.isRight == 1?'正确':'错误'}}</p>
            <p>答案：<span v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne" v-if="item.isRight == 1">{{item.abc}}</span></p>
          </div>
        </div>
      </div>
      <div class="for-max-box" v-if="newData.judgeList[0]">
        <p class="for-title-p">判断题 (共{{newData.judgeList.length}}题)</p>
        <div class="for-box" v-for="(minItem,index) in newData.judgeList" :key="index">
          <div class="for-name-box">
            <p>判断</p>
            <p>{{minItem.content}}</p>
          </div>
          <div class="for-min-p" v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne">
            <img v-if="item.checked != 1" src="@/assets/newImages/icon_5.png">
            <img v-if="item.checked == 1" src="@/assets/newImages/icon_6.png">
            <p>{{item.abc}}. {{item.content}}</p>
          </div>
          <div class="for-bottom-text-box">
            <p :class="minItem.isRight == 1?'p-color-b':'p-color-a'">{{minItem.isRight == 1?'正确':'错误'}}</p>
            <p>答案：<span v-for="(item,indexOne) in minItem.elPaperQuAnswerList" :key="indexOne" v-if="item.isRight == 1">{{item.abc}}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-button-box">
      <p class="bottom-button-p add-button-one-90" @click="backPage">返回</p>
    </div>
  </div>
</template>

<script>
import { assessDetail } from "@/api/exam/el_course";
export default {
  name: 'assessInfo',
  props:{
    paperId:{},
    cateTitle:{},
    assessName:{},
    correctNum:0,
    mistakeNum:0,
  },
  data() {
    return {
      newData:{
        name:"考核名称",
        title:"章节名称章节名称章节名称章节名称章节名称章节名称",
        total:10,
        single:5,
        multiple:2,
        judge:3,
        type:1,
      }
    }
  },
  created(){

  },
  mounted(){
    this.getInfo();
  },
  methods:{
    //返回
    backPage(){
      this.$parent.offMinPage();
    },
    getInfo(){
      this.loading = true;
      assessDetail(this.paperId).then( response => {
        this.newData =  response.data;
        let correct = 0;
        let mistake = 0;
        for(let i=0;i<response.data.radioList.length;i++){
          if(response.data.radioList[i].isRight == 1){
            correct ++;
          }else{
            mistake ++;
          }
        }
        for(let i=0;i<response.data.multiList.length;i++){
          if(response.data.multiList[i].isRight == 1){
            correct ++;
          }else{
            mistake ++;
          }
        }
        for(let i=0;i<response.data.judgeList.length;i++){
          if(response.data.judgeList[i].isRight == 1){
            correct ++;
          }else{
            mistake ++;
          }
        }
        this.correctNum = correct;
        this.mistakeNum = mistake;
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped lang="scss">
.assessInfo{
  flex:1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  *{
    margin:0;
    padding:0;
    font-weight:500;
  }
  .top-name-max-box{
    padding:20px 20px 0;
    .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;
      margin:10px 0;
      div{
        background: #f0f0f0;
        padding:15px 20px;
        font-size:14px;
      }
    }
    .top-text-box{
      font-size:16px;
      line-height:40px;
      padding-bottom:10px;
      border-bottom:2px dashed #dedede;
    }
    .top-text-box-color-a{
      color:#14AE10;
    }
    .top-text-box-color-b{
      color:#FF6666;
    }
  }
  .center-info-box{
    flex:1;
    overflow-y: scroll;
    padding:0 20px 20px;
    .for-max-box{
      padding-top:20px;
      .for-title-p{
        font-size:18px;
        font-weight:700;
      }
      .for-box{
        margin-top:20px;
        .for-name-box{
          display: flex;
          p:nth-child(1){
            font-size:12px;
            line-height:20px;
            width:40px;
            height: 20px;
            background: #0E9EED;
            margin:1px 10px;
            color:#fff;
            text-align: center;
            border-radius:4px;
          }
          p:nth-child(2){
            flex: 1;
            font-size:18px;
            font-weight:700;
            line-height: 18px;
          }
        }
        .for-min-p{
          margin:20px 0 0 60px;
          display: flex;
          img{
            margin-right:20px;
            width: 20px;
            height: 20px;
          }
          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;
            text-align: center;
          }
          p:nth-child(1){
            font-size:16px;
            width:80px;
            margin-right:20px;
            font-weight:700;
          }
          p:nth-child(2){
            font-size:16px;
            span{
              margin-right:10px;
            }
          }
          .p-color-a{
            color:#FF4E00;
          }
          .p-color-b{
            color:#0183FA
          }
        }
      }
    }
  }
  .bottom-button-box{
    height:100px;
    .bottom-button-p{
      width:200px;
      line-height:40px;
      font-size:18px;
      margin:30px auto;
    }
  }
}
</style>
