<template>
    <div class="mark-area">
        <!-- 头部基础信息 -->
        <div class="mark-header" v-show="!isComplete">
            <span class="quit-marking-text">
                <Icon type="ios-arrow-back" class="quit-marking-icon" :title="$t('learnActivity.mark.quit')" @click="quit" />
            </span>
            <span class="info-label">{{$t('learnActivity.mark.examName')}}</span>
            <span class="info-value mark-info">{{taskInfo.name}}</span>
            <span class="info-label">{{$t('learnActivity.mark.reviewType')}}</span>
            <span class="info-value mark-info">{{$t('learnActivity.mark.byStu')}}</span>
            <span class="info-label">{{$t('learnActivity.mark.stuId')}}：</span>
            <span class="info-value mark-info">{{stuId}}</span>
            <span class="info-label">{{$t('learnActivity.mark.curQu')}}</span>
            <span class="info-value cur-qu-index">{{quNoList[quIndex] ? quNoList[quIndex].label : '--'}}</span>
            <div class="btn-wrap">
                <span class="action-btn" @click="continueMark">
                    <Icon type="md-shuffle" class="action-btn-icon" />
                    {{$t('learnActivity.mark.toggleStu')}}
                </span>
                <span class="action-btn" @click="errStatus = true" v-show="!quNoList[quIndex].err">
                    <Icon custom="iconfont icon-exception" class="action-btn-icon" />
                    {{$t('learnActivity.mark.exception')}}
                </span>
            </div>
        </div>
        <div class="mark-main" v-show="!isComplete">
            <!-- 工具条 -->
            <div class="mark-tools-wrap">
                <Icon custom="iconfont icon-move" class="tool-icon" :title="$t('learnActivity.mark.move')" @click="mouseStatus = 'move'" />
                <Icon custom="iconfont icon-text" class="tool-icon" :title="$t('learnActivity.mark.text')" @click="mouseStatus = 'text'" />
                <Icon custom="iconfont icon-mark" class="tool-icon" :title="$t('learnActivity.mark.brush')" @click="mouseStatus = 'line'" />
                <Icon custom="iconfont icon-arrow-mark" class="tool-icon" :title="$t('learnActivity.mark.arrow')" @click="mouseStatus = 'arrow'" />
                <Icon custom="iconfont icon-oval" class="tool-icon" :title="$t('learnActivity.mark.oval')" @click="mouseStatus = 'oval'" />
                <Icon custom="iconfont icon-rect" class="tool-icon" :title="$t('learnActivity.mark.rect')" @click="mouseStatus = 'rect'" />
                <Poptip transfer placement="right">
                    <Icon custom="iconfont icon-smile" class="tool-icon" :title="$t('learnActivity.mark.seal')" />
                    <div slot="content" class="expression-box">
                        <img v-for="(item,index) in imgs" :key="index" :src="item" alt="" class="expression-img" @click="drawImg(index)">
                    </div>
                </Poptip>
                <Icon custom="iconfont icon-fresh" class="tool-icon" :title="$t('learnActivity.mark.clear')" @click="clear" />
            </div>
            <div class="mark-stage">
                <MarkCanvas ref="markCanvas" @getImg="getMarkData" :status="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData" style="padding-bottom:85px"></MarkCanvas>
                <!-- 题号显示部分 -->
                <div class="qu-index-box">
                    <div class="qu-tips-box">
                        <span class="qu-tips-tag">
                            {{$t('learnActivity.mark.marked')}}
                        </span>
                        <span class="qu-tips-tag">
                            {{$t('learnActivity.mark.unmark')}}
                        </span>
                        <span class="qu-tips-tag">
                            异常
                        </span>
                        <span class="objective-tips">
                            温馨提示：客观题已由系统自动评分，下面只显示了需要人工评分的主观题题号。
                        </span>
                    </div>
                    <div>
                        <span v-show="(!taskInfo.qu.length || taskInfo.qu.includes(index)) && !item.disabled" v-for="(item,index) in quNoList" :key="index">
                            <Tooltip v-if="item.err" :content="item.err" transfer>
                                <span class="qu-index err-qu" @click="toQu(index)">
                                    {{item.label}}
                                </span>
                                <div slot="content">
                                    <p>异常：{{item.err}}</p>
                                    <p v-if="item.improve">反馈：{{item.improve}}</p>
                                    <p v-else>状态：未处理</p>
                                </div>
                            </Tooltip>
                            <span v-else :class="['qu-index',stuScore[index] > -1 ? 'right-qu' : '']" @click="toQu(index)">
                                {{item.label}}
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <!-- 打分部分 -->
            <div class="score-wrap">
                <div class="quick-score-box score-input-box">
                    <span>{{$t('learnActivity.mark.score')}}</span>
                    <InputNumber style="flex:1" :max="quScore[quIndex]" :min="1" v-model="score" @on-change="setScore"></InputNumber>
                </div>
                <div class="quick-score-box">
                    <Button size="small" type="info" style="margin-right:8px" ghost @click="setScore(quScoreArr.length - 1)">
                        {{$t('learnActivity.mark.fullScore')}}
                    </Button>
                    <Button size="small" type="error" ghost @click="setScore(0)">
                        {{$t('learnActivity.mark.zeroScore')}}
                    </Button>
                    <Icon :type="isShowNum ? 'md-eye-off' : 'md-eye'" class="toggle-num-status" @click="isShowNum = !isShowNum" />
                    <div :class="['score-key-box', isShowNum ? '':'hind-key-box']">
                        <vuescroll>
                            <span v-for="(item,index) in quScoreArr" :key="index" :class="['score-key', stuScore[quIndex] == index ? 'score-key-active':'']" @click="setScore(index)">
                                {{item}}
                            </span>
                        </vuescroll>
                    </div>
                </div>
                <Button type="success" class="submit-score" @click="submit()">
                    {{$t('learnActivity.mark.submit')}}
                </Button>
            </div>
        </div>
        <!-- 完成阅卷的提示信息 -->
        <div class="complete-mark" v-show="isComplete">
            <div class="complete-box">
                <Icon type="md-checkmark-circle-outline" class="ok-icon" />
                <p style="margin-top:20px;font-size:14px">
                    学生：{{stuId}}
                </p>
                <p style="font-size:20px;margin-top:5px">
                    已阅完
                </p>
                <Button type="success" class="continue-btn" @click="continueMark">继续阅卷</Button>
                <Button type="info" class="quit-btn" @click="quit">退出阅卷</Button>
            </div>
        </div>
        <!-- 用来单独渲染学生作答数据，提高tocanvas 的效率 -->
        <iframe id="markIframe" :srcdoc="curAnswer"></iframe>
        <Modal v-model="toggleStatus" :title="$t('learnActivity.mark.toggleStu')" :width="800" footer-hide>
            <StuProg @getStuId="toByStuView" class="light-stu-prog" :total="taskInfo.count" :stusData="stusData" :quNoList="quNoList" :qus="taskInfo ? taskInfo.qu : []"></StuProg>
        </Modal>
        <Modal v-model="errStatus" title="异常原因" :width="600" @on-ok="exception" :loading="loading">
            <RadioGroup v-model="errReason">
                <Radio :label="1" class="reason-item">
                    <span>答案不清晰，看不清楚</span>
                </Radio>
                <Radio :label="2" class="reason-item">
                    <span>答案图片不完整</span>
                </Radio>
                <Radio :label="3" class="reason-item">
                    <span>其他原因</span>
                </Radio>
            </RadioGroup>
            <Input v-show="errReason == 3" v-model="errText" maxlength="50" show-word-limit type="textarea" placeholder="异常原因..." style="width:90%;margin:0px 0px 10px 30px;" />
        </Modal>
    </div>
