<template>
    <div class="textarea position-relative">
        <div v-if="action==1">
            <div v-if="item.tktype==6">
                <ks-analyze-select :item="item.datainfo" :index="i" :action="1" v-if="citem.tktype==2||citem.tktype==3||citem.tktype==4" :type="type"/>
            </div>
            <div v-else>
                <div class="answer-box darkgray-font gray-bg clearfix">
                    <div class="answer-con f14 line-height26">
                        <div v-if="item.tktype==5">参考答案：<font class="green-font" v-for="(citem,c) in item.answer" :key="c">{{c+1}}、{{citem}}</font></div>
                        <div v-else>参考答案：<font class="green-font" v-html="item.answer.toString()"></font></div>
                        <div>
                            您的答案：<font class="red-font">{{item.useranswer.toString()||'暂无做题'}}</font>
                            <!-- <span class="ml10 iconfont red-font" :class="(item.right==2&&'icon-dagou')||(item.right==0&&'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>
                        </div>
                        <div v-if="(item.tktype==1||item.tktype==5) && 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+1}}、{{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>该题得分：<font class="red-font">{{item.userscore}}</font>分</span> -->
                        </div>
                        <span v-if="type!=2">该题得分：<font class="red-font">{{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></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>
        <div v-else>
            <h3 class="weight-normal f14">题目{{index+1}}：<span v-html="item.title"></span></h3>
            <div v-if="item.tktype==6" class="mt30">
                <div v-for="(citem,c) in item.tkinfo.childtk" :key="c" class="mb20 child-option">
                    <ks-analyze-select :item="citem" :index="c" v-if="citem.tktype==2||citem.tktype==3||citem.tktype==4" :type="type"/>
                    <div v-else>
                        <h3 class="weight-normal f14">第{{c+1}}小题：<span v-html="citem.title"></span></h3>
                        <div class="answer-box darkgray-font gray-bg clearfix">
                            <div class="answer-con f14 line-height26">
                                <div v-if="citem.tktype==4">参考答案：<font class="green-font">{{citem.tkinfo.answer.toString()=='0'?'错误':'正确'}}</font></div>
                                <!-- <div v-else-if="citem.tktype==5">参考答案：<font class="green-font" v-for="(titem,t) in citem.score_rule.option_list" :key="t">{{t+1}}、{{titem.option}}</font></div> -->
                                <div v-else-if="citem.tktype==5">参考答案：<font class="green-font mr20" v-for="(titem,t) in citem.tkinfo.answer" :key="t">{{t+1}}、{{titem.toString()}}</font></div>
                                <div v-else>参考答案：<font class="green-font" v-html="citem.tkinfo.answer.toString()"></font></div>
                                <div>
                                    <span v-if="citem.tktype==4">
                                        您的答案：<font class="red-font" v-if="citem.useranswer.toString()=='0'">错误</font>
                                        <font class="red-font" v-else-if="citem.useranswer.toString()=='1'">正确</font>
                                        <font class="red-font" v-else>暂未做题</font>
                                    </span>
                                    <span v-else>您的答案：<font class="red-font">{{citem.useranswer.toString()||'暂无做题'}}</font></span>
                                    <!-- <span class="ml10 iconfont red-font" :class="(item.right==2&&'icon-dagou')||(item.right==0&&'icon-dacha')"></span> -->
                                    <span class="ml10 iconfont red-font icon-dagou" v-if="Number(citem.score)&&(Number(citem.userscore)==Number(citem.score))"></span>
                                    <span class="ml10 iconfont red-font icon-dacha" v-else-if="Number(citem.userscore)==0"></span>
                                </div>
                                
                                <div v-if="(citem.tktype==1||citem.tktype==3||citem.tktype==5) && type!=2">
                                    
                                    <span v-if="citem.score_rule.rule_type == 0">
                                        评分规则：漏选不得分
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 1">
                                        评分规则：按选项分值给分：<span v-for="(titem,t) in citem.score_rule.option_list" :key="t" class="mr10">{{titem.option}}(<font>{{titem.score}}分</font>)</span>
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 2&&citem.score_rule.average_score">
                                        评分规则：按答案数平均给分：<span>{{citem.score_rule.average_score}}分</span>
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 3">
                                        评分规则：只要一空错误就不得分
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 4">
                                        评分规则：按每空给分：<span v-for="(titem,t) in citem.score_rule.option_list" :key="t" class="mr10">{{t+1}}、{{titem.option}}(<font>{{titem.score}}分</font>)</span>
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 5&&citem.score_rule.average_score">
                                        评分规则：按每空平均给分：<span>{{citem.score_rule.average_score}}分</span>
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 6&&citem.score_rule.average_score">
                                        评分规则：关键词平均给分：<span>{{citem.score_rule.average_score}}分</span>
                                    </span>
                                    <span v-else-if="citem.score_rule.rule_type == 7">
                                        评分规则：按每个关键词给分：<span v-for="(titem,t) in citem.score_rule.option_list" :key="t" class="mr10">{{titem.option}}(<font>{{titem.score}}分</font>)</span>
                                    </span>
                                    
                                </div>
                                <div v-if="type!=2">该题得分：{{citem.userscore}}分</div>
                                <div v-if="citem.comment">教师点评：{{citem.comment}}</div>
                            </div>
                        </div>
                        <div class="analyze-box f14">
                            <font class="darkgray-font">答案解析：</font>
                            <span class="gray777-font" v-html="citem.tkinfo.analysis"></span>
                        </div>
                        <div class="analyze-box f14 mt10" v-if="citem.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="citem.hearing_text">
                            <font class="darkgray-font">听力原文：</font>
                            <span v-html="citem.hearing_text"></span>
                        </div>
                        <div class="analyze-box f14 mt10" v-if="citem.tkinfo.audiofile">
                            <font class="darkgray-font">听力音频：</font>
                            <audio class="success" :src="citem.tkinfo.audiofile" controls></audio>
                        </div>
                        <div class="analyze-box f14 mt10" v-if="citem.hearing_text">
                            <font class="darkgray-font">听力原文：</font>
                            <span v-html="citem.hearing_text"></span>
                        </div>
                        <div class="set-score p10 line-height36 mt20" v-if="action==2">
                            本小题总分，你的评分<input type="text" v-model="citem.new_score" class="line-height36 ml10 mr10"/>分
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="answer-box darkgray-font gray-bg clearfix">
                    <div class="answer-con f14 line-height26">

                        <div v-if="item.tktype==4">参考答案：<font class="green-font">{{item.tkinfo.answer.toString()=='0'?'错误':'正确'}}</font></div>
                        <!-- <div v-else-if="item.tktype==5">参考答案：<font class="green-font" v-for="(citem,c) in item.score_rule.option_list" :key="c">{{c+1}}、{{citem.option}}</font></div> -->
                        <div v-if="item.tktype==5">参考答案：<font class="green-font mr20" v-for="(citem,c) in item.tkinfo.answer" :key="c">{{c+1}}、{{citem.toString()}}</font></div>
                        <div v-else>参考答案：<font class="green-font" v-html="item.tkinfo.answer.toString()"></font></div>

                        <!-- <div>参考答案：<font class="green-font">{{item.tkinfo.answer.toString()}}</font></div> -->
                        <div>
                            您的答案：<font class="red-font">{{item.useranswer.toString()||'暂无做题'}}</font>
                            <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>
                        </div>
                        <div v-if="(item.tktype==1||item.tktype==5) && 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+1}}、{{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> -->
                        </div>
                        <div v-if="type!=2">该题得分：{{item.userscore}}分</div>
                        <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 class="set-score p10 line-height36 mt20" v-if="action==2">
                    本小题总分，你的评分<input type="text" v-model="item.new_score" class="line-height36 ml10 mr10"/>分
                </div>
            </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: 'AnalyzeSubjective',
    props:['item','index','action','type'],
    data () {
      return {
          isShowOpera: false,
      }
    },
    methods:{
        setFlag(data){
            data.flag ? data.flag = 0 : data.flag = 1 
        },
        setCollect(data){
            data.collect ? data.collect = 0 : data.collect = 1 
        },
    },
    mounted(){
        console.log(this.item)
        // if(this.item.tktype!=6){
        //     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>
    .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;
    }
    .child-option{
        padding: 15px;
        border:1px dashed #ddd;
        border-radius: 5px;
        overflow: hidden;
    }
    .child-option .answer-box{
        margin: 20px -15px;
        padding: 15px;
    }
    .set-score{
        background: #fff7eb;
        padding-left:20px !important;
        padding-right: 20px !important;
    }
    .set-score input{
        width: 80px;
        border: 1px solid #eee;
        padding: 0 15px;
        border-radius: 3px;
    }
    .audiofile-btn{
        border: 1px solid #e64a3b;
        color: #e64a3b;
        padding: 4px 10px;
        border-radius: 20px;
        display: inline-block;
    }
</style>