<template>
    <div class="main" v-if="loaded">
        <div class="test-top-box white-bg clearfix">
            <ks-button class="fr" pain @click="returnBack">返回</ks-button>
            <h2 class="f14 weight-normal record-title"><span class="f20 vertical-align">练习记录：</span><font class="vertical-align">{{periodname}}</font></h2>
        </div>
        <div class="grade-ranking white-bg">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" v-if="testRecordList&&testRecordList.length">
                <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 testRecordList" :key="i">
                    <td class="align-center darkgray-font">
                        <span>{{(getParameters.page-1)*10+i+1}}</span>
                    </td>
                    <td class="darkgray-font">{{item.adddate}}</td>
                    <td class="align-center darkgray-font">{{item.newusertime}}</td>
                    <td class="align-center darkgray-font">总{{item.tk_num}}题/对{{item.tk_num-item.error_num}}题</td>
                    <td class="align-center darkgray-font"><a class="red-font cursor-pointer" @click="lookResult(item)">查看</a></td>
                </tr>
            </table>
            <div class="empty-block_empty" v-else>暂无数据</div>
            <div class="align-center clearfix mt30 mb20">
                <ks-pagination :total="totalCount" @togglePage="togglePage($event)" :pagesize="10" v-if="totalCount"></ks-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import {GetTestRecordList} from '@/api/exam'
    export default {
        data(){
            return{
                getParameters:{
                    courseid:this.$route.query.courseid,
                    typeid:this.$route.query.typeid,
                    page:1,/**当前页码 */
                    pagesize:10,/**当前条数 */
                },
                loaded:false,
                testRecordList:[],
                periodname:'',
                totalCount: 0,
                
            }
        },
        methods:{
            returnBack(){
                history.back()
            },
            loadPage(){
                
                GetTestRecordList(this.getParameters).then(res=>{
                    if(res.result){
                        document.title = res.periodname+'练习记录'
                        this.testRecordList = res.data
                        this.periodname = res.periodname
                        this.testRecordList.map(item=>{
                            let minute = Math.floor(item.exam_time/60)
                            let second = Math.floor(item.exam_time%60) 
                            if(minute){
                                item.newusertime = minute+'分'+second+'秒'
                            }else{
                                item.newusertime = second+'秒'
                            }
                        })
                        this.totalCount = res.totalcount

                    }
                    this.loaded = true
                })
                
            },
            lookResult(data){
                this.$router.push({
                    name: "ExaminationResult",
                    query: {
                        answerid: data.id,
                        type: 2,
                        paperid: this.$route.query.typeid,
                        categoryid: 0,
                        typeid:this.$route.query.typeid,
                    }
                });
            },
            //从page组件传递过来的当前page
            togglePage(indexPage){
                //打印出当前页数
                this.getParameters.page = indexPage
                this.loadPage()
            },
            printGrade(){
                this.$print(this.$refs.print)
            }
        },
        mounted(){
            
            this.loadPage()
            
        }
    }
</script>
<style scoped>
    .test-top-box {
        padding-top: 12px;
    }
    .record-title{
        line-height: 40px;
    }
    .grade-ranking{
        margin-top:20px;
        padding: 15px;
    }
    .grade-ranking .title th{
        background: #f8f8f8;
        border-bottom:1px solid #eee;
    }
    .grade-ranking .title th{
        padding: 15px;
        font-size: 16px;
    }
    .grade-ranking td{
        padding: 15px 12px;
        border-bottom:1px solid #eee;
    }
    /* .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>