</template>

<script>
import BlobTool from '@/utils/blobTool.js'
import html2canvas from 'html2canvas'
import MarkCanvas from '@/components/mark/MarkCanvas'
import StuProg from './StuProg.vue'
export default {
    name: 'ByStu',
    components: {
        MarkCanvas, StuProg
    },
    data() {
        return {
            errText: '',
            isComplete: false,
            loading: true,
            errReason: 1,
            errStatus: false,
            score: null,
            mouseStatus: 'move',
            drawImgData: '',
            ansImg: '',
            imgs: [],
            autoQu: true,//自动切换下一题
            autoStu: true,//自动获取下一学生
            toggleStatus: false,
            activeIcon: -1,
            isShowNum: true,
            quIndex: 0,
            stuData: {
                name: '',
                id: '',
            },
            paperData: {
                item: []
            },
            stuAnswer: [],
            stuScore: [],
            taskInfo: {},
            stusData: [],
            stuId: '',
            markImg: undefined,
            quScore: [], //题目配分数据
            markArr: []
        }
    },
    methods: {
        //继续阅卷
        continueMark() {
            let stu = this.stusData.find(item => {
                return item.stuId == this.stuId
            })
            if (stu) {
                stu.item.forEach((item, index) => {
                    item.sc = this.stuScore[index]
                })
            } else {
                this.stuData.item.forEach((item, index) => {
                    item.sc = this.stuScore[index]
                })
                this.stusData.push(this.stuData)
            }

            this.toggleStatus = true
        },
        exception() {
            if (this.errReason) {
                this.errStatus = false
                let requestData = {
                    id: this.stuData.id,
                    err: this.errText,
                    code: this.$store.state.userInfo.schoolCode,
                    index: parseInt(this.quIndex),
                    tId: this.$store.state.userInfo.TEAMModelId
                }
                this.$api.mark.saveErr(requestData).then(
                    res => {
                        this.$Message.success('上报成功')
                    },
                    err => {
                        this.$Message.error('上报失败')
                    }
                )
            } else {
                this.loading = false
                setTimeout(() => {
                    this.loading = true
                })
                this.$Message.warning('请选择异常原因')
            }
        },
        drawImg(imgIndex) {
            let curImg = new Image()
            curImg.src = this.imgs[imgIndex]
            curImg.onload = () => {
                this.mouseStatus = 'img'
                this.drawImgData = curImg
            }
        },
        //清除所有批注
        clear() {
            this.$refs['markCanvas'].clear()
        },
        /**将答案绘制到canvas上 */
        ansToImg() {
            let answerIframe = document.getElementById('markIframe')
            answerIframe.onload = () => {
                answerIframe.style.width = '850px'
                answerIframe.style.margin = '0px'
                answerIframe.contentWindow.document.body.style.margin = '0px'
                answerIframe.contentWindow.document.body.style.padding = '0px'
                answerIframe.contentWindow.document.body.style.minWidth = '600px'
                answerIframe.contentWindow.document.body.style.minHeight = '240px'
                answerIframe.contentWindow.document.body.style.height = 'fit-content'
                answerIframe.contentWindow.document.body.style.width = 'fit-content'
                let bodyWidth = answerIframe.contentWindow.document.body.clientWidth
                answerIframe.style.width = (bodyWidth + 20) + 'px'
                answerIframe.contentWindow.document.body.style.backgroundColor = '#f5f5f5'
                html2canvas(answerIframe.contentWindow.document.body, {
                    useCORS: true
                }).then((canvas) => {
                    canvas.id = "canvas" + this.quIndex
                    // 将转出来的答案绘制到canvas上
                    this.ansImg = canvas.toDataURL()
                })
            }
        },
        /** 打分 */
        setScore(score) {
            this.score = score
            this.$set(this.stuScore, this.quIndex, score)
        },
        toQu(index) {
            this.quIndex = index
            this.score = this.stuScore[index] == -1 ? null : this.stuScore[index]
        },
        //提交分数
        submit() {
            if (this.score > -1 && this.score != null) {
                //保存批注
                let path, fileName
                if (this.markImg) {
                    // 第一次批注
                    if (!this.markArr[this.quIndex]) {
                        fileName = this.$jsFn.uuid() + '.png'
                    }
                    //已有批注
                    else {
                        let blob = this.markArr[this.quIndex]
                        fileName = blob.substring(blob.lastIndexOf('/') + 1, blob.length)
                    }
                    let markPng = this.$jsFn.dataURLtoFile(this.markImg, fileName)
                    //保存批注图片
                    let sas = this.$store.state.user.schoolProfile.blob_sas
                    let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri
                    let host = blobUrl.substring(0, blobUrl.lastIndexOf('/'))
                    let cont = blobUrl.substring(blobUrl.lastIndexOf('/') + 1)
                    let blobTool = new BlobTool(host, cont, '?' + sas, 'school')
                    path = `exam/${this.taskInfo.cid}/${this.taskInfo.subject}/${this.stuId}`
                    this.markImg = undefined
                    blobTool.upload(markPng, path).then(
                        res => {
                            this.$Message.success('批注保存成功')
                        },
                        err => {
                            console.log('保存失败', err)
                        }
                    )
                    this.markArr.splice(this.quIndex, 1, `${path}/${fileName}`)
                }
                let requstData = {
                    id: this.taskInfo.cid,
                    stuId: this.stuId,
                    subjectId: this.taskInfo.subject,
                    tmdId: this.$store.state.userInfo.TEAMModelId,
                    score: this.stuScore,
                    count: this.taskInfo.count,
                    code: this.taskInfo.ecode.replace('Exam-', ''),
                    qu: this.taskInfo.qu && this.taskInfo.qu.length ? this.taskInfo.qu : undefined, //按人阅卷不用传这个参数
                    // mark: path && fileName ? this.markArr : []
                    mark: this.markArr
                }
                this.$api.mark.saveScore(requstData).then(
                    res => {
                        // 按人阅卷自动跳转下一题
                        this.nextQuestion()
                        this.ansToImg()
                    },
                    err => {
                        this.$Message.error(this.$t('learnActivity.mark.saveErr'))
                    }
                )
            } else {
                this.$Message.warning(this.$t('learnActivity.mark.noSocreErr'))
            }
        },
        //保存批注
        getMarkData(data) {
            this.markImg = data.base64
        },
        nextQuestion() {
            //首先判断是否都已评分
            let s = this._.cloneDeep(this.stuScore)

            //筛选按题分配模式需要批阅的题目
            if (this.taskInfo.qu.length) {
                s = s.filter((item, index) => {
                    return this.taskInfo.qu.includes(index)
                })
            }
            //筛选客观题（自动评分）
            else {
                s = s.filter((item, index) => {
                    return !this.quNoList[index].disabled
                })
            }

            console.log('ssss', s)
            if (!s.includes(-1)) {
                if (this.autoStu) {
                    this.isComplete = true
                } else {
                    this.$Message.warning(this.$t('learnActivity.mark.completeStu'))
                }
                return
            }
            //如果是按题分配的则在分配的题目里面获取下一题
            if (this.taskInfo.qu.length) {
                //指定题目的数组在保存的时候是做了排序的，所以这里可以直接循环判断大小即可
                let has = false
                for (let qu of this.taskInfo.qu) {
                    if (qu > this.quIndex && this.stuScore[qu] == -1) {
                        this.quIndex = qu
                        has = true
                        break
                    }
                }
                if (!has) {
                    this.$Message.success('还有未阅题目')
                }
            }
            //按人分配则在所有题目里面获取下一题
            else {
                let has = false
                for (let qu of this.quNoList) {
                    if (qu.value > this.quIndex && this.stuScore[qu.value] == -1 && !qu.disabled) {
                        this.quIndex = qu.value
                        has = true
                        break
                    }
                }
                if (!has) {
                    this.$Message.success('还有未阅题目')
                }
            }
            this.score = this.stuScore[this.quIndex] == -1 ? null : this.stuScore[this.quIndex]
        },

        quit() {
            // 返回页面
            this.$router.push({
                name: sessionStorage.getItem('markFrom')
            })
        },
        /**
         * 按人阅卷
         */
        async toByStuView(stuId) {
            this.toggleStatus = false
            this.isComplete = false
            // 如果挑选的是当前的学生
            if (stuId) {
                let stuInfo = this.stusData.find(item => {
                    return item.stuId == stuId
                })
                if (stuInfo && !stuInfo.answer) {
                    let sas = this.$store.state.user.schoolProfile.blob_sas //目前只有校本评测安排阅卷任务
                    let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri //目前只有校本评测安排阅卷任务
                    let index = stuInfo.tIds.indexOf(this.$store.state.userInfo.TEAMModelId)
                    // let ansBlob = index > -1 ? stuInfo.marks[index] || stuInfo.blob : stuInfo.blob //批注结构已调整
                    let ansBlob = stuInfo.blob
                    stuInfo.answer = ansBlob ? JSON.parse(await this.$tools.getFile(`${blobUrl}/exam/${ansBlob}?${sas}`)) : []
                }
                this.stuAnswer = stuInfo.answer
                this.stuScore = stuInfo.item.map(item => {
                    return item.sc
                })
                this.markArr = stuInfo.item.map(item => {
                    return item.blob
                })
                this.stuId = stuId
            }
            // 随机获取一名学生
            else {
                if (this.taskInfo.count == this.stusData.length) {
                    let res = this.stusData.filter(item => {
                        return item.scores.includes(-1)
                    })
                    if (res.length) {
                        this.$Message.warning(this.$t('learnActivity.mark.noUnMarkStu'))
                        this.toggleStatus = true
                    } else {
                        this.$Message.success(this.$t('learnActivity.mark.completeTask'))
                    }

                } else {
                    this.getNextStu()
                }

            }
        },
        /**
         * 批阅下个学生
         * @param stuId 如果传了stuid则会获取对应学生的数据，否则随机获取一个学生
         */
        getNextStu(stuId) {
            let requestData = {
                code: this.taskInfo.ecode.replace('Exam-', ''),
                id: this.taskInfo.cid,
                subjectId: this.taskInfo.subject,
                count: this.taskInfo.count,
                tmdId: this.$store.state.userInfo.TEAMModelId,
                stuId
            }
            this.$api.mark.FindNextStu(requestData).then(
                async res => {
                    if (res && !res.msg) {
                        this.stusData.push(res)
                        let sas = this.$store.state.user.schoolProfile.blob_sas //目前只有校本评测安排阅卷任务
                        let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri //目前只有校本评测安排阅卷任务
                        let index = res.tIds.indexOf(this.$store.state.userInfo.TEAMModelId)
                        let ansBlob = index > -1 ? res.marks[index] || res.blob : res.blob
                        let answer = ansBlob ? JSON.parse(await this.$tools.getFile(`${blobUrl}/exam/${ansBlob}?${sas}`)) : []

                        this.stuId = res.stuId
                        this.stuAnswer = answer
                        this.stuScore = res.item.map(item => {
                            return item.sc
                        })
                        this.toggleStatus = false
                    } else {
                        this.$Message.error('API ERROR')
                    }
                },
                err => {
                    this.$Message.error('API ERROR')
                }
            )
        },
        //获取批注数据
        getMarkHtml(blob) {
            let sas = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_sas
            let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri
            let url = blobUrl + '/' + blob + '?' + sas
            console.log('hehehe', url)
            let h = `<img src=\"${url}\"/>`
            return [h]

            //直接赋值可以渲染，当时stage.toDataUrl会报错
            // this.ansImg = url
        },
    },
    mounted() {
        this.ansToImg()
    },
    created() {
        let routeData = this.$route.params
        this.paperData = routeData.fullPaper
        this.stuAnswer = routeData.answer
        this.stuScore = routeData.score
        this.quScore = routeData.quScore
        this.stusData = routeData.stusData
        this.taskInfo = routeData.task
        this.stuId = routeData.stuId
        this.stuData = routeData.stuData
        this.markArr = routeData.markArr
        console.log('路由数据', routeData)
        if (this.paperData && this.stuAnswer && this.stuScore && this.quScore && this.taskInfo && this.stuId) {
            //初始化题目index
            if (this.taskInfo.qu && this.taskInfo.qu.length) {
                this.quIndex = this.taskInfo.qu[0]
            }
            // else {
            //     this.quIndex = 0
            // }
            //默认表情包
            for (let i = 0; i < 9; i++) {
                this.imgs.push(require('@/assets/mark/' + i + '.svg'))
            }
        } else {
            // this.$Message.error('数据错误')
            this.quit()
        }
    },
    computed: {
        /**题目分数数组 */
        quScoreArr() {
            let score = this.quScore[this.quIndex] || 10
            return Array.from(new Array(score + 1).keys())
        },
        /**当前题目作答数据 */
        curAnswer() {
            if (this.stuAnswer.length) {
                let index = this.quIndex
                this.score = this.stuScore[index] == -1 ? null : this.stuScore[index]
                let answerOrMark = this.markArr[index] ? this.getMarkHtml(this.markArr[index]) : this.stuAnswer[index]
                console.log('批注或答案', answerOrMark)
                return answerOrMark
            } else {
                return this.stuId + this.$t('learnActivity.mark.noAnswer')
            }
        },

        //试卷题号列表
        quNoList() {
            if (this.paperData.item.length) {
                let objectiveQu = ['single', 'multiple', 'judge']
                let data = []
                let realIndex = 0
                this.paperData.item.forEach((item, index) => {
                    if (item.children.length) {
                        item.children.forEach((childItem, childIndex) => {
                            let i = realIndex++
                            data.push({
                                label: (index + 1) + '-' + (childIndex + 1),
                                value: i,
                                disabled: objectiveQu.includes(childItem.type),
                                err: this.stuData.item ? this.stuData.item[i].err : undefined,
                                improve: this.stuData.item ? this.stuData.item[i].improve : undefined
                            })
                        })
                    } else {
                        let i = realIndex++
                        data.push({
                            label: (index + 1) + '',
                            value: i,
                            disabled: objectiveQu.includes(item.type),
                            err: this.stuData.item ? this.stuData.item[i].err : undefined,
                            improve: this.stuData.item ? this.stuData.item[i].improve : undefined
                        })
                    }
                })
                //按题分配模式在最开始就设置了quindex
                if (this.taskInfo && !this.taskInfo.qu.length) {
                    for (let index in data) {
                        if (!data[index].disabled) {
                            this.quIndex = index
                            break
                        }
                    }
                }
                return data
            }
            return []
        }
    }
}
</script>
<style scoped lang="less">
.objective-tips {
    font-size: 12px;
    color: #ff9900;
}
.continue-btn {
    margin-top: 50px;
    width: 150px;
    display: block;
}
.quit-btn {
    display: block;
    width: 150px;
    margin-top: 4px;
}
.complete-mark {
    width: 100%;
    height: 100%;
    background: #fcfcfc;
    display: flex;
    align-items: center;
    justify-content: center;
    .complete-box {
        text-align: center;
        margin-top: -50px;
        font-size: 16px;
        padding: 50px 80px;
        height: fit-content;
        box-shadow: 0px 0px 10px #dbdbdb;
        background: white;
    }
    .ok-icon {
        color: #19be6b;
        display: block;
        font-size: 110px;
    }
}
.reason-item {
    display: block;
    margin: 10px;
}
.light-stu-prog {
    margin-bottom: 15px;
}
.score-setting-wrap {
    margin-top: 50px;
    padding: 0px 5px;
}
.score-setting-item {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}
.mark-info {
    background: #2db7f5;
    color: white;
    padding: 2px 5px;
    border-radius: 2px;
}
.score-info {
    background: #19be6b;
    color: white;
    padding: 1px 5px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}
