<template>
    <div>
        <div :id='echartsId' class='myLine'></div>
    </div>
</template>

<script>
    export default {
        name: 'BaseClassBar',
        props: ['echartsId', 'echartsData', 'cIndex'],
        data() {
            return {
                radarData: []
            }
        },

        methods: {
            // 计算数组平均值
            getAverage(arr) {
                return arr.reduce((acc, val) => acc + val, 0) / arr.length
            },
            drawLine(echartsData) {
                let that = this

                let origin = this.echartsData // 拿到传过来的雷达图数据
                let cIndex = this.cIndex // 拿到当前要展示的班级序号
                let radarOpt = {}
                radarOpt.index = []
                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] * 100) // 班级平均
                    radarOpt.gradeAverage.push((this.getAverage(origin.AveragePoint[index]) * 100).toFixed(2)) // 平均值
                    radarOpt.index.push(+origin.ClassCore[cIndex]) // 平均值
                })

                let myLine = this.$echarts.init(
                    document.getElementById(this.echartsId),
                    'chalk'
                )

                myLine.showLoading({
                    text: '',
                    color: '#4cbbff',
                    textColor: '#4cbbff',
                    maskColor: 'rgba(0, 0, 0, 0)'
                })

                // 指定图表的配置项和数据
                var option = {
                    textStyle: {
                        color: 'rgb(222,222,222)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function(params) {
                            let result = params[0].name
                            for (let i = 0; i < params.length; i++) {
                                if (i === params.length - 1) {
                                    result += '<br>' + params[i].marker + params[i].seriesName + '：' + (parseInt(params[i].value))
                                } else {
                                    result += '<br>' + params[i].marker + that.$t('totalAnalysis.ka_table_text6') + params[i].seriesName + '：' + (params[i].value) + '%'
                                }
                            }
                            return result
                        }
                    },
                    grid: {
                        show: false,
                        containLabel: true,
                        height: 240,
                        width: '96%',
                        x2: '2%',
                        tooltip: {
                            show: true,
                            trigger: 'axis', // 触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },
                    legend: {
                        data: [this.$t('totalAnalysis.echarts_text4'), this.$t('totalAnalysis.echarts_text5'), this.$t('totalAnalysis.echarts_text16')],
                        textStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    xAxis: [
                        {
                            data: echartsData.subjectName,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#4e4e4e'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true, // 是否显示
                                inside: false, // 是否朝内
                                rotate: 45, // 旋转角度
                                margin: 15, // 刻度标签与轴线之间的距离
                                color: '#F1F1F1', // 默认取轴线的颜色,
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: this.$t('totalAnalysis.ka_table_text6'),
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {}
                        },
                        {
                            type: 'value',
                            name: this.$t('totalAnalysis.echarts_text16'),
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {}
                        }
                    ],
                    series: [{
                        name: this.$t('totalAnalysis.echarts_text4'),
                        type: 'bar',
                        data: radarOpt.classAverage,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: '#fccb05',
                                barBorderRadius: 12
                            }
                        }
                        }, {
                            name: this.$t('totalAnalysis.echarts_text5'),
                            type: 'bar',
                            data: radarOpt.gradeAverage,
                            barWidth: 20, // 柱图宽度
                            itemStyle: {
                                normal: {
                                    color: '#09bcb7',
                                    barBorderRadius: 11
                                }

                            }
                        }, {
                            name: this.$t('totalAnalysis.echarts_text16'),
                            type: 'line',
                            yAxisIndex: 1,
                            data: radarOpt.index,
                            itemStyle: {
                                normal: {
                                    color: '#F79510',
                                    barBorderRadius: 11
                                }
                            }
                        }]
                }

                setTimeout(() => {
                    // 绘制图表
                    myLine.setOption(option)

                    myLine.hideLoading()
                }, 100)

                window.addEventListener('resize', function() {
                    myLine.resize()
                })
            }
        },
        mounted() {
            document.getElementById(this.echartsId).style.width = '290px'

            if (this.echartsData) this.drawLine(this.echartsData)
        },
        watch: {
            echartsData(val) {
                if (!val) return
                console.log(val)

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

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
    .myLine {
        width: 100%;
        height: 300px;
        margin: 50px auto 10px auto;
        display: block;
    }
</style>
