<template>
    <div>
        <div class="overview-box" v-if="examInfo.progress == 'finish'">
            <!-- 总人数 -->
            <div class="count-box">
                <span class="count-subject-num">{{examInfo.stuCount}}</span>
                <span class="count-subject-text">
                    <Icon type="ios-people" class="count-icon" />
                    {{$t('learnActivity.simple.totalPeople')}}
                </span>
            </div>
            <!-- 缺考数 -->
            <div class="count-box">
                <span class="count-subject-num">{{examInfo.lostStu ? examInfo.lostStu.length : 0}}</span>
                <span class="count-subject-text">
                    <Icon type="ios-paper" class="count-icon" />
                    {{$t('learnActivity.simple.missExam')}}
                </span>
            </div>
            <!-- 班级数 -->
            <div class="count-box">
                <span class="count-subject-num">{{examInfo.classes.length}}</span>
                <span class="count-subject-text">
                    <Icon custom="iconfont icon-class-self" class="count-icon" />
                    {{$t('learnActivity.simple.classLabel')}}
                </span>
            </div>
            <!-- 学科数 -->
            <div class="count-box">
                <span class="count-subject-num">{{examInfo.subjects.length}}</span>
                <span class="count-subject-text">
                    <Icon custom="iconfont icon-course-self" class="count-icon" />
                    {{$t('learnActivity.simple.sjLabel')}}
                </span>
            </div>
            <!-- 平均分 -->
            <div class="count-box">
                <span class="count-subject-num">{{avgScore}}</span>
                <span class="count-subject-text">
                    <Icon type="md-analytics" class="count-icon" size="14" />
                    {{$t('learnActivity.simple.avgScore')}}
                </span>
            </div>
        </div>
        <div class="overview-box" style="justify-content: space-around;padding-top:40px" v-if="examInfo.progress == 'finish'">
            <ScoreMatrix :pieData="scoreSegment"></ScoreMatrix>
            <AvgCompare :pieData="simpleData.averageMap"></AvgCompare>
        </div>
        <div class="overview-box" v-if="examInfo.progress == 'going'" style="margin-bottom:30px;">
            <!-- 班级人数 -->
            <div class="count-box">
                <span class="count-subject-num">{{overviewInfo.total}}</span>
                <span class="count-subject-text">
                    <Icon type="ios-people" class="count-icon" />
                    {{$t('learnActivity.simple.classStuCount')}}
                </span>
            </div>
            <!-- 已作答人数 -->
            <div class="count-box" style="color:#2db7f5">
                <span class="count-subject-num">{{overviewInfo.answered}}</span>
                <span class="count-subject-text">
                    <Icon type="md-checkmark-circle" class="count-icon" />
                    {{$t('learnActivity.simple.answered')}}
                </span>
            </div>
            <!-- 未作答人数 -->
            <div class="count-box" style="color:#ed4014">
                <span class="count-subject-num">{{overviewInfo.noAnswer}}</span>
                <span class="count-subject-text">
                    <Icon type="md-remove-circle" class="count-icon" />
                    {{$t('learnActivity.simple.unanswer')}}
                </span>
            </div>
            <!-- 已评分人数 -->
            <div class="count-box" style="color:#19be6b">
                <span class="count-subject-num">{{overviewInfo.scored}}</span>
                <span class="count-subject-text">
                    <Icon type="md-star" class="count-icon" />
                    {{$t('learnActivity.simple.scored')}}
                </span>
            </div>
            <!-- 未评分人数 -->
            <div class="count-box" style="color:#ff9900">
                <span class="count-subject-num">{{overviewInfo.noScore}}</span>
                <span class="count-subject-text">
                    <Icon type="ios-star-outline" class="count-icon" />
                    {{$t('learnActivity.simple.unscore')}}
                </span>
            </div>
        </div>
        <div class="overview-box" v-if="examInfo.progress == 'pending'" style="margin-bottom:30px;">
            <p class="pending-text">{{$t('learnActivity.simple.noPublish')}}</p>
        </div>
        <div v-show="calculating">
            <p style="text-align: center;color: white;margin: 20px 0px;">
                {{$t('learnActivity.simple.calcing')}}
                <span style="text-decoration: underline;color: #1cc0f3;cursor: pointer;" @click="reload()">
                    {{$t('learnActivity.simple.clickFresh')}}
                </span>
            </p>
        </div>
    </div>
