<template>
    <div>
        <div v-for="(item,index) in quNoList" :key="index" v-show="!item.disabled" class="qu-info-item">
            <span :class="['qu-index', objectiveQu.includes(item.type) ? 'obj-index' : 'other-index']">
                {{item.label}}
            </span>
            <div class="progress-wrap">
                <Progress :percent="byQuPct[index]" />
                <p>
                    <span style="margin-right:10px">
                        {{$t('task.mLabel2')}}:{{byQuCount[index]}}
                    </span>
                    <span>
                        {{$t('task.mLabel3')}}:{{total - byQuCount[index]}}
                    </span>
                </p>
            </div>
            <div class="to-mark">
                <Button type="primary" shape="circle" :disabled="objectiveQu.includes(item.type)" size="small" style="width:120px" @click="setQuIndex(index)">
                    {{$t('task.mark')}}
                </Button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 试卷
        paperData: {
            type: Object,
            default: () => {
                return {
                    item: []
                }
            },
            required: true
        },
        // 当前学生数据
        stusData: {
            type: Array,
            default: () => {
                return []
            },
            required: true
        },
        //任务量，总数
        total: {
            type: Number,
            default: 1,
            required: true
        },
        //批阅题目
        qus: {
            type: Array,
            default: () => {
                return []
            },
            required: true
        }
    },
    data() {
        return {
            objectiveQu: ['single', 'multiple', 'judge'],
        }
    },
    methods: {
        setQuIndex(index) {
            this.$emit('getQuIndex', index)
        }
    },
    computed: {
        //试卷题目数量，包括小题
        quLength() {
            if (this.paperData && this.paperData.item) {
                let count = 0
                this.paperData.item.forEach(item => {
                    if (item.children.length) {
                        count += item.children.length
                    } else {
                        count++
                    }
                })
                return count
            }
            return 0
        },
        //题目进度百分比
        byQuPct() {
            let total = this.total || 1
            let data = this.byQuCount.map(item => {
                return parseFloat((item * 100 / total).toFixed(2))
            })
            return data
        },
        //题目进度count
        byQuCount() {
            let res = new Array(this.quLength).fill(0)
            if (this.stusData) {
                if (this.qus.length) {
                    //只处理需要批阅的题目数据
                    for (let index of this.qus) {
                        this.stusData.forEach(item => {
                            if (item.item[index].sc > -1) {
                                res[index]++
                            }
                        })
                    }
                } else {
                    // 需要处理所有题目数据
                    for (let i = 0; i < this.quLength; i++) {
                        this.stusData.forEach(item => {
                            if (item.item[i].sc > -1) {
                                res[i]++
                            }
                        })
                    }
                }
            }
            return res
        },
        //试卷题号列表
        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) => {
                            data.push({
                                label: (index + 1) + '-' + (childIndex + 1),
                                value: realIndex,
                                disabled: objectiveQu.includes(childItem.type) || (this.qus.length && !this.qus.includes(realIndex)),
                                type: childItem.type
                            })
                            realIndex++
                        })
                    } else {
                        data.push({
                            label: index + 1,
                            value: realIndex,
                            disabled: objectiveQu.includes(item.type) || (this.qus.length && !this.qus.includes(realIndex)),
                            type: item.type
                        })
                        realIndex++
                    }
                })
                return data
            }
            return []
        }
    }
}
</script>
<style scoped lang="less">
.qu-info-item {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0px;
    border-bottom: 1px solid var(--border-color);
    .qu-index {
        display: block;
        width: 80px;
        color: var(--second-text-color);
        font-size: 20px;
        font-weight: 600;
    }
    .to-mark {
        width: 120px;
        text-align: center;
    }
    .progress-wrap {
        width: 380px;
    }
}
.obj-index {
    color: #606060;
}
.other-index {
    color: white;
}
</style>