<template>
    <div class="main" v-if="loaded==true">
        <div class="test-top-box white-bg">
            <h2 class="test-title align-center f20 weight-normal">{{(!$route.query.typeid && $route.query.title)?$route.query.title:'查看练习解析'}}</h2>
            <div class="test-intro line-height26 darkgray-font" v-if="$route.query.type!=2">
                <p v-if="!$route.query.typeid">◇ 本卷共分为{{$route.query.dtnum}}大题{{$route.query.tknum}}小题<font v-if="$route.query.answertime">，作答时间为{{$route.query.answertime}}分钟</font><font v-if="$route.query.sumscore">，总分{{$route.query.sumscore}}分</font></p>
                <p v-if="!$route.query.typeid && $route.query.schoolname">◇ 试卷来源：{{$route.query.schoolname}}</p>
            </div>
            <div class="test-tips pink-bg align-center line-height28 red-font f12" v-if="subjectNum">
                本套试卷含有主观题，针对主观题请自行参考解析评分
            </div>
            <ul class="tab-btn-box clearfix gray-bg" v-if="$route.query.type!=2">
                <li :class="curr==item.value?'fl red-bg white-font':'fl darkgray-bg white-font'" v-for="item in option" :key="item.value" @click="getCurr(item.value)">{{item.title}}</li>
            </ul>
        </div>
        <div class="clearfix test-con">
            <div class="test-con-left fl" :style=" $route.query.type==2 ? 'margin-top:17px':''">
                <div v-for="(item,n) in testList" :key="n" class="test-type-box">
                    <div class="test-type-tips white-bg line-height26 darkgray-font" v-if=" $route.query.type!=2 && curr==n">
                        <p>{{item.order}}、{{item.title}}（本大题共{{item.tklist.length}}小题<font v-if="!$route.query.typeid && item.dtscore">，<!-- 每小题{{item.tklist[0].score}}分， -->共{{item.dtscore}}分 {{item.dtintro}}</font>）</p>
                    </div>
                    <ul class="test-list">
                        <li v-for="(citem,i) in item.tklist" :key="citem.tkid" class="white-bg" v-show="n==curr" :ref="'djump'+citem.tkid">
                            <ks-analyze-select :item="citem" :index="i" v-if="citem.tktype==2||citem.tktype==3||citem.tktype==4" :type="$route.query.type"/>
                            <ks-analyze-subjective :item="citem" :index="i" v-else-if="citem.tktype==1||citem.tktype==5||citem.tktype==6" :type="$route.query.type"/>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="test-con-right fr">
                <div :class="isFixed==true?'test-right-inner isFixed':'test-right-inner'" ref="test-right-inner">
                    <ul class="top-application clearfix white-bg">
                        <li class="fl align-center line-height26" v-if="is_feel==1">
                            <router-link :to="{name:'Experience',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">
                                <p class="darkgray-font"><i class="iconfont icon-profile f20"></i></p>
                                <p class="darkgray-font">心得</p>
                            </router-link>
                        </li>
                        <li class="fl align-center line-height26" :class="is_feel==1?'':'w50'" v-if="$route.query.type==1">
                            <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">
                                <p class="darkgray-font"><i class="iconfont icon-paihang f20"></i></p>
                                <p class="darkgray-font">成绩</p>
                            </router-link>
                        </li>
                        <li class="fl align-center line-height26" :class="is_feel==1?'':'w50'">
                            <router-link :to="{name:'ExaminationResult',query:{answerid:$route.query.id,type:$route.query.type,categoryid:getParameters.categoryid,typeid:$route.query.typeid,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">
                                <p class="darkgray-font"><i class="iconfont icon-jieguo f20"></i></p>
                                <p class="darkgray-font">结果</p>
                            </router-link>
                        </li>
                    </ul>
                    <div class="answer-sheet-box white-bg">
                        <h2 class="align-center f16 weight-normal">答题卡</h2>
                        <div class="answer-sheet-inner">
                            <div class="answer-sheet" v-for="(item,n) in testList" :key="n">
                                <h3 class="weight-normal f14">{{item.title}} <span class="darkgray-font f12">(<!-- 每题{{item.tklist[0].score}}分，-->共{{item.tklist.length}}题)</span></h3>
                                <ul class="clearfix">
                                    <div v-for="(citem,i) in item.tklist" :key="i">
                                        <li class="fl align-center" @click="jump(citem.tkid,n)">{{i+1}}</li>
                                    </div>
                                </ul>
                            </div>
                        </div>
                        <!-- <ks-button type="danger" btnstyle="width:100%;" @click="save({name:'ExaminationResult'})">重做错题</ks-button> -->
                    </div>
                </div>
            </div>
        </div>
        <ks-dialog
        :visible.sync="isShowOpera"
        title="提示"
        width="300px"
        align="center"
        top="30%"
        isshowclose="1"
        >
        <div class="tips-con">
            <i
            class="f50 iconfont vertical-align"
            :class="operatstatus==0 && 'red-font icon-shibai'||operatstatus==1 && 'green-font icon-chenggong'||operatstatus==3 && 'red-font icon-jinggao'"
            ></i>
            <font class="f16 vertical-align ml10">{{operaTips}}</font>
        </div>
        </ks-dialog>
    </div>
