<template>
    <div class="manage-evaluation-container dark-iview-split">
        <Loading :top="200" type="1" style="text-align:center" v-show="isLoading"></Loading>
        <Split v-model="split1">
            <!--评测列表-->
            <div class="evaluation-list-wrap" slot="left">
                <div class="evaluation-list-title">
                    <Dropdown class="sort-dropdown" trigger="click" placement="bottom-start" @on-click="function(e){ filterPeriod = e }" @on-visible-change="dropdownStates" v-if="$store.state.user.schoolProfile.school_base && scope == 'school'">
                        <span style="cursor: pointer;">
                            {{$t('learnActivity.mgtScEv.period')}}
                            <b class="title">{{ filterPeriodName }}</b>
                            <Icon type="ios-arrow-down" style="margin-left:8px;"></Icon>
                        </span>
                        <DropdownMenu slot="list" v-for="(item,index) in schoolBase.period" :value="item.id" :key="index">
                            <DropdownItem :name="item.id">{{ item.name }}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <div style="float:right" v-if="!isSearch">
                        <Icon type="md-add" class=" to-create-icon" @click="goToCreate" :title="$t('learnActivity.mgtScEv.create')" v-if="$access.can('admin.*|schoolAc-upd')" />
                        <Icon type="md-trash" v-show="evaListShow.length" class="to-create-icon" :title="$t('learnActivity.mgtScEv.delete')" @click="deleteEvaluation" v-if="$access.can('admin.*|schoolAc-upd')" />
                        <Icon type="md-create" v-show="evaListShow.length && evaListShow[curEvaIndex] && evaListShow[curEvaIndex].progress == 'pending'" class="to-create-icon" @click="editEvaluation" :title="$t('learnActivity.mgtScEv.edit')" v-if="$access.can('admin.*|schoolAc-upd')" />
                        <!-- 筛选 -->
                        <Poptip style="float:right" trigger="click" :offset="-10" theme="light">
                            <Icon type="ios-funnel" class="to-create-icon" :color="filter.status || filter.type || filter.mode ? '#2d8cf0':'#fff'" />
                            <div slot="content">
                                <div class="filter-item">
                                    <span>{{$t('learnActivity.mgtScEv.ftStatus')}}</span>
                                    <Select v-model="filter.status" style="width:100px" size="small" clearable @on-change="filterEv">
                                        <Option value="pending">{{$t('learnActivity.mgtScEv.pending')}}</Option>
                                        <Option value="going">{{$t('learnActivity.mgtScEv.going')}}</Option>
                                        <Option value="finish">{{$t('learnActivity.mgtScEv.finish')}}</Option>
                                    </Select>
                                </div>
                                <div class="filter-item">
                                    <span>{{$t('learnActivity.mgtScEv.ftType')}}</span>
                                    <Select v-model="filter.type" style="width:100px" size="small" clearable @on-change="filterEv">
                                        <Option v-for="(item,index) in $GLOBAL.EV_TYPE()" :value="item.value" :key="index">{{ item.label }}</Option>
                                    </Select>
                                </div>
                                <div class="filter-item">
                                    <span>{{$t('learnActivity.mgtScEv.ftMode')}}</span>
                                    <Select v-model="filter.mode" style="width:100px" size="small" clearable @on-change="filterEv">
                                        <Option v-for="(item,index) in $GLOBAL.EV_MODE()" :value="item.value" :key="index">{{ item.label }}</Option>
                                    </Select>
                                </div>
                            </div>
                        </Poptip>
                        <Icon type="md-search" class="to-create-icon" @click="isSearch = !isSearch" :title="$t('learnActivity.mgtScEv.search')" />
                    </div>
                    <div v-else class="dark-iview-input" style="float:right;width:calc(100% - 150px);padding-right:10px;">
                        <Input icon="ios-close" v-model="keyword" :placeholder="$t('schoolBaseInfo.codeSearchHolder')" autofocus style="width:100%" @on-click="closeKeySearch" @on-change="filterByName" />
                    </div>
                </div>
                <div class="evaluation-list-main">
                    <vuescroll>
                        <div v-for="(item,index) in evaListShow" @click="selectEvaluation(index)" :class="['evaluation-item','block-bg',index == curEvaIndex ? 'block-bg-active':'']" :key="index">
                            <p class="evaluation-name">
                                {{item.name}}
                            </p>
                            <p class="evaluation-type">
                                <Icon type="md-time" style="margin-right:5px;" size="16" />
                                <span>{{$t('learnActivity.mgtScEv.createTime')}}{{dateFormat(item.startTime)}}</span>
                            </p>
                            <p class="evaluation-type">
                                <Icon type="md-time" style="margin-right:5px;" size="16" />
                                <span>{{$t('learnActivity.mgtScEv.endTime')}}{{dateFormat(item.endTime)}}</span>

                            </p>
                            <!-- 学生人数 -->
                            <!-- <p class="evaluation-type">
                                <Icon type="ios-people" style="margin-right:5px;" size="16" />
                                <span>{{$t('learnActivity.mgtScEv.stuCount')}}{{item.stuCount}}</span>
                            </p> -->
                            <div style="display:inline-flex">
                                <p class="evaluation-type">
                                    <span class="ev-info-tag">{{getTypeLabel(item.type)}}</span>
                                </p>
                                <!-- 评测模式 -->
                                <p class="evaluation-type">
                                    <span class="ev-info-tag">{{getModeLabel(item.source)}}</span>
                                </p>
                                <!-- 活动状态 -->
                                <p class="evaluation-type">
                                    <span class="evaluation-status-tag" :style="{ borderColor: item.progress == 'pending' ? '#0BADD4' : item.progress == 'going' ? '#1CC0F3' : '#949594', color: (item.progress == 'pending' ? '#0BADD4' : item.progress == 'going' ? '#1CC0F3' : '#949594')}">
                                        {{ item.progress == 'pending' ? $t('learnActivity.mgtScEv.pending') : item.progress == 'going' ? $t('learnActivity.mgtScEv.going') : $t('learnActivity.mgtScEv.finish') }}
                                    </span>
                                </p>
                                <!-- 立即结束 -->
                                <p class="evaluation-type">
                                    <span v-if="item.progress == 'going'" class="handle-end-tag" @click="handleEnd(index)">
                                        {{$t('learnActivity.mgtScEv.stop')}}
                                    </span>
                                </p>

                            </div>
                        </div>
                        <EmptyData v-if="evaListShow.length == 0" style="margin-top:180px;" :textContent="`${scope == 'school' ? filterPeriodName:''}${$t('learnActivity.mgtScEv.nodata')}`"></EmptyData>
                    </vuescroll>
                </div>
            </div>
            <div slot="right" class="evaluation-detail-wrap">
                <!--顶部菜单-->
                <div class="evaluation-detail-bar">
                    <span :class="curBarIndex == 0 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="selectBar(0)">
                        {{$t('learnActivity.mgtScEv.tab1')}}
                    </span>
                    <span :class="curBarIndex == 1 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="selectBar(1)">
                        {{$t('learnActivity.mgtScEv.tab2')}}
                    </span>

                    <!-- 阅卷功能0531之前完成不了，暂时隐藏 -->
                    <span :class="curBarIndex == 2 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="selectBar(2)">
                        {{$t('learnActivity.mgtScEv.markSetting')}}
                    </span>
                    <!-- <span :class="curBarIndex == 3 ? 'evalustion-bar-item line-bottom-active line-bottom':'evalustion-bar-item line-bottom'" @click="selectBar(3)">
                        {{$t('learnActivity.mgtScEv.markData')}}
                    </span> -->

                    <!--取消一键作答和一键评分功能-->
                    <!--<div style="float:right;" v-if="$access.ability('admin','mock-eva').validateAll" v-show="evaListShow[curEvaIndex] && evaListShow[curEvaIndex].progress == 'going'">
                        <Tooltip :content="$t('learnActivity.mgtScEv.autoTips1')" :max-width="240">
                            <Button type="success" size="small" :loading="answerLoading" class="mock-stu-answer" @click="mockAnswer">{{$t('learnActivity.mgtScEv.autoAnswer')}}</Button>
                        </Tooltip>
                        <Tooltip :content="$t('learnActivity.mgtScEv.autoTips2')" :max-width="240">
                            <Button type="warning" size="small" :loading="scoreLoading" class="mock-tea-scoring" @click="mockScoring">{{$t('learnActivity.mgtScEv.autoScore')}}</Button>
                        </Tooltip>
                    </div>-->

                    <!-- 保存阅卷配置 -->
                    <div style="float:right;" class="common-save-btn" v-show="curBarIndex == 2 && isSetting">
                        <Button class="mock-stu-answer" type="text" :loading="btnLoading" @click="saveMarkSetting" icon="ios-albums-outline">
                            {{$t('schoolBaseInfo.saveInfo')}}
                        </Button>
                    </div>

                </div>
                <!--试卷信息-->
                <div :class="curBarIndex == 1 ? 'animated fadeIn evaluation-base-info':'evaluation-base-info animated fadeOutRight'" v-show="curBarIndex == 1">
                    <div class="evaluation-test-paper-header" v-if="evaListShow[curEvaIndex]">
                        <span>{{$t('learnActivity.mgtScEv.evSubject')}}</span>
                        <span v-for="(item,index) in evaListShow[curEvaIndex].subjects" :key="index" :class="index == curSubIndex ? 'subject-item subject-item-active':'subject-item'" @click="selectSubject(index)">
                            {{item.name}}
                        </span>
                    </div>
                    <div class="test-paper-detail">
                        <vuescroll ref="test-paper-detail" @handle-scroll="checkBackTop">
                            <!--试卷题目信息-->
                            <TestPaper v-if="evaListShow[curEvaIndex] && evaListShow[curEvaIndex].papers && evaListShow[curEvaIndex].papers[curSubIndex] && evaListShow[curEvaIndex].papers[curSubIndex].item" :paper="evaListShow[curEvaIndex].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="examDetaiInfo" ref="score-box"></Scoring>
                </div>
                <!-- 阅卷基础设置 -->
                <div :class="curBarIndex == 2 ? 'animated fadeIn evaluation-base-info':'evaluation-base-info animated fadeOutRight'" v-show="curBarIndex == 2">
                    <!-- <div class="evaluation-test-paper-header" v-if="evaListShow[curEvaIndex]">
                        <span>{{$t('learnActivity.mgtScEv.evSubject')}}</span>
                        <span v-for="(item,index) in evaListShow[curEvaIndex].subjects" :key="index" :class="index == curSubIndex ? 'subject-item subject-item-active':'subject-item'" @click="selectSubject(index)">
                            {{item.name}}
                        </span>
                    </div> -->
                    <MarkSetting ref="markSetting" v-if="evaListShow[curEvaIndex]" :evInfo="evaListShow[curEvaIndex]" v-model="isSetting"></MarkSetting>
                </div>
                <!-- 阅卷数据 -->
                <div :class="curBarIndex == 3 ? 'animated fadeIn evaluation-base-info':'evaluation-base-info animated fadeOutRight'" v-show="curBarIndex == 3">
                    <MarkData></MarkData>
                </div>
            </div>
        </Split>
    </div>
