<template>
    <div class="arb-container">
        <div class="arb-header tab-box">
            <span :class="curBarIndex == 1 ? 'bar-item active pane':'bar-item pane'" @click="selectBar(1)">
                未处理
            </span>
            <span :class="curBarIndex == 0 ? 'bar-item active pane':'bar-item pane'" @click="selectBar(0)">
                已处理
            </span>
        </div>
        <div class="arb-content">
            <vuescroll>
                <div class="arb-paper-item" v-for="(item,index) in errListShow" :key="index">
                    <p class="qu-info-wrap">
                        <span class="qu-info-label">题目：</span>
                        <span class="qu-info-value">{{item.quNo + 1}}</span>
                    </p>
                    <div style="flex:1">
                        <p>
                            <span class="score-info-label">原因：</span>
                            <span class="score-info-value">{{item.err}}</span>
                            <!-- <span class="score-info-label">
                                <Icon type="md-time" />
                                2021-09-01
                            </span> -->
                        </p>
                        <span>{{item.stuId}}</span>
                    </div>
                    <div style="width:100px">
                        <Button :type="item.improve ? 'success' : 'primary'" shape="circle" size="small" long @click="handleErr(index,item)">
                            {{item.improve ? '已处理' : '处理'}}
                        </Button>
                    </div>
                </div>
                <EmptyData v-if="!errListShow.length" textContent="暂无异常申报" :top="150"></EmptyData>
            </vuescroll>
        </div>
        <Modal v-model="errStatus" title="异常处理" @on-ok="feedback" width="1000" :loading="loading">
            <div class="err-info-item" style="margin-top:10px">
                <p>
                    <span class="err-info-label">学生答案：</span>
                </p>
                <div>
                    <img width="300" src="@/assets/image/school_plan.jpg">
                    <span class="view-origin-paper">
                        查看原卷
                    </span>
                </div>
            </div>
            <div class="err-info-item">
                <p class="err-info-label">异常描述：</p>
                <p v-if="errListShow[handleIndex]">{{errListShow[handleIndex].err}}</p>
            </div>
            <div class="err-info-item">
                <p>
                    <span class="err-info-label">反馈建议：</span>
                </p>
                <Input v-model="advice" maxlength="50" show-word-limit type="textarea" placeholder="反馈建议..." style="width: 800px" />
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    props: {
        taskInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            loading: true,
            handleIndex: 0,
            advice: '',
            curBarIndex: 1,
            errStatus: false,
            errList: [],
            errListShow:[]
        }
    },
    methods: {
        //异常处理老师查看所有申报的异常试卷
        findErrData() {
            let requestData = {
                code: this.taskInfo.ecode.replace('Exam-', ''),
                id: this.taskInfo.cid,
                subjectId: this.taskInfo.subject,
            }
            this.$api.mark.findErr(requestData).then(
                async res => {
                    if (!res.error && res.errs) {
                        this.errList = []
                        res.errs.forEach(sItem => {
                            sItem.qs.forEach(eItem => {
                                this.errList.push({
                                    stuId: sItem.stuId,
                                    quNo: eItem.index,
                                    err: eItem.err,
                                    improve: eItem.improve,
                                    id: sItem.id
                                })
                            })
                        })
                        this.selectBar(1)
                    }
                },
                err => {
                    this.$Message.error('API error')
                }
            )
        },
        //反馈建议
        feedback() {
            if (this.advice) {
                let requestData = {
                    id: this.errListShow[this.handleIndex].id,
                    code: this.taskInfo.ecode.replace('Exam-', ''),
                    improve: this.advice,
                    index: this.errListShow[this.handleIndex].quNo
                }
                this.$api.mark.feedbackErr(requestData).then(
                    async res => {
                        this.$Message.success('处理成功')
                        this.errStatus = false
                        let errInfo = this.errListShow.find(item=>{
                            return item.id == this.errListShow[this.handleIndex].id
                        })
                        errInfo.improve = this.advice
                    },
                    err => {
                        this.$Message.error('API error')
                    }
                )
            } else {
                this.$Message.warning('请输入反馈建议')
                this.loading = false
                setTimeout(()=>{
                    this.loading = true
                })
            }
        },
        handleErr(index, data) {
            this.handleIndex = index
            this.errStatus = true
            this.advice = data.improve
        },
        selectBar(index) {
            this.curBarIndex = index
            if(index == 1){
                this.errListShow = this.errList.filter(item=>{
                    return !item.improve
                })
            }else{
                this.errListShow = this.errList.filter(item=>{
                    return item.improve
                })
            }
        }
    },
    watch: {
        taskInfo: {
            handler(n, o) {
                if (this.taskInfo && this.taskInfo.id) {
                    this.findErrData()
                }
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style scoped lang="less">
.err-info-label {
    color: #a5a5a5;
}
.view-origin-paper {
    color: #2db7f5;
    cursor: pointer;
    user-select: none;
    text-decoration: underline;
    // display: block;
    text-align: right;
}
.err-info-item {
    display: flex;
    margin-top: 30px;
}
.score-tips {
    float: right;
    margin-right: 30px;
    cursor: pointer;
}
.qu-info-wrap {
    width: 150px;
    margin-left: 20px;
    // text-align: center;
}
.score-info-label {
    color: #a5a5a5;
    font-size: 14px;
}
.score-info-value {
    color: white;
    font-size: 16px;
    margin-right: 30px;
}
.qu-info-label {
    color: white;
    font-size: 12px;
}
.qu-info-value {
    color: white;
    font-size: 20px;
    margin-right: 30px;
}
.arb-container {
    width: 100%;
    height: 100%;
    padding-left: 10px;
}
.arb-header {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid var(--border-color);
    .bar-item {
        // display: inline-block;
        cursor: pointer;
    }
}
.arb-content {
    width: 100%;
    height: ~"calc(100% - 45px)";
}
.arb-paper-item {
    width: ~"calc(100% - 15px)";
    margin: 6px 0px;
    border: 1px solid #363636;
    background: #2b2a2f;
    padding: 15px;
    display: flex;
    align-items: center;
    border-radius: 0px;
}
</style>