<template>
    <div id="ev-avg-compare"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        pieData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            progressPie: undefined,
            defaultSeries: {
                name: this.$t('learnActivity.simple.total'),
                type: 'line',
                itemStyle: {
                    color: '#11C2EE',
                    width: 2
                },
                symbol: 'none',
                lineStyle: {
                    type: 'dashed',
                    width: 0
                },
                markLine: {
                    data: [
                        { type: 'average' }
                    ],
                    lineStyle: {
                        color: '#11C2EE',
                        type: 'dashed',
                        width: 2
                    }
                },
                data: []
            },
            defOption: {
                color: [
                    "#4ECDC4",
                    "#F72459",
                    "#F99406",
                    "#075CD0",
                    "#03C9A8",
                    "#F7CA17",
                    "#F2774B",
                    "#67809F",
                    "#BF55ED",
                    "#1cc0f3",
                    "#19be6b",
                    "#9A1294",
                ],
                legend: {
                    right: 5,
                    data: []
                },
                title: {
                    "text": this.$t('learnActivity.simple.avgScore'),
                    "left": 0,
                    "top": 0,
                    "textStyle": {
                        "color": "#FFF",
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '30px',
                    right: '00px',
                    bottom: '3px',
                    containLabel: false
                },
                xAxis: {
                    show:true,
                    type: 'category',
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: "#FFF"
                        }
                    },
                    axisLabel: {
                        rotate: 40
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#AAA"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#505050']
                        }
                    }
                },
                series: []
            },
            newOption:{}
        }
    },
    mounted() {
        this.progressPie = this.$echarts.init(document.getElementById('ev-avg-compare'))
        // this.progressPie.setOption(this.newOption,true)
        let erd11 = elementResizeDetectorMaker()
        erd11.listenTo(document.getElementById("ev-avg-compare"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.progressPie.resize()
            })
        })
        this.progressPie.on('legendselectchanged', (params) => {
            let active = this.newOption.series.filter(item => {
                if (params.selected[item.name]) {
                    return true
                } else {
                    return false
                }
            })
            let score = []
            active.forEach((item) => {
                item.data.forEach((scoreItem, index) => {
                    if (!score[index]) score[index] = 0
                    score[index] += scoreItem
                })
            })
            let len = this.newOption.series.length
            this.newOption.series[len - 1].data = score
            this.progressPie.setOption(this.newOption)
        });
    },
    watch: {
        pieData: {
            handler(n, o) {
                this.$nextTick(() => {
                    this.newOption = this._.cloneDeep(this.defOption)
                    if (!this.progressPie) {
                        this.progressPie = this.$echarts.init(document.getElementById('ev-avg-compare'))
                    }
                    //处理
                    this.pieData.forEach(item => {
                        this.newOption.legend.data.push({
                            name: item.subjectId, //不显示班级名称
                            textStyle: {
                                color: '#FFF'
                            }
                        })
                    })
                    if (this.pieData.length) {
                        this.newOption.xAxis.data = this.pieData[0].className.map(item => {
                            return item.name //不显示班级名称
                            // return ''
                        })
                    }

                    // this.option.series = []
                    this.defaultSeries.data = []

                    if (this.pieData.length) {
                        let subCount = this.pieData.length
                        let classCount = this.pieData[0].ClassAverage.length
                        for (let i = 0; i < classCount; i++) {
                            for (let j = 0; j < subCount; j++) {
                                if (!this.defaultSeries.data[i]) this.defaultSeries.data[i] = 0
                                this.defaultSeries.data[i] += this.pieData[j].ClassAverage[i]
                            }
                        }

                    }
                    this.pieData.forEach(item => {
                        this.newOption.series.push(
                            {
                                name: item.subjectId,
                                type: 'bar',
                                stack: this.$t('learnActivity.simple.totalLabel'),
                                barMaxWidth: 30,
                                data: item.ClassAverage
                            }
                        )
                    })
                    this.newOption.series.push(this.defaultSeries)
                    this.progressPie.setOption(this.newOption, true)
                })
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style scoped lang="less">
#ev-avg-compare {
    width: 400px;
    height: 260px;
}
</style>
<style>
</style>