<template>
    <div class="mark-area">
        <!-- 头部基础信息 -->
        <div class="mark-header">
            <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">{{taskInfo.name}}</span>
            <span class="info-label">{{$t('learnActivity.mark.stuId')}}</span>
            <span class="info-value stu-id-info">{{stuId}}</span>
            <span class="info-label">{{$t('learnActivity.mark.curQu')}}</span>
            <span class="info-value cur-qu-index">{{'--'}}</span>
        </div>
        <div class="mark-main">
            <!-- 工具条 -->
            <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="saveMark" :status="mouseStatus" :bgImg="ansImg" :drawImgData="drawImgData" style="padding-bottom:85px"></MarkCanvas>
            </div>
            <!-- 打分部分 -->
            <div class="score-wrap">
                <div class="quick-score-box score-input-box">
                    <span>阅卷评分1：</span>
                    <span class="score-num">10</span>
                    <span class="view-mark">查看批注</span>
                </div>
                <div class="quick-score-box score-input-box">
                    <span>阅卷评分2：</span>
                    <span class="score-num">20</span>
                    <span class="view-mark">查看批注</span>
                </div>
                <div class="quick-score-box score-input-box">
                    <span>仲裁分数：</span>
                    <InputNumber style="flex:1" :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>
        <!-- 用来单独渲染学生作答数据，提高tocanvas 的效率 -->
        <iframe id="markIframe" :srcdoc="curAnswer"></iframe>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import MarkCanvas from '@/components/mark/MarkCanvas.vue'
export default {
    name: 'ByStu',
    components: {
        MarkCanvas
    },
    data() {
        return {
            quScoreArr:[],
            score: null,
            mouseStatus: 'move',
            drawImgData: '',
            ansImg: '',
            imgs: [],
            isShowNum: true,
            quIndex: 0,
            stuData: {
                name: '',
                id: '',
            },
            paperData: {
                item: []
            },
            stuAnswer: [],
            stuScore: [],
            taskInfo: {},
            stusData: [],
            stuId: '',
            markImg: undefined,
        }
    },
    methods: {
        //保存批注
        saveMark(data) {
            this.markImg = data.base64
        },
        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 = '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, {}).then((canvas) => {
                    canvas.id = "canvas" + this.quIndex
                    this.ansImg = canvas.toDataURL()
                    // 将转出来的答案绘制到canvas上
                })
            }
        },
        /** 打分 */
        setScore(score) {
            this.score = score
            this.$set(this.stuScore, this.quIndex, score)
        },
        //提交分数
        submit() {
            if (this.score > -1 && this.score != null) {
                //保存批注
                let mark
                if (this.markImg) {
                    let img = document.createElement('img')
                    img.src = this.markImg
                    this.stuAnswer[this.quIndex] = img.outerHTML
                    mark = this.stuAnswer
                    this.markImg = undefined
                }
                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,
                    mark
                }
                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'))
            }
        },
        quit() {
            // 返回页面
            this.$router.push({
                name: 'taskList'
            })
        }
    },
    mounted() {
    },
    created() {
    },
    computed: {
        
    }
}
</script>
<style scoped lang="less">
.view-mark{
    color: white;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 10px;
    cursor: pointer;
    background: #2db7f5;
}
.score-num{
    font-size: 18px;
    color: #ed4014;
    font-weight: 800;
}
.stu-id-info {
    color: black;
    font-size: 16px;
}
.cur-qu-index {
    background: #2db7f5;
    color: white;
    padding: 1px 5px;
    border-radius: 4px;
    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;
}
.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(4) {
    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;
}
.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%;
}
.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;
}
</style>