<template>
    <div class="paper-score-container">
        <!-- 题目列表部分 -->
        <Loading :top="200" type="1" style="text-align:center" v-show="dataLoading"></Loading>
        <div class="scoring-paper-header">
            <div>
                <span class="base-info-item">
                    {{$t('learnActivity.score.stuName')}}
                    <span class="analysis-info">{{studentAnswer.name}}</span>
                </span>
                <span class="base-info-item">
                    {{$t('learnActivity.score.score')}}
                    <span class="analysis-info">
                        {{scoreTotal}}{{$t('learnActivity.score.scoreUnit')}}
                    </span>
                </span>

                <span class="base-info-btn" type="success" @click="saveScore">
                    <Icon type="ios-albums-outline" />
                    {{$t('learnActivity.score.saveScore')}}
                </span>
                <span class="base-info-btn" @click="showAnswer = !showAnswer">
                    <Icon :type="showAnswer ? 'md-eye-off':'md-eye'" />
                    {{ showAnswer ? $t('learnActivity.score.hideAns') : $t('learnActivity.score.showAns')}}
                </span>
                <span class="base-info-btn" @click="showQu = !showQu">
                    <Icon :type="showQu ? 'md-eye-off':'md-eye'" />
                    {{ showQu ? $t('learnActivity.score.hideQu') : $t('learnActivity.score.showQu')}}
                </span>
                <!-- <span class="base-info-btn" @click="isDefOrder = !isDefOrder">
                    <Icon :type="isDefOrder ? 'md-reorder':'ios-keypad'" />
                    {{isDefOrder ? '默认顺序' : '题型排序'}}
                </span> -->
            </div>
            <!-- 题号 -->
            <div class="question-index-box" v-if="studentAnswer.scores">
                <div class="base-info-item" style="white-space: nowrap;">{{$t('learnActivity.score.quIndex')}}</div>
                <div>
                    <span v-for="(typeItem,typeIndex) in groupList" :key="typeIndex">
                        <span v-for="(item,index) in typeItem.list" :key="index">
                            <span @click="goToQuestion(getScoreIndex(typeIndex,index))" :class="studentAnswer.scores[item.index] >= 0 ? 'qu-order-tag':'qu-order-tag-def'" v-if="typeItem.type !== 'compose'">
                                {{getQuIndex(typeIndex,index)}}
                            </span>
                            <span v-else>
                                <span @click="goToQuestion(getScoreIndex(typeIndex,index,childIndex))" v-for="(childItem,childIndex) in item.children" :key="childIndex" :class="studentAnswer.scores[childItem.index] >= 0 ? 'qu-order-tag':'qu-order-tag-def'">
                                    {{getQuIndex(typeIndex,index) + '-' + (childIndex + 1)}}
                                </span>
                            </span>
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="qu-list-wrap scoring-exercise-wrap" ref="mathJaxContainer" v-show="!dataLoading">
            <!-- <vuescroll ref="question-scrool" > -->
            <!-- 按题型排序 -->
            <div v-show="!isComplete" class="list-view" :key="'group'+ typeIndex" v-for="(typeItem,typeIndex) in groupList">
                <p class="type-name">
                    {{ numberConvertToUppercase(getLatestTypeIndex(typeItem.type) + 1) }}
                    {{ exersicesType[typeItem.type] }}
                    ({{ typeItem.score || 0 }} {{$t('learnActivity.score.scoreUnit')}})
                </p>
                <div ref="ques" v-for="(item,index) in typeItem.list" :key="'qu'+ index" :class='["exercise-item"]'>
                    <!-- 非综合题-->
                    <div v-if="item.type != 'compose'" style="display:flex;width:100%;padding-top:15px;" :class="['not-compose-box', activeIndex == getScoreIndex(typeIndex,index) ? 'active-qu-wrap' : '']" :id="'qustion'+ getScoreIndex(typeIndex,index)" @click="activeIndex = getScoreIndex(typeIndex,index)">
                        <div class="scoring-input-box" @click.stop v-if="studentAnswer.scores && studentAnswer.scores.length">
                            <InputNumber v-model="studentAnswer.scores[item.index]" size="small" :formatter="value => value < 0 ? '' : `${value}${$t('learnActivity.score.scoreUnit')}`" :parser="value => value.replace($t('learnActivity.score.scoreUnit'), '')" :min="0" :max="item.score" :placeholder="$t('learnActivity.score.zeroScore1')" class="score-input" />
                            <!-- 快速打分 满分 零分 -->
                            <div style="display:flex;justify-content: space-evenly;margin-top:5px;">
                                <span class="fast-score-tag" :title="$t('learnActivity.score.fullScore')" @click="fastSetScore(item.index,item.score)">
                                    <!-- 题目分数 -->{{item.score}}
                                </span>
                                <span class="fast-score-tag" :title="$t('learnActivity.score.zeroScore')" @click="fastSetScore(item.index,0)" style="background:#ed4014">
                                    0
                                </span>
                            </div>
                            <!-- 加分 减分 -->
                            <div style="display:flex;justify-content: space-evenly;margin-top:5px;">
                                <span class="fast-score-tag" @click="scoreUp(item.index,item.score)">
                                    <Icon type="md-add" />
                                </span>
                                <span class="fast-score-tag" @click="scoreDown(item.index)" style="background:#ed4014">
                                    <Icon type="md-remove" />
                                </span>
                            </div>
                            <!-- 滚动上下题目去掉 -->
                            <!-- <div style="display:flex;justify-content: space-evenly;margin-top:5px;display:none;" v-show="showQu">
                                <span class="fast-score-tag" :title="$t('learnActivity.score.lastQu')" :style="{'background':'#aeaeae','cursor':(typeIndex + index) == 0 ? 'not-allowed':''}" @click="goToQuestion(getQuIndex(typeIndex,index) - 1)">
                                    <Icon type="md-arrow-round-back" />
                                </span>
                                <span class="fast-score-tag" :title="$t('learnActivity.score.nextQu')" :style="{'background':'#aeaeae','cursor':(typeIndex + index + 1) == studentAnswer.scores.legnth ? 'not-allowed':''}" @click="goToQuestion(getQuIndex(typeIndex,index) + 1)">
                                    <Icon type="md-arrow-round-forward" />
                                </span>
                            </div> -->
                        </div>
                        <div class="qu-info-box">
                            <!-- 题干部分 -->
                            <div class="item-question item-question-flex" v-show="showQu">
                                <div class="item-question-order">{{ getQuIndex(typeIndex,index) }} .</div>
                                <div class="item-question-text" v-html="item.question"></div>
                            </div>
                            <!-- 选项部分 -->
                            <div v-for="(option,optionIndex) in item.option" :key="'op' + optionIndex" class="item-options" v-show="showQu">
                                <div class="item-option-content">
                                    <div class="item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} :</div>
                                    <div class="item-option-text" v-html="option.value"></div>
                                </div>
                            </div>
                            <div class="stu-answer-detail">
                                <p class="answer-title">
                                    <span v-show="!showQu" class="item-question-order">{{$t('learnActivity.score.quIndex1')}} {{ getQuIndex(typeIndex,index)}} .</span>
                                    {{$t('learnActivity.score.stuAns')}}
                                    <Icon type="md-checkmark" v-show="studentAnswer.scores[item.index] == item.score" />
                                    <Icon type="md-close" color="#ed4014" v-show="studentAnswer.scores[item.index] == 0" />
                                    <Icon custom="iconfont icon-half-right" color="#ff9900" v-show="studentAnswer.scores[item.index] > 0 && studentAnswer.scores[item.index] < item.score" />
                                </p>
                                <!--学生作答答案显示区域-->
                                <div class="stu-answer-box item-explain-details" v-if="studentAnswer.answers && studentAnswer.answers.length">
                                    <!-- 批注 主观题才会有批注功能 -->
                                    <div class="mark-btn-box" @click="markStuAnswer(item.index)" v-if="item.type !== 'single' && item.type !== 'multiple' && item.type !== 'judge'">
                                        <Icon type="md-create" />
                                        <span style="margin-left:5px;">{{$t('learnActivity.score.mark')}}</span>
                                    </div>
                                    <!--多选题答案-->
                                    <div v-if="item.type === 'multiple'" :id="'answer'+ getScoreIndex(typeIndex,index)">
                                        <!-- <span v-for="(answerItem,answerIndex) in studentAnswer.answers[getScoreIndex(typeIndex,index)]" :key="'an'+ (answerIndex+index)" v-html="answerItem" style="display:inline;">
                                        </span> -->
                                        <span v-for="(answerItem,answerIndex) in studentAnswer.answers[item.index]" :key="'an'+ (answerIndex+index)" v-html="answerItem" style="display:inline;">
                                        </span>
                                    </div>
                                    <!--其余题型答案-->
                                    <div v-else-if="studentAnswer.answers[item.index]" :id="'answer'+ getScoreIndex(typeIndex,index)">
                                        <div>
                                            <span v-html="studentAnswer.answers[item.index].toString()"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 答案以及解析 -->
                            <transition name="slide">
                                <div class="toggle-area" v-show="showAnswer">
                                    <div v-if="item.type !== 'compose'">
                                        <!-- 答案展示部分 -->
                                        <div class="item-explain">
                                            <span class="explain-title">{{$t('learnActivity.score.quAns')}}</span>
                                            <div class="item-explain-details">
                                                <!-- 问答题答案 -->
                                                <div v-if="item.type === 'subjective'">
                                                    <span v-for="(answer,index) in item.answer" :key="index" v-html="item.answer.length ? answer : $t('learnActivity.score.noAnswer')"></span>
                                                </div>
                                                <!-- 填空题答案 -->
                                                <div v-else-if="item.type === 'complete'">
                                                    <span :class="[ item.type === 'complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer" :key="index" v-html="answer"></span>
                                                </div>
                                                <!-- 其余题型答案 -->
                                                <div v-else>
                                                    <span v-for="(answer,index) in item.answer" :key="index" v-html="answer"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 解析部分 -->
                                        <div class="item-explain">
                                            <span class="explain-title">{{$t('learnActivity.score.anaLabel')}}</span>
                                            <div class="item-explain-details">
                                                <span v-html="item.explain || $t('learnActivity.score.noAna')"></span>
                                            </div>
                                        </div>
                                        <!-- 知识点部分 -->
                                        <div class="item-explain">
                                            <span class="explain-title">{{$t('learnActivity.score.kdLabel')}}</span>
                                            <div class="item-explain-details">
                                                <span v-if="!item.knowledge || (_.compact(item.knowledge).length)">{{$t('learnActivity.score.noKd')}}</span>
                                                <div v-else>
                                                    <span v-for="(point,index) in item.knowledge" :key="index" class="item-point-tag">
                                                        {{ point }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </transition>
                        </div>
                    </div>
                    <!-- 综合题 -->
                    <div v-else style="width:100%;" class="compose-box">
                        <div class="item-question item-question-flex" style="margin-left:90px; margin-top:20px;" v-show="showQu">
                            <div class="item-question-order">{{ getQuIndex(typeIndex,index)}}.</div>
                            <div class="item-question-text" v-html="item.question"></div>
                        </div>
                        <div :class="['child-item', activeIndex == getScoreIndex(typeIndex,index,childIndex) ? 'active-qu-wrap' : '']" v-for="(childItem,childIndex) in item.children" :key="childIndex" style="padding-top:15px;" :id="'qustion'+getScoreIndex(typeIndex,index,childIndex)" @click="activeIndex = getScoreIndex(typeIndex,index,childIndex)">
                            <div class="scoring-input-box" @click.stop v-if="studentAnswer.scores && studentAnswer.scores.length">
                                <InputNumber v-model="studentAnswer.scores[childItem.index]" size="small" :formatter="value => value < 0 ? '' : `${value}${$t('learnActivity.score.scoreUnit')}`" :parser="value => value.replace($t('learnActivity.score.scoreUnit'), '')" :min="0" :max="childItem.score" :placeholder="$t('learnActivity.score.zeroScore1')" class="score-input" />
                                <!-- 快速打分 满分 零分 -->
                                <div style="display:flex;justify-content: space-evenly;margin-top:5px;">
                                    <span class="fast-score-tag" :title="$t('learnActivity.score.fullScore')" @click="fastSetScore(childItem.index,childItem.score)">
                                        <!-- 题目分数 -->{{childItem.score}}
                                    </span>
                                    <span class="fast-score-tag" :title="$t('learnActivity.score.zeroScore')" @click="fastSetScore(childItem.index,0)" style="background:#ed4014">
                                        0
                                    </span>
                                </div>
                                <!-- 加分 减分 -->
                                <div style="display:flex;justify-content: space-evenly;margin-top:5px;">
                                    <span class="fast-score-tag" @click="scoreUp(childItem.index,childItem.score)">
                                        <Icon type="md-add" />
                                    </span>
                                    <span class="fast-score-tag" @click="scoreDown(childItem.index)" style="background:#ed4014">
                                        <Icon type="md-remove" />
                                    </span>
                                </div>
                                <!-- 滚动上下题目去掉 -->
                                <!-- <div style="display:flex;justify-content: space-evenly;margin-top:5px;display:none;" v-show="showQu">
                                        <span class="fast-score-tag" :title="$t('learnActivity.score.lastQu')" :style="{'background':'#aeaeae','cursor':(typeIndex + index + childIndex) == 0 ? 'not-allowed':''}" @click="goToQuestion((getQuIndex(typeIndex,index) + childIndex) - 1)">
                                            <Icon type="md-arrow-round-back" />
                                        </span>
                                        <span class="fast-score-tag" :title="$t('learnActivity.score.nextQu')" :style="{'background':'#aeaeae','cursor':(typeIndex + index + childIndex + 1) == studentAnswer.scores.length ? 'not-allowed':''}" @click="goToQuestion((getQuIndex(typeIndex,index) + childIndex) + 1)">
                                            <Icon type="md-arrow-round-forward" />
                                        </span>
                                    </div> -->
                            </div>
                            <div class="qu-info-box">
                                <div class="child-item-question child-item-question-flex" v-show="showQu">
                                    <span class="child-item-question-order">{{$t('learnActivity.score.sQuLabel1')}}{{ childIndex + 1 }}{{$t('learnActivity.score.sQuLabel2')}}</span>
                                    <p class="child-item-question-content" v-html="childItem.question"></p>
                                </div>
                                <!-- 选项部分 -->
                                <div v-for="(option,optionIndex) in childItem.option" :key="optionIndex" class="child-item-option" style="pointer-events:none;" v-show="showQu">
                                    <div>
                                        <div class="child-item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : </div>
                                        <div class="child-item-option-text" v-html="option.value"></div>
                                    </div>
                                </div>
                                <div class="stu-answer-detail">
                                    <p class="answer-title">
                                        <span class="child-item-question-order" v-show="!showQu">{{$t('learnActivity.score.quIndexLabel')}} {{getQuIndex(typeIndex,index)+'-'+ (childIndex + 1) }}{{$t('learnActivity.score.sQuLabel2')}}</span>
                                        {{$t('learnActivity.score.stuAns')}}
                                        <Icon type="md-checkmark" v-show="studentAnswer.scores[childItem.index] == childItem.score" />
                                        <Icon type="md-close" color="#ed4014" v-show="studentAnswer.scores[childItem.index] == 0" />
                                        <Icon custom="iconfont icon-half-right" color="#ff9900" v-show="studentAnswer.scores[childItem.index] > 0 && studentAnswer.scores[childItem.index] < childItem.score" />
                                    </p>
                                    <!--学生作答答案显示区域-->
                                    <div class="stu-answer-box item-explain-details" v-if="studentAnswer.answers && studentAnswer.answers.length">
                                        <!-- 批注 主观题才会有批注功能 -->
                                        <div class="mark-btn-box" @click="markStuAnswer(childItem.index)" v-if="childItem.type !== 'single' && childItem.type !== 'multiple' && childItem.type !== 'judge'">
                                            <Icon type="md-create" />
                                            <span style="margin-left:5px;">{{$t('learnActivity.score.mark')}}</span>
                                        </div>
                                        <!--多选题答案-->
                                        <div v-if="childItem.type === 'multiple'" :id="'answer'+ getScoreIndex(typeIndex,index,childIndex)">
                                            <span v-for="(answerItem,answerIndex) in studentAnswer.answers[childItem.index]" :key="'an'+ (index+answerIndex+childIndex)" v-html="answerItem" style="display:inline-block;"></span>
                                        </div>
                                        <!--其余题型答案-->
                                        <div v-else-if="studentAnswer.answers[childItem.index]" :id="'answer'+ getScoreIndex(typeIndex,index,childIndex)">
                                            <div>
                                                <span v-html="studentAnswer.answers[childItem.index].toString()"></span><br />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 答案展示部分 -->
                                <div class="item-explain" v-show="showAnswer">
                                    <span class="explain-title">{{$t('learnActivity.score.quAns')}}</span>
                                    <div class="item-explain-details">
                                        <!-- 问答题答案 -->
                                        <div v-if="item.type === 'subjective' || item.type === 'complete'">
                                            <span v-for="(answer,index) in childItem.answer" :key="index" v-html="childItem.answer.length ? answer : $t('learnActivity.score.noAnswer')"></span>
                                        </div>
                                        <!-- 判断题答案 -->
                                        <div v-else-if="item.type === 'judge'">
                                            <span>{{ childItem.answer.length ? (childItem.answer[0] === 'A' ? $t('learnActivity.score.trueAns') : $t('learnActivity.score.falseAns')) : $t('learnActivity.score.noAnswer') }}</span>
                                        </div>
                                        <!-- 其余题型答案 -->
                                        <div v-else>
                                            <span :class="[ item.type === 'complete' ? 'item-answer-item':'']" v-for="(answer,index) in childItem.answer" :key="index" v-html="answer"></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 解析部分 -->
                                <div class="item-explain" v-show="showAnswer">
                                    <span class="explain-title">{{$t('learnActivity.score.anaLabel')}}</span>
                                    <div class="item-explain-details">
                                        <span v-html="childItem.explain || $t('learnActivity.score.noAna')"></span>
                                    </div>
                                </div>
                                <!-- 知识点部分 -->
                                <div class="item-explain" v-show="showAnswer">
                                    <span class="explain-title">{{$t('learnActivity.score.kdLabel')}}</span>
                                    <div class="item-explain-details">
                                        <span v-if="!childItem.knowledge || !childItem.knowledge.length">{{$t('learnActivity.score.noKd')}}</span>
                                        <div v-else>
                                            <span v-for="(point,index) in childItem.knowledge" :key="index" class="item-point-tag">
                                                <span>{{ point }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 默认排序 -->
            
            <!-- </vuescroll> -->
            <div v-show="isComplete" class="complete-score-box">
                <Icon class="complete-icon" type="md-checkmark-circle" />
                <p class="complete-stu-info">{{studentAnswer.name}} ({{scoreTotal}}{{$t('learnActivity.score.scoreUnit')}})</p>
                <p class="complete-next" @click="nextStu">{{$t('learnActivity.score.nextStu')}}</p>
            </div>
        </div>
        <Modal v-model="markStatus" fullscreen :title="$t('learnActivity.score.mark')" footer-hide>
            <BaseMyCanvas v-if="markStatus" :bgImg="markBg" @onCloseModal="closeModal" @onSaveCanvas="saveMark" writeColor="red"></BaseMyCanvas>
        </Modal>
        <!-- 用来单独渲染学生作答数据，提高tocanvas 的效率 -->
        <iframe id="answerIframe" :srcdoc="studentAnswer.answers[curAnIndex]" v-if="studentAnswer.answers"></iframe>

    </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
    components: {
    },
    props: {
        examId: {
            type: String,
            default: '',
            required: true
        },
        examScope: {
            type: String,
            default: '',
            required: true
        },
        // 用于判断是个人还是校本评测
        owner: {
            type: String,
            default: '',
            required: true
        },
        subjectId: {
            type: String,
            default: '',
            required: true
        },
        paper: {
            type: Object,
            default: () => { }
        },
        studentAnswer: {
            type: Object,
            default: () => { }
        },
        defaultIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            isDefOrder: false, //是否默认排序  默认/题型
            activeIndex: 0,
            curAnIndex: -1,
            markStatus: false,
            isComplete: false,
            isAllOpen: true,
            paperInfo: {},
            dataLoading: false,
            exerciseList: [],
            exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
            collapseList: [],
            groupList: [],
            typeList: ['single', 'multiple', 'judge', 'complete', 'subjective', 'connector', 'correct', 'compose'],
            showAnswer: false,
            showQu: false,
            showOption: false,
            scope: '',
            markBg: undefined
        }
    },
    methods: {
        closeModal() {
            this.markStatus = false
            this.curAnIndex = -1
            let answerIframe = document.getElementById('answerIframe')
            answerIframe.onload = () => { }
        },
        saveMark(data) {
            let img = document.createElement('img')
            img.src = data.base64
            this.$set(this.studentAnswer.answers, this.curAnIndex, [img.outerHTML])
            this.markStatus = false
            let answerIframe = document.getElementById('answerIframe')
            answerIframe.onload = () => { }
            this.$api.learnActivity.upsertAnswer({
                "id": this.examId,
                "answer": this.studentAnswer.answers,
                "studentId": this.studentAnswer.id,
                "subjectId": this.subjectId,
                "classId": this.studentAnswer.classId,
                // "code": this.paperInfo.code,//这种方式paper code规则调整了，会多Paper-"
                "code": this.owner == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId,//暂时取代上面的方式
            }).then(
                res => {
                    this.$Message.success(this.$t('learnActivity.score.markOk'))
                },
                err => {
                    this.$Message.error(this.$t('learnActivity.score.markErr'))
                }
            ).finally(() => {
                this.curAnIndex = -1
            })
        },
        // 批注学生作答数据
        markStuAnswer(index) {
            this.curAnIndex = index
            let answerIframe = document.getElementById('answerIframe')
            answerIframe.onload = () => {
                answerIframe.style.width = '850px'
                answerIframe.contentWindow.document.body.style.margin = '0px 20px'
                answerIframe.contentWindow.document.body.style.padding = '10px'
                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, {
                    onclone: (data) => {
                    }
                }).then((canvas) => {
                    canvas.id = "canvas" + index
                    this.markBg = canvas.toDataURL()
                    this.markStatus = true
                })
            }
        },

        // 获取题号
        getQuIndex(typeIndex, index) {
            let sum = 0
            let _this = this
            function count(typeIndex) {
                if (typeIndex == 0) {
                    sum += index + 1
                } else if (typeIndex > 0) {
                    typeIndex--
                    sum += _this.groupList[typeIndex].list.length
                    count(typeIndex)
                }
            }
            count(typeIndex)
            return sum
        },
        //获取socre和answer Index
        getScoreIndex(typeIndex, index, childIndex = 0) {
            let sum = childIndex
            let _this = this
            if (_this.groupList[typeIndex].type == 'compose') {
                for (let qIndex = 0; qIndex < index; qIndex++) {
                    sum += _this.groupList[typeIndex].list[qIndex].children.length - 1
                }
            }
            function count(typeIndex) {
                if (typeIndex == 0) {
                    sum += index
                } else if (typeIndex > 0) {
                    typeIndex--
                    sum += _this.groupList[typeIndex].list.length
                    count(typeIndex)
                }
            }
            count(typeIndex)
            return sum
        },
        //点评下一位学生
        nextStu() {
            this.$emit('nextStu')
        },
        //快速定位题目
        goToQuestion(index) {
            this.activeIndex = index
            this.$el.querySelector('#qustion' + index).scrollIntoView({
                behavior: "smooth",  // 平滑过渡
                block: "center"  // 上边框与视窗顶部平齐。默认值
            })
        },
        //快速打分
        fastSetScore(index, score) {
            this.$set(this.studentAnswer.scores, index, score)
        },
        // 加分
        scoreUp(index, totalScore) {
            if (this.studentAnswer.scores[index] < totalScore) {
                this.$set(this.studentAnswer.scores, index, ++this.studentAnswer.scores[index])
            } else {
                this.$Message.warning(this.$t('learnActivity.score.isFullTips'))
            }
        },
        // 减分
        scoreDown(index) {
            if (this.studentAnswer.scores[index] > 0) {
                this.$set(this.studentAnswer.scores, index, --this.studentAnswer.scores[index])
            } else {
                this.$Message.warning(this.$t('learnActivity.score.isZeroTips'))
            }
        },

        //保存学生分数
        saveScore() {
            let requestData = {
                "id": this.examId,
                // "code": this.examScope == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId,//暂时取代上面的方式
                "code": this.owner == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId,//暂时取代上面的方式
                "point": this.studentAnswer.scores,
                "studentId": this.studentAnswer.id,
                "classId": this.studentAnswer.classId,
                "school": this.examScope == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId,//暂时取代上面的方式
                "subjectId": this.subjectId
            }
            this.$api.learnActivity.UpsertAllRecord(requestData).then(res => {
                if (res.error == null) {
                    this.$Message.success(this.$t('learnActivity.score.saveScoreOk'))
                    this.isComplete = true
                } else {
                    this.$Message.error(this.$t('learnActivity.score.saveSocreErr'))
                }
            })
        },
        openAnswer() {
            this.$refs.exPaper.onHandleToggles(this.isAllOpen)
            this.isAllOpen = !this.isAllOpen
        },

        /**
         * 数字与中文转换
         * @param num
         */
        numberConvertToUppercase(num) {
            num = Number(num)
            var upperCaseNumber = [
                this.$t('learnActivity.score.zero'),
                this.$t('learnActivity.score.one'),
                this.$t('learnActivity.score.two'),
                this.$t('learnActivity.score.three'),
                this.$t('learnActivity.score.four'),
                this.$t('learnActivity.score.five'),
                this.$t('learnActivity.score.six'),
                this.$t('learnActivity.score.seven'),
                this.$t('learnActivity.score.eight'),
                this.$t('learnActivity.score.nine'),
                this.$t('learnActivity.score.ten'),
                this.$t('learnActivity.score.hundred'),
                this.$t('learnActivity.score.thousand'),
                this.$t('learnActivity.score.tenThd'),
                this.$t('learnActivity.score.hMillion')
            ]
            var length = String(num).length
            if (length === 1) {
                return upperCaseNumber[num]
            } else if (length === 2) {
                if (num === 10) {
                    return upperCaseNumber[num]
                } else if (num > 10 && num < 20) {
                    return this.$t('learnActivity.score.ten') + upperCaseNumber[String(num).charAt(1)]
                } else {
                    return upperCaseNumber[String(num).charAt(0)] + this.$t('learnActivity.score.ten') + upperCaseNumber[String(num).charAt(1)].replace(this.$t('learnActivity.score.zero'), '')
                }
            }
        },
        // 题目鼠标滑过事件
        //exerciseMouseover(e) {
        //    e.preventDefault()
        //    e.target.children[0].style.display = 'block'
        //},

        // 题目鼠标移出事件
        //exerciseMouseleave(e) {
        //    e.preventDefault()
        //    e.target.children[0].style.display = 'none'
        //},
        getLatestTypeIndex(type) {
            let arr = []
            this.groupList.forEach(i => {
                if (i.list.length) {
                    arr.push(i.type)
                }
            })
            return arr.indexOf(type)
        }
    },
    watch: {
        paper: {
            handler(newValue, oldValue) {
                this.paperInfo = newValue
            },
            deep: true
        },
        paperInfo: {
            handler(newPaper) {
                if (newPaper && newPaper.item) {
                    this.dataLoading = true
                    let that = this
                    this.groupList = []
                    this.exerciseList = []
                    if (newPaper.item.length) {
                        let index = 0
                        newPaper.item.forEach((i) => {
                            //记录题目原始位置
                            if (i.type == 'compose') {
                                i.children.forEach((cItem) => {
                                    cItem.index = index
                                    index++
                                })
                            } else {
                                i.index = index
                                index++
                            }
                            if (!i.score) i.score = 0
                        })
                        /* 处理试卷内题目按照题型排序 */
                        this.typeList.forEach(item => {
                            this._.mapKeys(this._.groupBy(newPaper.item, 'type'), function (value, key) {
                                if (key === item) { /* 按照题型排序，并且计算每种题型的总分 */
                                    that.groupList.push({
                                        type: key,
                                        list: value,
                                        score: value.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
                                    })
                                    that.exerciseList = that.exerciseList.concat(value)
                                }
                            })
                        })
                    }
                    this.dataLoading = false
                }
            },
            deep: true
        },
        studentAnswer: {
            async handler(newValue, oldValue) {
                if (!this.studentAnswer.status) {
                    if (newValue.answers.length) {
                        try {
                            let sas = this.examScope == 'school' ? this.$store.state.user.schoolProfile.blob_sas : this.$store.state.user.userProfile.blob_sas
                            //let container = this.examScope == 'school' ? this.$store.state.userInfo.schoolCode : this.$store.state.userInfo.TEAMModelId
                            let blobUrl = this.examScope == 'school' ? JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri : JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8")).blob_uri
                            let a = null
                            // 如果有批注则渲染批注，没有则渲染元数据
                            if (newValue.mark) {
                                a = await await this.$tools.getFile(`${blobUrl}/exam/${newValue.mark}?${sas}`)
                            } else {
                                //为了兼容原来完整的路径，这里做判断
                                if (newValue.answers[0].indexOf('https://teammodelstorage') > -1) {
                                    a = await this.$tools.getFile(`${newValue.answers[0]}?${sas}`)
                                } else {
                                    a = await this.$tools.getFile(`${blobUrl}/exam/${newValue.answers[0]}?${sas}`)
                                }
                            }

                            if (a) {
                                let ans = JSON.parse(a)
                                ans.forEach((item, index) => {
                                    if (!item.length) ans[index] = [this.$t('learnActivity.score.noStuAns')]
                                })
                                this.$set(this.studentAnswer, 'answers', ans)
                            } else {
                                this.$set(this.studentAnswer, 'answers', [])
                            }
                        } catch (e) {
                            console.log('error', e)
                        }
                    } else {
                        let a = newValue.scores.map(item => {
                            return [this.$t('learnActivity.score.noStuAns1')]
                        })
                        this.$set(this.studentAnswer, 'answers', a)
                    }
                    this.studentAnswer.status = true
                    this.$nextTick(() => {
                        this.activeIndex = this.defaultIndex
                        this.goToQuestion(this.defaultIndex)
                    })
                }
            },
            deep: true
        }
    },
    computed: {
        scoreTotal() {
            if (this.studentAnswer && this.studentAnswer.scores) {
                let s = this.studentAnswer.scores.reduce((prev, cur) => {
                    cur = cur < 0 ? 0 : cur
                    return prev + cur
                }, 0)
                return s
            }
            return 0
        }
    },
    created() {
        if (this.$route.name == 'privateEvaluation') {
            this.scope = 'private'
        } else {
            this.scope = 'school'
        }
    }
}
</script>

<style scoped lang="less">
@import "./PaperScore.less";
</style>
<style lang="less">
.scoring-input-box .ivu-input-number-handler-wrap {
    display: none;
}
.stu-answer-box img {
    max-width: 100%;
}
</style>
<style scoped>
#answerIframe {
    position: fixed;
    top: 9990px;
    width: 850px;
    background: #f5f5f5;
}
</style>

