<template>
  <div class="analysis-info">
    <div v-if="item.tktype != 1">
      <div class="analysis-info__title">参考答案</div>
      <div class="analysis-info__content" v-if="item.tkinfo">
        <div v-if="item.tktype == 5">
          <p v-for="(ans,a) in item.tkinfo.answer" :key="a">({{a+1}}) &nbsp; <span v-html="ans.toString()"></span></p>
          <!-- {{ans.toString()}} -->
        </div>
        <div v-else>{{getReferenceAnswer(item.tktype,item.tkinfo)}}</div>
      </div>
      <div class="analysis-info__title">你的答案</div>
      <div class="analysis-info__content">
        <div v-if="item.tktype == 5">
          <p v-for="(ans,a) in item.useranswer" :key="a">({{a+1}}) &nbsp; {{ans?ans.toString():'未填写答案'}}</p>
        </div>
        <div v-else>{{getAnswer(item.useranswer,item.tktype,item.tkinfo)}}</div>
      </div>
    </div>
    <div v-else>
      <div class="analysis-info__title">参考答案</div>
      <div class="analysis-info__content" v-if="item.tkinfo">
        <span v-html="getReferenceAnswer(item.tktype,item.tkinfo)"></span>
      </div>
      <div class="analysis-info__title">你的答案</div>
      <div class="analysis-info__content">
        {{getAnswer(item.useranswer,item.tktype)}}
      </div>
      <div v-if="item.keywords&&item.keywords.length">
        <div class="analysis-info__title">关键词</div>
        <div class="analysis-info__content">
          <p v-for="(keys,k) in item.keywords" :key="k">{{keys.toString()}}</p>
        </div>
      </div>
    </div>
    <div class="analysis-info__title">题目解析</div>
    <div class="analysis-info__content" v-if="item.tkinfo" v-html="item.tkinfo.analysis || '暂无解析'"></div>
    <div class="analyze-box f14 mt10" v-if="item.tkinfo.analysis_videofile || item.analysis_videofile">
        <div class="analysis-info__title">视频解析</div>
        <!-- <span class="audiofile-btn" @click="showVideo">点击查看视频解析</span> -->
        <video width="100%" height="400" controls class="analysis-video">
            <source :src="item.tkinfo.analysis_videofile" v-if="item.tkinfo.analysis_videofile" type="video/mp4">
            <source :src="item.analysis_videofile" v-else-if="item.analysis_videofile" type="video/mp4">
        </video>
    </div>
    <div class="analyze-box f14 mt10" v-if="item.hearing_text">
        <div class="analysis-info__title">听力原文</div>
        <div class="analysis-info__content" v-html="item.hearing_text"></div>
    </div>
    <div class="analyze-box f14 mt10" v-if="item.tkinfo.audiofile || item.audiofile">
        <div class="analysis-info__title">听力音频</div>
        <audio class="success" :src="item.tkinfo.audiofile" v-if="item.tkinfo.audiofile" controls></audio>
        <audio class="success" :src="item.tkinfo.audiofile" v-else-if="item.audiofile" controls></audio>
    </div>
    <div class="analyze-box f14 mt10" v-if="item.course_list&&item.course_list.length">
        <div class="analysis-info__title">关联课程</div>
        <div class="analysis-info__content">
          <a :href="citem.view_url" target="_blank" class="green-font underline mr20" v-for="citem in item.course_list" :key="citem.courseid">{{citem.name}}</a>
        </div>
    </div>
    <div class="analyze-box f14 mt10" v-if="item.comment">
        <div class="analysis-info__title">教师评语</div>
        <div class="analysis-info__content">{{item.comment}}</div>
    </div>
    <div v-if="(($route.query.type == 1||$route.name == 'TestPage') && (item.tktype==1||item.tktype==3||item.tktype==5)) && item.score_rule" class="score_rule">
        评分规则：
        <div class="analysis-info__content">
          {{item.score_rule.ruletype_name}}
          <span v-if="item.score_rule.rule_type == 1||item.score_rule.rule_type == 4||item.score_rule.rule_type == 7">
              <span v-for="(citem,c) in item.score_rule.option_list" :key="c" class="mr10">{{citem.option}}(<font>{{citem.score}}分</font>)</span>
          </span>
          <span v-else-if="item.score_rule.rule_type == 2||item.score_rule.rule_type == 5||item.score_rule.rule_type == 6">
              <span v-if="item.score_rule.average_score">{{item.score_rule.average_score}}分</span>
          </span>
        </div>
    </div>

  </div>
</template>
<script>
import {getLetter,getLetterIndex} from '@/utils'
export default {
  name: "AnalysisInfo",
  props: {
    /**题目对象 */
    item: Object,
    /**父级id */
    parenttkid:0
  },
  
  data() {
    return {
      isShowOpera:false
    };
  },
  filters: {
    
    
  },
  methods:{
    showVideo(){
      this.isShowOpera = this.isShowOpera ? false : true
    },
    /**
     * 答案内容过滤
     */
    getAnswer(val, tktype, tkinfo = {}) {
      var _val = val.toString();
      if (_val === "") {
        return "无";

      }else if(tktype == 2 || tktype == 3){
        return val.join()
      } else if (tktype == 4) {
        return _val === "1" ? "A" : "B";
      } else {
        return _val;
      }
    },
    /**
     * 获取参考答案
     */
    getReferenceAnswer(tktype,tkinfo){
      if(tktype == 2 || tktype == 3){
        let answer = [];
        tkinfo.answer.map(letter=>{
          let index 
          if(!this.parenttkid){
            
            if(tkinfo.real_answer && tkinfo.real_answer.length){
              index = tkinfo.real_answer.indexOf(letter);
              answer.push(getLetter(index))
            }
          }else{
            answer = tkinfo.answer
          }
          
        })
        
        return answer.toString()
      }if(tktype == 4){
        return tkinfo.answer.toString() === "1" ? "A" : "B";
      }else{
        return tkinfo.answer.toString()
      }
    }
  }
};
</script>
<style scoped>
/*题目解析*/
.analysis-info {
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
  background: #f9f9f9;
}
.analysis-info__title {
  font-size: 14px;
}
.analysis-info__content {
  font-size: 14px;
  color: #999;
  padding: 5px 0 10px 0;
  line-height: 22px;
  border-radius: 4px;
}
.score_rule{
  font-size: 14px;
}
.audiofile-btn{
  border: 0.05rem solid #e64a3b;
  color: #e64a3b;
  padding: 0 0.5rem;
  line-height: 1rem;
  height: 1rem;
  border-radius: 1rem;
  display: inline-block;
}
.underline{
  text-decoration: underline;
}
.analysis-video,.success{
  margin: 0.5rem 0;
}
.mr10{
  margin-right:0.5rem;
}
</style>


