<template>
    <div class="select position-relative" v-if="loaded">
        <div v-if="action==1">
            <div class="answer-box darkgray-font gray-bg clearfix">
                <div class="answer-con f15">
                    <span v-if="item.tktype==4">
                        <span class="mr20">参考答案：<font class="green-font">{{item.answer.toString()=='0'?'错误':'正确'}}</font></span>
                        <span class="ml20" v-if="item.useranswer.toString()=='0'">您的答案：<font class="red-font">错误</font></span>
                        <span class="ml20" v-else-if="item.useranswer.toString()=='1'">您的答案：<font class="red-font">正确</font></span>
                        <span class="ml20" v-else>您的答案：<font class="red-font">暂未做题</font></span>
                    </span>
                    <span v-else>
                        <span class="mr20">参考答案：<font class="green-font">{{item.answer.toString()}}</font></span>
                        <span class="ml20">您的答案：<font class="red-font">{{item.useranswer.toString()||'暂无做题'}}</font></span>
                        <span class="ml20" v-if="item.tktype==3 && type!=2">
                            
                            <span v-if="item.score_rule.rule_type == 0">
                                评分规则：漏选不得分
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 1">
                               评分规则： 按选项分值给分：<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.average_score">
                                评分规则：按答案数平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 3">
                                评分规则：只要一空错误就不得分
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 4">
                                评分规则：按每空给分：<span v-for="(citem,c) in item.score_rule.option_list" :key="c" class="mr10">{{c}}、{{citem.option}}(<font>{{citem.score}}分</font>)</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 5&&item.score_rule.average_score">
                                评分规则：按每空平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 6&&item.score_rule.average_score">
                                评分规则：关键词平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="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>该题得分：{{item.userscore}}分</span> -->
                        </span>
                    </span>
                    <!-- <span class="ml10 iconfont red-font" :class="item.useranswer.toString()==item.answer.toString()?'icon-dagou':'icon-dacha'"></span> -->
                    <span class="ml10 iconfont red-font icon-dagou" v-if="Number(item.score)&&(Number(item.userscore)==Number(item.score))"></span>
                    <span class="ml10 iconfont red-font icon-dacha" v-else-if="Number(item.userscore)==0"></span>
                    <span class="ml10" v-if="type!=2">得分：<font class="red-font f16">{{item.userscore}}</font>分</span>
                    <div v-if="item.comment">教师点评：{{item.comment}}</div>
                </div>
                
            </div>
            <div class="analyze-box f14">
                <font class="darkgray-font">答案解析：</font>
                <span class="gray777-font" v-html="item.analysis"></span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.analysis_videofile">
                <font class="darkgray-font">视频解析：</font>
                <span class="audiofile-btn" @click="isShowOpera = true;">点击查看视频解析</span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.hearing_text">
                <font class="darkgray-font">听力原文：</font>
                <span v-html="item.hearing_text"></span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.audiofile">
                <font class="darkgray-font">听力音频：</font>
                <audio class="success" :src="item.audiofile" controls style="vertical-align: middle;"></audio>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.course_list&&item.course_list.length">
                <font class="darkgray-font">关联课程：</font>
                <a :href="citem.view_url" target="_blank" class="green-font underline" v-for="citem in item.course_list" :key="citem.courseid">{{citem.name}}</a>
            </div>
        </div>
        <div v-else>
            <h3 class="weight-normal f14">题目{{index+1}}：<span v-html="item.title"></span></h3>
            <div class="test-option f14 darkgray-font line-height26">
                <p v-for="oitem in item.tkinfo.content" :key="oitem.order">
                    <span class="vertical-align"><font v-if="oitem.order">{{oitem.order}}.</font><span v-html="oitem.name"></span></span>
                </p>
            </div>
            <div class="answer-box darkgray-font gray-bg clearfix">
                <div class="answer-con f15">
                    <span v-if="item.tktype==4">
                        <span class="mr20">参考答案：<font class="green-font">{{item.tkinfo.answer.toString()=='0'?'错误':'正确'}}</font></span>
                        <span class="ml20" v-if="item.useranswer.toString()=='0'">您的答案：<font class="red-font">错误</font></span>
                        <span class="ml20" v-else-if="item.useranswer.toString()=='1'">您的答案：<font class="red-font">正确</font></span>
                        <span class="ml20" v-else>您的答案：<font class="red-font">暂未做题</font></span>
                    </span>
                    <span v-else>
                        <span class="mr20">参考答案：<font class="green-font">{{item.tkinfo.answer.toString()}}</font></span>
                        <span class="ml20">您的答案：<font class="red-font">{{item.useranswer.toString()||'暂无做题'}}</font></span>
                        
                        <span class="ml20" v-if="item.tktype==3 && type!=2">
                            
                            <span v-if="item.score_rule.rule_type == 0">
                                评分规则：漏选不得分
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 1">
                                评分规则：按选项分值给分：<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.average_score">
                                评分规则：按答案数平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 3">
                                评分规则：只要一空错误就不得分
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 4">
                                评分规则：按每空给分：<span v-for="(citem,c) in item.score_rule.option_list" :key="c" class="mr10">{{c}}、{{citem.option}}(<font>{{citem.score}}分</font>)</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 5&&item.score_rule.average_score">
                                评分规则：按每空平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="item.score_rule.rule_type == 6&&item.score_rule.average_score">
                                评分规则：关键词平均给分：<span>{{item.score_rule.average_score}}分</span>
                            </span>
                            <span v-else-if="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>
                    </span>
                    <span class="ml10 iconfont red-font icon-dagou" v-if="Number(item.score)&&(Number(item.userscore)==Number(item.score))"></span>
                    <span class="ml10 iconfont red-font icon-dacha" v-else-if="Number(item.userscore)==0"></span>
                    <span class="ml20" v-if="type!=2">该题得分：{{item.userscore}}分</span>
                    <div v-if="item.comment">教师点评：{{item.comment}}</div>
                </div>
            </div>
            <div class="analyze-box f14">
                <font class="darkgray-font">答案解析：</font>
                <span class="gray777-font" v-html="item.tkinfo.analysis"></span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.tkinfo.analysis_videofile">
                <font class="darkgray-font">视频解析：</font>
                <span class="audiofile-btn" @click="isShowOpera = true;">点击查看视频解析</span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.hearing_text">
                <font class="darkgray-font">听力原文：</font>
                <span v-html="item.hearing_text"></span>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.tkinfo.audiofile">
                <font class="darkgray-font">听力音频：</font>
                <audio class="success" :src="item.tkinfo.audiofile" controls style="vertical-align: middle;"></audio>
            </div>
            <div class="analyze-box f14 mt10" v-if="item.course_list&&item.course_list.length">
                <font class="darkgray-font">关联课程：</font>
                <a :href="citem.view_url" target="_blank" class="green-font underline" v-for="citem in item.course_list" :key="citem.courseid">{{citem.name}}</a>
            </div>
        </div>

        <ks-dialog
        :visible.sync="isShowOpera"
        title="视频解析"
        width="700px"
        align="center"
        top="15%"
        >
            <div class="tips-con">
                <video width="100%" height="400" controls>
                    <source :src="item.analysis_videofile" v-if="action==1" type="video/mp4">
                    <source :src="item.tkinfo.analysis_videofile" v-else type="video/mp4">
                </video>
            </div>
        </ks-dialog>
    </div>
