<template>
    <div class="radar-box" id="radarBox">
        <div :id='echartsId' class='myRadar'></div>
    </div>
</template>

<script>
    export default {
        name: 'BaseClassRadar',
        props: ['echartsId', 'boxWidth', 'echartsData', 'cIndex'],
        data() {
            return {
                radarData: []
            }
        },
        created() {
            // this.drawLine()
        },
        methods: {
            // 计算数组平均值
            getAverage(arr) {
                return arr.reduce((acc, val) => acc + val, 0) / arr.length
            },
            drawLine(radarOpt) {
                let that = this
                let myRadar = this.$echarts.init(
                    document.getElementById(this.echartsId),
                    'chalk'
                )

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: radarOpt.index,
                        subtext: '成就指数',
                        left: 'center',
                        top: '45.3%',
                        textStyle: {
                            color: '#F4F8FA',
                            fontWeight: 'bold',
                            fontSize: 34
                        },
                        subtextStyle: {
                            color: '#E7EBEC',
                            fontWeight: 'normal',
                            fontSize: 12,
                            lineHeight: 8
                        }
                    },
                    tooltip: {
                        formatter: function(params) {
                            let result = '得分率' + params.name
                            let subjectList = that.echartsData.subjectName
                            for (let i = 0; i < subjectList.length; i++) {
                                result += '<br>' + params.marker + subjectList[i] + '：' + (params.value[i] * 100).toFixed(2) + '%'
                            }
                            return result
                        }
                    },
                    legend: {
                        bottom: 20,
                        data: [this.$t('totalAnalysis.echarts_text4'), this.$t('totalAnalysis.echarts_text5')],
                        textStyle: {
                            color: '#fff',
                            padding: [2, 0, 0, 0]
                        }
                    },
                    radar: {
                        radius: '60%',
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                opacity: 0.2
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#fff',
                                opacity: 0.2
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: 'rgba(255,255,255,.3)',
                                opacity: 1,
                                shadowBlur: 45,
                                shadowColor: 'rgba(0,0,0,.5)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 15
                            }
                        },
                        indicator: radarOpt.indicator
                    },
                    series: [
                        {
                            name: '高一年级',
                            type: 'radar',
                            symbolSize: 0,
                            areaStyle: {
                                normal: {
                                    shadowBlur: 13,
                                    shadowColor: 'rgba(0,0,0,.2)',
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 10,
                                    opacity: 0.4
                                }
                            },
                            data: [
                                {
                                    value: radarOpt.classAverage,
                                    name: this.$t('totalAnalysis.echarts_text4')
                                },
                                {
                                    value: radarOpt.gradeAverage,
                                    name: this.$t('totalAnalysis.echarts_text5')
                                }
                            ]
                        }
                    ],
                    color: ['#7db41b', '#b1eadb']
                }

                // 绘制图表
                myRadar.setOption(option)
                myRadar.resize()

                window.addEventListener('resize', function() {
                    myRadar.resize()
                })
                // console.log(document.getElementById(this.echartsId).style)
            }

        },
        mounted() {
            // this.drawLine()
            this.$nextTick(function() {
                document.getElementById(this.echartsId).style.width = this.boxWidth + 'px'

                let origin = this.echartsData // 拿到传过来的雷达图数据
                let cIndex = this.cIndex // 拿到当前要展示的班级序号
                let radarOpt = {}
                radarOpt.index = parseInt(origin.ClassCore[cIndex])
                radarOpt.indicator = []
                radarOpt.classAverage = []
                radarOpt.gradeAverage = []
                origin.subjectName.forEach((item, index) => {
                    radarOpt.indicator.push({ name: item, max: 1 }) // 雷达图顶点
                    radarOpt.classAverage.push(origin.AveragePoint[index][cIndex]) // 班级平均
                    radarOpt.gradeAverage.push(this.getAverage(origin.AveragePoint[index]).toFixed(2)) // 平均值
                })

                this.drawLine(radarOpt)
            })
        }
    }
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
    .radar-box {
        width:100%;
    }
    .myRadar {
        width: 100%;
        height: 380px;
        margin: 0 auto;
        display: block;
    }
</style>
