<template>
    <div class="evaluation-detail-wrap">
        <Loading v-show="pageLoading"></Loading>
        <!--顶部菜单-->
        <div class="evaluation-detail-bar">
            <span :class="curBarIndex == 0 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="curBarIndex = 0">
                {{$t('learnActivity.mgtScEv.tab1')}}
            </span>
            <span :class="curBarIndex == 1 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="curBarIndex = 1">
                {{$t('learnActivity.mgtScEv.tab2')}}
            </span>
            <Button type="info" size="small" @click="goBack" class="back-to-cus">
                <Icon custom="iconfont icon-arrow" size="12" style="vertical-align: baseline;" />
                {{$t('cusMgt.goBack')}}
            </Button>
        </div>
        <!--试卷信息-->
        <div :class="curBarIndex == 1 ? 'animated fadeIn evaluation-base-info':'evaluation-base-info animated fadeOutRight'" v-show="curBarIndex == 1">
            <div class="test-paper-detail" style="margin-top:5px;">
                <vuescroll ref="test-paper-detail" @handle-scroll="checkBackTop">
                    <!--试卷题目信息-->
                    <TestPaper v-if="examInfo && examInfo.papers" :paper="examInfo.papers[curSubIndex]" style="color:#515a6e;margin-top:-30px;" :isShowTools="false" isExamPaper></TestPaper>
                    <EmptyData v-else style="margin-top:60px;"></EmptyData>
                    <!--返回顶部-->
                    <div class="back-to-top fl-col-center" :title="$t('learnActivity.mgtScEv.returnTop')" v-if="showBack" @click="handleBackToTop">
                        <Icon type="ios-arrow-up" />
                    </div>
                </vuescroll>
            </div>
        </div>
        <!-- 试卷评测打分 -->
        <div :class="curBarIndex == 0 ? 'animated fadeIn evaluation-base-info':'evaluation-base-info animated fadeOutRight'" v-show="curBarIndex == 0">
            <Scoring :examInfo="examInfo" ref="score-box"></Scoring>
        </div>
    </div>
</template>
<script>
import TestPaper from '@/view/evaluation/index/TestPaper.vue'
import Scoring from '@/view/learnactivity/Scoring.vue'
export default {
    components: {
        TestPaper,
        Scoring
    },
    data() {
        return {
            pageLoading:false,
            showBack: false,
            curBarIndex: 0,
            curSubIndex: 0,
            isLoading: false,
            examInfo: {}
        }
    },
    methods: {
        goBack() {
            this.$router.push({
                path: '/home/myCourse'
            })
        },
        /**
         * 判断是否显示回到顶部按钮
         * @param vertical
         * @param horizontal
         * @param nativeEvent
         */
        checkBackTop(vertical, horizontal, nativeEvent) {
            if (vertical.scrollTop > 100) {
                this.showBack = true
            } else {
                this.showBack = false
            }
        },
        /**vuescroll回到顶部 */
        handleBackToTop() {
            this.$refs['test-paper-detail'].scrollTo(
                { y: '0' }, 300
            )
        },
        //查询当前评测的完整信息
        findExamInfo(examId, code) {
            let requestData = {
                id: examId,
                code: code
            }
            this.isLoading = true
            this.pageLoading = true
            this.$api.learnActivity.FindExamInfos(requestData).then(
                async res => {
                    if (!res.error) {
                        let resData = res.examInfo[0]
                        resData.score = 0
                        for (let index in resData.papers) {
                            resData.score += resData.papers[index].point.reduce((total, item) => {
                                return total + parseInt(item)
                            }, 0)
                            if (resData.papers[index].blob) {
                                let blob = resData.papers[index].blob
                                resData.papers[index].examScope = resData.scope
                                resData.papers[index].examId = resData.id
                                resData.papers[index] = await this.$evTools.getFullPaper(resData.papers[index])
                                resData.papers[index].blob = blob
                                resData.score += resData.papers[index].score
                            }
                        }
                        this.examInfo = resData
                    } else {
                        this.$Message.error('API ERROR!')
                    }
                },
                err => {
                    this.$Message.error('API ERROR!')
                }
            ).finally(() => {
                this.isLoading = false
                this.pageLoading = false
            })
        }
    },
    created() {
        let examId = this.$route.query.examId
        let code = this.$route.query.code
        if (examId && code) {
            this.findExamInfo(examId, code)
        } else {
            this.$Message.error('ROUTE DATA ERROR!')
        }
    }
}
</script>
<style scoped lang="less">
@import "./EvDetail.less";
</style>
<style lang="less">
</style>