</template>
<script>
import ScoreMatrix from './echarts/ScoreMatrix.vue'
import AvgCompare from './echarts/AvgCompare.vue'
export default {
    components: {
        AvgCompare,
        ScoreMatrix
    },
    inject: ['reload'],
    props: {
        examInfo: {
            default: () => {
                return {
                    subjects: [],
                    classes: []
                }
            },
            type: Object
        },
        overviewInfo: {
            type: Object,
            default: () => {
                return {
                    total: 0,
                    answered: 0,
                    noAnswer: 0,
                    scored: 0,
                    noScore: 0
                }
            }
        }
    },
    data() {
        return {
            simpleData: {},
            allData: {},
            calculating: false
        }
    },
    methods: {
        //获取已结束评测简要数据分析
        findSimpleAna() {
            let requestData = {
                id: this.examInfo.id,
                code: this.examInfo.code.replace('Exam-', '')
            }
            this.$api.learnActivity.simpleAna(requestData).then(
                res => {
                    if (!res.error) {
                        if (res.averageMap.length && res.averageMap.length) {
                            this.calculating = false
                            for (let i in res.averageMap) {
                                for (let j in res.averageMap[i].ClassAverage) {
                                    res.averageMap[i].ClassAverage[j] = parseFloat(res.averageMap[i].ClassAverage[j].toFixed(2))
                                }
                                let subject = this.examInfo.papers.find(item => {
                                    return item.subjectId == res.averageMap[i].subjectId
                                })
                                if (subject) {
                                    res.averageMap[i].subjectId = subject.subjectName
                                }
                            }
                            this.allData[this.examInfo.id] = res
                            this.simpleData = res
                        } else {
                            this.calculating = true
                            this.$Message.error(this.$t('learnActivity.simple.inCalc'))
                        }

                    } else {
                        this.$Message.error('API ERROR!')
                    }
                },
                err => {
                    this.$Message.error('API ERROR!')
                }
            ).finally(() => {
                this.isLoading = false;
            })
        },
    },
    watch: {
        examInfo: {
            handler() {
                if (this.examInfo.progress == 'finish') {
                    if (this.allData[this.examInfo.id]) {
                        this.simpleData = this.allData[this.examInfo.id]
                    } else {
                        this.findSimpleAna()
                    }
                }
            },
            deep: true
        }
    },
    computed: {
        examScore() {
            if (this.examInfo && this.examInfo.score) {
                return this.examInfo.score
            } else {
                return 0
            }
        },
        avgScore() {
            if (this.simpleData && this.simpleData.averageMap) {
                let avg = 0
                this.simpleData.averageMap.forEach(item => {
                    let total = item.ClassAverage.reduce((total, num) => {
                        return total + num
                    }, 0)
                    let sAvg = total / item.ClassAverage.length
                    avg += sAvg
                })
                return avg.toFixed(2)
            } else {
                return '--'
            }
        },
        stuTotalScores() {
            if (this.simpleData && this.simpleData.averageTotal) {
                let total = []
                this.simpleData.averageTotal.forEach((subItem, i) => {
                    subItem.total.forEach((sItem, j) => {
                        if (!total[j]) total[j] = 0
                        total[j] += sItem
                    })
                })
                return total
            } else {
                return []
            }
        },
        scoreSegment() {
            if (this.stuTotalScores.length) {
                let segment = []
                let unit = this.examScore / 10
                console.log('unit', unit)
                for (let i = 0; i < 10; i++) {
                    let startScore = unit * i
                    let endScore = unit * (i + 1)
                    let s = this.stuTotalScores.filter(item => {
                        return item >= startScore && item < endScore
                    })
                    segment.push({
                        name: `${startScore}-${endScore}`,
                        value: s.length
                    })
                }
                return segment
            } else {
                return []
            }

        }
    }
}
</script>
<style lang="less" scoped>
.overview-box {
    width: 100%;
    flex-wrap: wrap;
    padding: 10px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
    // background: #404040;
    .count-box {
        min-width: 150px;
        width: 16%;
        height: fit-content;
        text-align: center;
        background-color: #00b2c1;
        background-image: linear-gradient(120deg, #00b2c1 0%, #54adff 100%);
        border-radius: 5px;
        padding: 15px 0px;
        color: white !important;
        .count-icon {
            font-size: 18px;
            margin-right: 5px;
            // vertical-align: sub;
        }
        .count-subject-text {
            display: block;
            font-size: 12px;
        }
        .count-subject-num {
            display: block;
            font-size: 30px;
            font-weight: 800;
        }
    }
}
.finish-count-box {
    .count-box {
        margin-bottom: 10px;
    }
}
.pending-text {
    color: #eee;
    font-size: 16px;
    padding-top: 15px;
    width: 100%;
    text-align: center;
}
</style>