<template>
    <div class="main">
        <div class="test-top-box white-bg" v-if="$route.query.type==1">
            <h2 class="test-title align-center f20 weight-normal">{{title}}</h2>
            <div class="test-intro line-height26 darkgray-font">
                <p>◇ 本卷共分为{{$route.query.dtnum}}大题{{$route.query.tknum||0}}小题，作答时间为{{$route.query.answertime||0}}分钟，总分{{$route.query.sumscore||0}}分</p>
                <p>◇ 试卷来源：{{$route.query.schoolname||'暂无来源'}}</p>
            </div>
        </div>
        <div class="test-top-bottom white-bg position-relative">
            <h2 class="f20 align-center weight-normal">考试结果</h2>
            <div v-if="isInfo">
                <div v-if="$route.query.type!=2">
                    <div class="score red-font">{{resultInfo.sumscore}}<font class="f14">分</font></div>
                    <ul class="examination-result clearfix">
                        <li class="text-box1 fl f16">
                            <p>本次练习共{{resultInfo.tk_num}}道题目</p>
                            <p>答对{{resultInfo.success_tknum}}道题</p>
                            <p>考试时长：<font v-if="minute">{{minute}}分钟</font>{{second||0}}秒</p>
                            <p>交卷时间：{{resultInfo.adddate}}</p>
                        </li>
                        <li class="text-box2 fl">
                            
                            <ks-circle-progress
                            ref="$circle"
                            class="progress"
                            :isAnimation="true"
                            :isRound="true"
                            width="240"
                            radius="10"
                            :progress="resultInfo.zhunquelv.toString()"
                            barColor="#f78075"
                            duration="1000"
                            delay="20"
                            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
                            backgroundColor="#e6e6e6"
                            text="正确率"
                            >
                            </ks-circle-progress>
                        </li>
                        <li class="text-box3 fl f16">
                            <p>分数：{{resultInfo.sumscore}}分</p>
                            <p>正确率：{{resultInfo.zhunquelv}}%</p>
                            <p>分数排名：{{resultInfo.order_top}}</p>
                        </li>
                    </ul>
                    <div class="btn-box-con">
                        <router-link :to="{name:'ParsingPage',query:{id:getParameters.answerid,categoryid:getParameters.categoryid,paperid:getParameters.paperid,dtnum:$route.query.dtnum,tknum:$route.query.tknum,answertime:$route.query.answertime,sumscore:$route.query.sumscore,schoolname:$route.query.schoolname,title:title,type:1}}" tag="a"><ks-button type="danger" btnstyle="height:47px;">查看解析</ks-button></router-link>
                        <router-link :to="{name:'GradeRanking',query:{categoryid:getParameters.categoryid,paperid:getParameters.paperid,dtnum:$route.query.dtnum,tknum:$route.query.tknum,answertime:$route.query.answertime,sumscore:$route.query.sumscore,schoolname:$route.query.schoolname}}" tag="a"><ks-button type="success" btnstyle="height:47px;">成绩排行</ks-button></router-link>
                        <!-- <ks-button type="success" btnstyle="height:47px;">下载试卷</ks-button> -->
                    </div>
                </div>
                <div v-else>
                    <ul class="examination-result clearfix">
                        <li class="text-box1 fl f16">
                            <p>本次练习共{{resultInfo.do_num}}道题目</p>
                            <p>答错{{resultInfo.error_num}}道题</p>
                            <p>交卷时间：{{resultInfo.adddate}}</p>
                        </li>
                        <li class="text-box2 fl">
                            <ks-circle-progress
                            ref="$circle"
                            class="progress"
                            :isAnimation="true"
                            :isRound="true"
                            width="240"
                            radius="10"
                            :progress="resultInfo.zhunquelv.toString()"
                            barColor="#f78075"
                            duration="1000"
                            delay="20"
                            timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
                            backgroundColor="#e6e6e6"
                            text="正确率"
                            >
                            </ks-circle-progress>
                        </li>
                        <li class="text-box3 fl f16">
                            <p>正确率：{{resultInfo.zhunquelv}}%</p>
                            <p>考试时长：<font v-if="minute">{{minute}}分钟</font>{{second||0}}秒</p>
                        </li>
                    </ul>
                    <div class="btn-box-con">
                        <router-link :to="{name:'ParsingPage',query:{id:getParameters.answerid,categoryid:getParameters.categoryid,paperid:getParameters.paperid,dtnum:$route.query.dtnum,tknum:$route.query.tknum,answertime:$route.query.answertime,sumscore:$route.query.sumscore,schoolname:$route.query.schoolname,title:title,type:2,typeid:$route.query.typeid}}" tag="a"><ks-button type="danger" btnstyle="height:47px;">查看解析</ks-button></router-link>
                    </div>
                </div>
            </div>
            <div class="red-font f20 align-center" v-else>{{tips}}</div>
            
        </div>
        <div class="mt20 white-bg p20" v-if="$route.query.type==1&&resultInfo.course_list&&resultInfo.course_list.length">
            <h2 class="f16 weight-normal">试卷关联课程</h2>
            <ul class="bind-course">
                <li v-for="item in resultInfo.course_list" :key="item.courseid" class="mt20 clearfix position-relative">
                    <div class="bind-course-img mr20 position-absolute">
                        <a :href="item.view_url" target="_blank" :title="item.name"><img :src="item.photourl" :alt="item.name"></a>
                    </div>
                    <div class="bind-course-con">
                        <h3 class="f16 weight-normal"><a :href="item.view_url" target="_blank" :title="item.name">{{item.name}}</a></h3>
                        <div class="bind-course-intro mt20" v-html="item.intro"></div>
                        <p class="darkgray-font mt20">{{item.learncount}}人加入学习</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {GetPerformance,GetYQWXCertificatePaper} from '@/api/exam'
    export default {
        data(){
            return{
                getParameters:{
                    categoryid:this.$route.query.categoryid||0,
                    paperid:this.$route.query.paperid,
                    answerid:this.$route.query.answerid,
                    type:this.$route.query.type||1
                },
                minute:0,
                second:0,
                resultInfo:{},
                tips:'',
                isInfo:false,
                title:''
            }
        },
        methods:{
            getExamResult(){
                GetPerformance(this.getParameters).then(res=>{
                    if(res.result){
                        this.resultInfo = res.data
                        if(this.$route.query.type==2){
                            this.minute = Math.floor(res.data.exam_time/60)
                            this.second = Math.floor(res.data.exam_time%60)
                        }else{
                            this.minute = Math.floor(res.data.time/60)
                            this.second = Math.floor(res.data.time%60) 
                        }
                        
                        this.isInfo = true
                    }else{
                        this.tips = res.msg
                        this.isInfo = false
                    }
                    this.title = res.title
                    this.getExamScore()
                })
            },
            getExamScore(){
                 var params = {
                    paperid:this.getParameters.paperid,	//试卷ID
                    score:this.$route.query.sumscore	//当前试卷考试得分
                 }
                 GetYQWXCertificatePaper(params).then(res=>{
                     if(res.result){
                        this.$notify({
                        title: '获得证书',
                        dangerouslyUseHTMLString: true,
                        duration: 0,
                        message: '<strong style="line-height: 36px;">恭喜获得《'+this.title+'》试卷证书<br><a href="/user#/user/cred">点击查看证书</a></strong>'
                    });
                    }
                 })
            }
        },
        mounted(){
            document.title = '查看结果'
            this.getExamResult()
        }
    }
