<template>
    <div class="main" v-if="loaded">
        <div class="test-top-box white-bg">
            <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="grade-ranking white-bg">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" ref="print">
                <tr class="title">
                    <th class="align-center">排名</th>
                    <th>用户名</th>
                    <th class="align-center">完成用时</th>
                    <th class="align-center">考试分数</th>
                    <th class="align-center">做题时间</th>
                </tr>
                <tr v-for="(item,i) in gradeList" :key="i">
                    <td class="align-center darkgray-font">
                        <span v-if="item.order_top==1" class="rank white-font red-bg">{{item.order_top}}</span>
                        <span v-else-if="item.order_top==2" class="rank white-font yellow-bg">{{item.order_top}}</span>
                        <span v-else-if="item.order_top==3" class="rank white-font green-bg">{{item.order_top}}</span>
                        <span v-else class="rank white-font darkgray-bg">{{item.order_top}}</span>
                    </td>
                    <td class="darkgray-font">{{item.username}}</td>
                    <td class="align-center darkgray-font">{{item.newusertime}}</td>
                    <td class="align-center darkgray-font">{{item.sumscore}}分</td>
                    <td class="align-center darkgray-font">{{item.adddate}}</td>
                </tr>
            </table>
            <div class="print clearfix">
                <ks-button class="fr" type="danger" @click="printGrade">打印成绩表</ks-button>
                <ks-pagination :total="totalCount" @togglePage="togglePage($event)" :pagesize="10" v-if="totalCount"></ks-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import {GetGradeRankList} from '@/api/exam'
    export default {
        data(){
            return{
                getParameters:{
                    paperid:this.$route.query.paperid,
                    categoryid:this.$route.query.categoryid,
                    page:1,/**当前页码 */
                    pagesize:10,/**当前条数 */
                },
                loaded:false,
                gradeList:[],
                title:'',
                totalCount: 0,
                
            }
        },
        methods:{
            loadPage(){
                
                GetGradeRankList(this.getParameters).then(res=>{
                    if(res.result){
                        this.gradeList = res.data
                        this.title = res.data[0].title
                        this.gradeList.map(item=>{
                            let minute = Math.floor(item.time/60)
                            let second = Math.floor(item.time%60) 
                            if(minute){
                                item.newusertime = minute+'分'+second+'秒'
                            }else{
                                item.newusertime = second+'秒'
                            }
                            
                        })
                        this.totalCount = res.totalcount

                    }
                    this.loaded = true
                })
                
            },
            //从page组件传递过来的当前page
            togglePage(indexPage){
                //打印出当前页数
                this.getParameters.page = indexPage
                this.loadPage()
            },
            printGrade(){
                this.$print(this.$refs.print)
            }
        },
        mounted(){
            document.title = '成绩排行'
            this.loadPage()
            
        }
    }
</script>
<style scoped>
    .grade-ranking{
        margin-top:20px;
        padding: 15px;
    }
    .grade-ranking .title th{
        background: #fff;
        border-bottom:1px solid #eee;
    }
    .grade-ranking .title th{
        padding: 15px;
        font-size: 16px;
    }
    .grade-ranking td{
        padding: 12px;
    }
    .grade-ranking tr:nth-of-type(2n+1) td{
        background: #fff8f7;
    }
    .rank{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 20px;
        line-height: 20px;
    }
    .print{
        margin-top:30px;
    }
</style>
