<template>
    <div>
        <div v-for="(item,index) in paperData.item" :key="index">
            <!-- 综合题 -->
            <div v-if="item.children.length">
                <div class="qu-info-item" v-for="(childItem,childIndex) in item.children" :key="childIndex">
                    <span :class="['qu-index', objectiveQu.includes(childItem.type) ? 'obj-index' : 'other-index']">
                        {{`${index + 1}-${childIndex + 1}`}}
                    </span>
                    <div class="progress-wrap">
                        <Progress :percent="objectiveQu.includes(childItem.type) ? 100 : byQuPct[getScoreIndex(index,childIndex)]" />
                        <!-- <Progress :percent="byQuPct[getScoreIndex(index,childIndex)]" /> -->
                        <p v-if="objectiveQu.includes(childItem.type)" class="prog-tips" style="color: #19be6b">
                            客观题已由系统自动完成评分。
                        </p>
                        <p v-else class="prog-tips">
                            <span style="margin-right:10px">
                                {{$t('task.mLabel2')}}:{{byQuCount[getScoreIndex(index,childIndex)]}}
                            </span>
                            <span>
                                {{$t('task.mLabel3')}}:{{total - byQuCount[getScoreIndex(index,childIndex)]}}
                            </span>
                        </p>
                    </div>
                    <div class="to-mark">
                        <Button type="primary" shape="circle" :disabled="objectiveQu.includes(childItem.type)" size="small" style="width:120px" @click="setQuIndex(index, childIndex)">
                            {{$t('task.mark')}}
                        </Button>
                    </div>
                </div>
            </div>
            <!-- 其他题 -->
            <div v-else class="qu-info-item">
                <span :class="['qu-index', objectiveQu.includes(item.type) ? 'obj-index' : 'other-index']">
                    {{index + 1}}
                </span>
                <div class="progress-wrap">
                    <Progress :percent="objectiveQu.includes(item.type) ? 100 : byQuPct[getScoreIndex(index)]" />
                    <!-- <Progress :percent="byQuPct[getScoreIndex(index)]" /> -->
                    <p v-if="objectiveQu.includes(item.type)" class="prog-tips" style="color: #19be6b">
                        客观题已由系统自动完成评分。
                    </p>
                    <p v-else>
                        <span style="margin-right:10px">
                            {{$t('task.mLabel2')}}:{{byQuCount[getScoreIndex(index,-1)]}}
                        </span>
                        <span>
                            {{$t('task.mLabel3')}}:{{total - byQuCount[getScoreIndex(index,-1)]}}
                        </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, -1)">
                        {{$t('task.mark')}}
                    </Button>
                </div>
            </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
        }
    },
    data() {
        return {
            objectiveQu: ['single', 'multiple', 'judge'],
        }
    },
    methods: {
        /**
         * index 题目index 必传
         * childIndex 小题index 非必传 
         */
        getScoreIndex(index, childIndex) {
            let realIndex = 0
            this.paperData.item.forEach((item, itemIndex) => {
                if (itemIndex <= index) {
                    //综合题
                    if (item.children.length) {
                        item.children.forEach((childItem, cIndex) => {
                            if (itemIndex < index) {
                                realIndex++
                            } else if (cIndex <= childIndex) {
                                realIndex++
                            }
                        })
                    }
                    else {
                        realIndex++
                    }
                }
            })
            return --realIndex
        },
        setQuIndex(quIndex, childIndex) {
            this.$emit('getQuIndex', { quIndex, childIndex })
        }
    },
    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
            return this.byQuCount.map(item => {
                return item * 100 / total
            })
        },
        //题目进度count
        byQuCount() {
            let res = new Array(this.quLength).fill(0)
            if (this.stusData) {
                for (let i = 0; i < this.quLength; i++) {
                    this.stusData.forEach(item => {
                        if (item.info.score[i] > -1) {
                            res[i]++
                        }
                    })
                }

            }
            return res
        },
    }
}
</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 #424242;
    .qu-index {
        display: block;
        width: 80px;
        // text-align: center;
        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>