</template>
<script>
    import {GetRecordDetail} from '@/api/exam'
    export default {
        name:'ParsingPage',
        data(){
            return{
                curr:0,
                loaded:false,
                getParameters:{
                    categoryid:this.$route.query.categoryid,
                    id:this.$route.query.id,
                    type:this.$route.query.type,
                    paperid:this.$route.query.paperid,
                    
                },
                option:[],
                testList:[],
                subjectNum:0,
                isFixed:false,
                is_feel:0,
                isShowOpera: false,
                operatstatus: 0,
                operaTips: "",
                
            }
        },
        methods:{
            getCurr(val){
                this.curr = val
            },
            /**把阿拉伯数字全部转换为大写（1，2，3.... = 一、二、三、） */
            num(n) {
                if(!/(^[1-9]\d*$)/){
                    return '非法数字';
                }
                var uppercase='千百亿千百十万千百十个';
                var nLength=n.length;
                var newStr='';
                if(uppercase.length-nLength<0){
                    return '数字过长';
                }
                uppercase=uppercase.substr(uppercase.length-nLength);
                for(var i=0;i<nLength;i++){
                    newStr +='零一二三四五六七八九'.charAt(n[i])+uppercase.charAt(i);
                };
                newStr=newStr.substr(0,newStr.length-1);
                return newStr;
            },
            /**锚点滚动 */
            scrollingAnimation(a,h,direction){
                setTimeout(()=>{
                     if(direction === 'up'){
                         a -= 15
                        if(a > h){
                            document.documentElement.scrollTop = a
                            this.scrollingAnimation(a,h,'up')
                        }
                    }else{
                        a += 15
                        if(a < h){
                            document.documentElement.scrollTop = a
                            this.scrollingAnimation(a,h)
                        }
                    }
                },5)
            },
            
            jump(tkid,type){
                this.curr = type
                this.$nextTick(()=>{
                    let h = this.$refs['djump'+tkid][0].offsetTop - window.innerHeight/2
                    if(h < window.scrollY){
                        this.scrollingAnimation(window.scrollY,h,'up')
                    }else{
                        this.scrollingAnimation(window.scrollY,h)
                    }
                })
            },

            /**右侧答题卡悬浮 */
            handleScroll () {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                let offsetTop = this.$refs['test-right-inner'].offsetTop
                scrollTop > offsetTop ? this.isFixed = true : this.isFixed = false
            },
            /**获取试卷 */
            loadPage(){
                GetRecordDetail(this.getParameters).then(res=>{
                    if(res.result){
                        let newArr = []
                        this.is_feel = res.is_feel
                        res.data.map((item,i)=>{
                            newArr.push({
                                title:item.title,
                                value:i
                            })
                        })
                        this.option = newArr
                        res.data.map((item,i)=>{
                            let n=(i+1).toString()
                            item.order = this.num(n)
                            item.tklist.map((citem,j)=>{
                                citem.flag = 0
                                citem.collect = 0
                                citem.ifdoexam = 0
                            })
                        })
                        this.testList = res.data
                        let n = 0
                        this.testList.map(item=>{
                            item.tklist.map(citem=>{
                                if(citem.tktype==1){
                                    n++
                                }else{
                                    return n
                                }
                            })
                        })
                        this.subjectNum = n
                    }else{
                        this.testList = []
                        this.isShowOpera = true;
                        this.operatstatus = 0;
                        this.operaTips = res.msg;
                        setTimeout(() => {
                            this.isShowOpera = false;
                            history.back()
                        }, 1500);
                    }    
                })
                this.loaded = true
            },
            // save(route){
            //     this.$router.push(route)
            // }
        },
        mounted(){
            document.title = this.$route.query.title||'查看练习解析'
            this.loadPage()
            window.addEventListener('scroll', this.handleScroll)
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>
<style scoped>
    .test-tips{
        margin-bottom: 35px;
    }
    .test-con-left{
        width: 920px;
    }
    .test-type-tips{
        margin:17px 0;
        padding: 20px;
    }
    .test-list li{
        padding:28px 44px;
        margin-bottom: 26px;
    }
    .test-option{
        margin: 14px 7px;
    }
    .test-con-right,.test-right-inner{
        width: 256px;
    }
    .top-application{
        margin: 17px 0;
        padding: 20px 0;
    }
    .top-application li{
        width: 33.33%;
        border-right: 1px solid #efefef;
        box-sizing: border-box;
    }
    .top-application li:last-child{
        border-right:0;
    }
    .top-application li p{
        height: 26px;
    }
    .answer-sheet-inner{
        max-height: 400px;
        overflow-y: auto;
        margin-left: -25px;
        margin-right: -25px;
        padding: 0 25px;
        margin-bottom: 20px;
    }
    .answer-sheet-box{
        padding: 20px 25px;
    }
    .answer-sheet-box h2{
        margin-bottom: 20px;
    }
    .answer-sheet-box h3{
        margin-bottom: 16px;
    }
    .answer-sheet ul li{
        width: 20px;
        height: 20px;
        border: 1px solid #bbb;
        line-height: 20px;
        margin-right: 7px;
        margin-bottom: 7px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .answer-sheet{
        margin-bottom: 28px;
    }
    .isFixed{
        position:fixed;
        top:0;
        z-index:999;
    }
    .w50{
        width: 50% !important;
    }
</style>