.cur-qu-index {
    background: #ff9900;
    color: white;
    padding: 1px 10px;
    border-radius: 2px;
    text-align: center;
    font-size: 16px;
}
#markIframe {
    position: fixed;
    top: 9990px;
    width: 850px;
    background: #f5f5f5;
}
.quit-marking-icon {
    display: inline-block;
    font-size: 18px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    color: black;
}
.quit-marking-text {
    margin-right: 15px;
}
.expression-box {
    max-width: 300px;
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
}
.expression-img {
    width: 80px;
    margin: 10px;
    height: auto;
}

.qu-tips-box {
    & :nth-child(1)::before {
        background: #19be6b;
    }
    & :nth-child(2)::before {
        background: #e1e1e1;
    }
    & :nth-child(3)::before {
        background: #ed4014;
    }
    & :nth-child(4)::before {
        background: #e1e1e1;
    }
}

.qu-tips-tag {
    display: inline-block;
    margin-right: 15px;
    color: #909090;
    font-size: 12px;
    &::before {
        content: "";
        width: 15px;
        height: 10px;
        display: inline-block;
        border-radius: 3px;
        vertical-align: baseline;
    }
}
.qu-index {
    width: 30px;
    height: 22px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #e1e1e1;
    line-height: 22px;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    background: #f1f1f1;
    &:hover {
        // background: white;
        box-shadow: 0px 0px 4px rgba(70, 43, 43, 0.3);
    }
}
.right-qu {
    color: #fff;
    border-color: #19be6b;
    background: #19be6b;
}
.err-qu {
    color: #fff;
    border-color: #ed4014;
    background: #ed4014;
}
.submit-score {
    width: 236px;
    margin-left: 2px;
}
.score-key-box {
    margin-top: 10px;
    height: 120px;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
    overflow: hidden;
}
.hind-key-box {
    height: 0px;
}
.score-key {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #e1e1e1;
    line-height: 30px;
    text-align: center;
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    background: #f1f1f1;
}
.score-key-active {
    background: white;
    border-color: #1cc0f3;
    color: #1cc0f3;
}
.score-input-box {
    display: flex;
    align-items: center;
}
.score-wrap > :nth-child(2) {
    background: white;
}
.quick-score-box {
    padding: 10px 15px;
    border-bottom: 1px solid #e1e1e1;
}