</script>
<style scoped>
    .test-top-bottom{
        padding: 30px 162px;
        margin-top: 22px;
    }
    .test-top-bottom h2{
        margin-bottom: 60px;
    }
    .test-top-bottom .score{
        font-size: 80px;
        position: absolute;
        right: 56px;;
        top:40px;
    }
    .examination-result li{
        float: left;
    }
    .examination-result .text-box1{
        width: 317px;
    }
    .examination-result .text-box2{
        width: 240px;
    }
    .examination-result .text-box3{
        width: 216px;
        padding-left: 110px;
        box-sizing: border-box;
    }
    .text-box1,.text-box3{
        padding-top: 64px;
    }
    .examination-result li p{
        line-height: 42px;
    }
    .bind-course li{
        padding-left: 220px;
        min-height: 130px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
    .bind-course li:last-child{
        border-bottom: 0;
        padding-bottom: 0;
    }
    .btn-box-con{
        text-align: center;
        margin-top: 75px;
        padding-bottom: 75px;
    }
    .btn-box-con .ks-button{
        display: inline-block;
        width: 177px;
        margin: 0 20px;
    }
    .bind-course-img{
        width: 200px;
        height: 130px;
        border-radius: 5px;
        overflow: hidden;
        left: 0;
        top: 0;
    }
    .bind-course-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .bind-course-intro{
        height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
</style>