</template>
<script>
import TestPaper from '@/view/evaluation/index/TestPaper.vue'
import Scoring from './Scoring.vue'
import MarkSetting from './markpaper/MarkSetting.vue'
import MarkData from './markpaper/MarkData.vue'
export default {
    components: {
        TestPaper, Scoring, MarkSetting, MarkData
    },
    inject: ['reload'],
    data() {
        return {
            isSetting:false,
            btnLoading: false,
            keyword: '',
            isSearch: false,
            answerLoading: false,
            scoreLoading: false,
            split1: 0.2,
            scope: '',//school 校本 private 个人
            showBack: false,
            curSubIndex: 0,
            curBarIndex: 0,
            curEvaIndex: 0,
            evaluationList: [],
            evaListShow: [],
            examDetaiInfo: {},
            targetList: [],
            isLoading: false,
            filterPeriod: undefined,
            schoolBase: {
                period: []
            },
            filter: {
                status: '',
                mode: '',
                type: ''
            }
        }
    },
    methods: {
        //保存阅卷配置
        saveMarkSetting() {
            this.$refs['markSetting'].saveSetting()
        },
        filterByName() {
            let curPdEv = this.evaluationList.filter(item => item.period.id === this.filterPeriod)
            this.evaListShow = curPdEv.filter(item => {
                return item.name.indexOf(this.keyword) > -1
            })

        },
        closeKeySearch() {
            this.isSearch = false
            this.keyword = ''
            this.filterByName()
        },
        //根据学段筛选评测
        filterByPeriod() {
            this.curEvaIndex = 0
            sessionStorage.setItem('evPeriod', this.filterPeriod)
            if (this.filterPeriod) {
                this.evaListShow = this.evaluationList.filter(item => item.period.id === this.filterPeriod)
            } else {
                this.evaListShow = [...this.evaluationList]
            }
            if (this.evaListShow.length) {
                this.selectEvaluation(0)
            }
        },

        //筛选评测
        filterEv() {
            let curPdEv = this.evaluationList.filter(item => item.period.id === this.filterPeriod)
            this.evaListShow = curPdEv.filter(item => {
                let status = !this.filter.status || (this.filter.status == item.progress)
                let type = !this.filter.type || (this.filter.type == item.type)
                let mode = !this.filter.mode || (this.filter.mode == item.source)
                return status && type && mode
            })
        },
        // 模拟教师评分数据
        mockScoring() {
            this.scoreLoading = true
            this.$api.learnActivity.mockScoring({
                id: this.evaListShow[this.curEvaIndex].id,
                code: this.evaListShow[this.curEvaIndex].code.replace('Exam-', '')
            }).then(
                res => {
                    setTimeout(() => {
                        this.$Message.success(this.$t('learnActivity.mgtScEv.mockOk'))
                    }, 500)
                },
                err => {
                    this.$Message.error(this.$t('learnActivity.mgtScEv.mockErr'))
                }
            ).finally(() => {
                setTimeout(() => {
                    this.scoreLoading = false
                    this.reload()
                }, 500)
            })
        },
        // 模拟学生作答数据
        mockAnswer() {
            this.answerLoading = true
            this.$api.learnActivity.mockAnswer({
                id: this.evaListShow[this.curEvaIndex].id,
                code: this.evaListShow[this.curEvaIndex].code.replace('Exam-', '')
            }).then(
                res => {
                    setTimeout(() => {
                        this.$Message.success(this.$t('learnActivity.mgtScEv.mockOk'))
                    }, 500)
                },
                err => {
                    this.$Message.error(this.$t('learnActivity.mgtScEv.mockErr'))
                }
            ).finally(() => {
                setTimeout(() => {
                    this.answerLoading = false
                    this.reload()
                }, 500)
            })
        },
        handleEnd(index) {
            this.$Modal.confirm({
                title: this.$t('learnActivity.mgtScEv.stopTitle'),
                content: `${this.$t('learnActivity.mgtScEv.stopContent')}${this.evaListShow[index].name}?`,
                onOk: () => {
                    this.$api.learnActivity.FinishEva({
                        id: this.evaListShow[index].id,
                        code: this.evaListShow[index].code.replace('Exam-', '')
                    }).then(
                        res => {
                            if (!res.error) {
                                this.$Message.success(this.$t('learnActivity.mgtScEv.stopOk'))
                                this.evaListShow[index].progress = 'finish'
                                this.reload()
                            } else {
                                this.$Message.error('API ERROR！')
                            }
                        },
                        err => {
                            this.$Message.error('API ERROR！')
                        }
                    )
                }
            })
        },
        dropdownStates(flag) {
            if (!flag) this.filterByPeriod()
        },
        /**获取type对应的label */
        getTypeLabel(code) {
            for (let item of this.$GLOBAL.EV_TYPE()) {
                if (item.value == code) {
                    return item.label
                }
            }
        },
        /**获取mode对应的label */
        getModeLabel(code) {
            for (let item of this.$GLOBAL.EV_MODE()) {
                if (item.value == code) {
                    return item.label
                }
            }
        },
        /**
         * 查找班级课程下的班级
         * */
        findClassroom() {
            if (this.targetList.length == 0) {
                let requestData = this.$store.state.userInfo.TEAMModelId
                this.$api.learnActivity.FindClassroomByTeacherId({
                    code: requestData
                }).then(
                    res => {
                        if (res.error == null) {
                            this.targetList = res.result.data
                        } else {
                            this.$Message.error('API ERROR!')
                        }
                    },
                    err => {

                    }
                )
            }
        },
        /**
         * 判断是否显示回到顶部按钮
         * @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
            )
        },
        /**删除评测信息 */
        deleteEvaluation() {
            this.$Modal.confirm({
                title: this.$t('learnActivity.mgtScEv.deleteTitle'),
                content: `${this.$t('learnActivity.mgtScEv.deleteContent')}${this.evaListShow[this.curEvaIndex].name}?`,
                onOk: () => {
                    let params = {
                        id: this.evaListShow[this.curEvaIndex].id,
                        scope: this.evaListShow[this.curEvaIndex].scope,
                        code: this.evaListShow[this.curEvaIndex].code.replace('Exam-', '')
                    }
                    this.isLoading = true
                    this.$api.learnActivity.DeleteExamInfo(params).then(
                        res => {
                            if (res.error == null) {
                                let index = this.curEvaIndex
                                this.selectEvaluation(0)
                                this.evaListShow.splice(index, 1)
                                this.$Message.success(this.$t('learnActivity.mgtScEv.deleteOk'))
                            } else {
                                this.$Message.error(this.$t('learnActivity.mgtScEv.deleteErr'))
                            }
                        },
                        err => {
                            this.$Message.error(this.$t('learnActivity.mgtScEv.deleteErr'))
                        }
                    ).finally(() => {
                        setTimeout(() => {
                            this.isLoading = false
                        }, 500)
                    })
                }
            })
        },
        goToCreate() {
            if (this.$store.state.user.schoolProfile.school_base != undefined) {
                if (this.scope == 'school') {
                    this.$router.push({
                        name: 'createSchoolEva'
                    })
                } else if (this.scope == 'private') {
                    this.$router.push({
                        name: 'createPrivEva'
                    })
                }
            } else {
                this.$Message.warning(this.$t('learnActivity.mgtScEv.noJoin'))
            }
        },
        editEvaluation() {
            this.$router.push({
                name: 'createSchoolEva',
                params: {
                    evaluationInfo: this.examDetaiInfo
                }
            })
        },
        selectSubject(index) {
            this.curSubIndex = index
        },
        selectBar(index) {
            this.curBarIndex = index
        },
        dateFormat(timestamp) {
            var date = new Date(timestamp)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() + ' '
            return Y + M + D;
        },

        //查询评测列表
        findEvaluation() {
            let requestData = {
                code: this.scope == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId,
                // classIds: this.$access.hasRole('admin') ? undefined : this.$store.state.userInfo.teachClasses.concat(this.$store.state.userInfo.mgtClasses) //查询老师相关班级的评测，现在在课程那里进行查询
                classIds: undefined
            }
            this.$api.learnActivity.FindExamInfo(requestData).then(
                res => {
                    if (!res.error) {
                        res.examInfo = res.examInfo.sort((a, b) => {
                            return a.createTime - b.createTime > 0 ? -1 : 1
                        })
                        this.evaluationList = res.examInfo
                        this.evaListShow = res.examInfo
                        if (this.scope == 'school') {
                            this.filterByPeriod()
                            //如果当前学段没有评测则自动切换下一个学段
                            if (!this.evaListShow.length) {
                                if (this.schoolBase.period && this.schoolBase.period.length > 1) {
                                    this.filterPeriod = this.schoolBase.period[1].id
                                    this.filterByPeriod()
                                }
                            }
                        } else {
                            if (res.examInfo.length) this.selectEvaluation(0)
                        }

                    } else {
                        this.$Message.error('API ERROR!')
                    }
                }
            )
        },

        selectEvaluation(index) {
            this.curSubIndex = 0
            this.curEvaIndex = index
            this.$refs['score-box'].showTest = false
            if (this.evaListShow[this.curEvaIndex] && this.evaListShow[this.curEvaIndex].papers.length == 0) {
                this.findExamPaper()
            } else {
                this.examDetaiInfo = this.evaListShow[this.curEvaIndex]
            }
        },
        //查询当前评测的详细信息
        findExamPaper() {
            let requestData = {
                id: this.evaListShow[this.curEvaIndex].id,
                code: this.evaListShow[this.curEvaIndex].code
            }
            this.isLoading = 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) {
                            let blob = resData.papers[index].blob
                            resData.papers[index].examScope = resData.scope
                            // resData.papers[index].examId = resData.id
                            resData.papers[index].examId = resData.scope === 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId //试卷容器名字
                            resData.papers[index] = await this.$evTools.getFullPaper(resData.papers[index])
                            if (!resData.papers[index].subjectId) {
                                resData.papers[index].subjectId = blob.substring(blob.lastIndexOf('/') + 1)
                            }
                            resData.papers[index].blob = blob
                            resData.score += resData.papers[index].score
                        }
                        this.evaListShow.splice(this.curEvaIndex, 1, resData)
                        this.examDetaiInfo = resData
                    } else {
                        this.$Message.error('API ERROR!')
                    }
                },
                err => {
                    this.$Message.error('API ERROR!')
                }
            ).finally(() => {
                this.isLoading = false;
            })
        }
    },
    created() {
        if (this.$route.name == 'privateEvaluation') {
            this.scope = 'private'
        } else if (this.$route.name == 'schoolEvaluation') {
            this.scope = 'school'
        }
        this.$store.dispatch('user/getSchoolProfile').then(
            (res) => {
                if (res) {
                    this.schoolBase = res.school_base
                    // 預設先找sessionstorage，如果没有则給第一個
                    this.filterPeriod = sessionStorage.getItem('evPeriod')
                    if (!this.filterPeriod) {
                        if (res.school_base.period && res.school_base.period.length) {
                            this.filterPeriod = res.school_base.period[0].id
                        }
                    }

                }
            }
        ).finally(() => {
            this.findEvaluation()
        })
    },
    watch: {
        $route: {
            handler: function (to, from) {
                if (this.$route.name == 'privateEvaluation') {
                    this.scope = 'private'
                } else if (this.$route.name == 'schoolEvaluation') {
                    this.scope = 'school'
                }
            },
            immediate: true
        }
    },
    computed: {
        filterPeriodName: function () {
            let pId = this.filterPeriod
            let name = ''
            if (pId) {
                let temp = this.$store.state.user.schoolProfile.school_base.period.filter(item => {
                    return pId == item.id
                })
                if (temp.length > 0) name = temp[0].name
            }
            return name
        },
    }
}
</script>
<style lang="less" scoped>
@import "./MgtSchoolEva.less";
</style>
<style lang="less">
.evalustion-base-attr .ivu-form .ivu-form-item-label {
    color: #a5a5a5;
}
.evaluation-attr-form .ivu-select-disabled .ivu-select-selection {
    background: none;
}
.sort-dropdown {
    .title {
        color: white;
        font-size: 14px;
    }
    .ivu-select-dropdown {
        background-color: #2d2d2d;
        border-radius: 2px;
        border: 1px #464646 solid;
        .ivu-dropdown-menu {
            li {
                color: #ccc;
                font-size: 12px !important;
                &:hover {
                    color: #2d2d2d;
                }
            }
        }
    }
}
// .test-paper-detail .paper-container {
//     padding-bottom: 30px;
// }
</style>