.toggle-num-status {
    float: right;
    margin-right: 5px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 2px;
    user-select: none;
}
.btn-wrap {
    float: right;
    // padding-right: 15px;
}
.action-btn {
    margin-left: 30px;
    cursor: pointer;
}
.action-btn-icon {
    display: inline-block;
    margin-right: 5px;
}
.tmd-logo {
    width: 35px;
    height: 35px;
    margin: 5px 18px 5px 13px;
    vertical-align: bottom;
}
.mark-area {
    width: 100%;
    height: 100%;
    user-select: none;
    // padding: 5px;
}
.mark-header {
    height: 50px;
    width: 100%;
    // border-bottom: 1px solid #e1e1e1;
    background: #fafafa;
    line-height: 50px;
    text-align: left;
    padding: 0px 18px 0px 0px;
    box-shadow: 0px 2px 3px 0px rgba(100, 100, 100, 0.2);
    position: relative;
    z-index: 99;
    .info-label {
        color: #909090;
    }
    .info-value {
        margin-right: 30px;
    }
}
.mark-main {
    display: flex;
    flex-direction: row;
    height: calc(100% - 50px);
}
.mark-tools-wrap {
    position: relative;
    box-shadow: 2px 0px 5px 0px rgba(100, 100, 100, 0.2);
    z-index: 9;
    flex: 0 0 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    // border-right: 1px solid #e1e1e1;
    background: #fafafa;
}
.mark-stage {
    flex: 1;
    overflow: hidden;
    background: white;
    text-align: center;
    position: relative;
    height: 100%;
}
.qu-index-box {
    position: absolute;
    bottom: 0px;
    background: #fafafa;
    width: 100%;
    left: 0px;
    height: fit-content;
    text-align: left;
    max-height: 180px;
    padding: 10px 10px 20px 10px;
    box-shadow: 0 -2px 20px -12px #595959;
    p {
        width: fit-content;
    }
}
.score-wrap {
    position: relative;
    box-shadow: -2px 0px 5px 0px rgba(100, 100, 100, 0.2);
    z-index: 9;
    flex: 0 0 241px;
    height: 100%;
    // border-left: 1px solid #e1e1e1;
    background: #fafafa;
}
.tool-icon {
    font-size: 20px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    // border-bottom: 1px solid #e1e1e1;
    width: 39px;
    &:hover {
        color: #1cc0f3;
        box-shadow: 0 5px 10px -8px #1cc0f3;
        background: white;
        border-color: transparent;
    }
}
</style>
<style>
.mark-tools-wrap .ivu-poptip-title::after {
    display: none;
}
.textarea:focus {
    box-shadow: none;
    overflow: hidden;
    outline: none !important;
    line-height: 1.5;
}
.score-input-box .ivu-input-number-input {
    font-size: 18px;
    color: red;
    font-weight: 800;
}
.light-stu-prog .setting-content {
    background: #fff;
    box-shadow: none;
    border-color: #e8eaec;
}
.light-stu-prog .filter-tab-item {
    border-color: #e8eaec;
}
.light-stu-prog .filter-tab-item-active {
    background: #fff !important;
    color: black;
}
.light-stu-prog .filter-tab-item {
    background: #eee;
}
.light-stu-prog .no-mark-text .no-mark-count {
    color: #515a6e;
}
.light-stu-prog .stu-name {
    background: #eee;
    color: #515a6e;
}
.light-stu-prog .stu-name:hover {
    color: #515a6e;
    box-shadow: 0px 0px 5px 2px #ccc;
}
</style>