</template>

<script>
  export default {
    name: 'AnalyzeSelect',
    props:['item','index','action','type'],
    data () {
        return {
            loaded:false,
            isShowOpera: false,
        }
    },
    methods:{
        //A-Z
        getEN(index){
            var arr = [];
            for(var i = 65; i < 91; i++){
                arr.push(String.fromCharCode(i));
            }  
            return arr[index];
        }
    },
    mounted(){
        
        if(this.action!=1){
            let newCon = []
            this.item.tkinfo.content.map((oitem,i)=>{
                newCon.push({
                    name:oitem,
                    order:this.getEN(i)
                })
            })
            this.item.tkinfo.content = newCon

        }
        this.loaded = true
        // if(this.item.userscore!='0'){
        //     if(this.item.userscore<this.item.score){
        //         this.item.right = 1
        //     }else if(this.item.userscore==this.item.score){
        //         this.item.right = 2
        //     }
        // }else{
        //     this.item.right = 0
        // }
        // this.loaded = true
        
    }
  }
</script>
<style scoped>
    .select{
        line-height: 22px;
    }
    .select h3{
        margin-bottom: 25px;
    }
    .checkbox{
        width: 17px;
        height: 17px;
        -webkit-appearance: none;
        cursor: pointer;
        background-image: url(../assets/common/check.png);
        background-repeat: no-repeat;
        vertical-align: middle;
        margin-right: 5px;
    }
    .checkbox:checked {
        background-position: 0 -17px;
    }
    .answer-box{
        margin:20px -44px;
        padding: 15px 44px;
    }
    .answer-con{
        padding-right: 100px;
    }
    .audiofile-btn{
        border: 1px solid #e64a3b;
        color: #e64a3b;
        padding: 4px 10px;
        border-radius: 20px;
        display: inline-block;
    }
</style>
