<template>
    <div id="myBar"></div>
</template>

<script>
    export default {
        name: 'hello',
		props:{
			echartsData:{
				type:Array,
				default:() => []
			},
			subjectIndex:{
				type:Number,
				default:NaN
			}
		},
        data() {
            return {
                subjectList: [],
                subjectSeries: [],
                subjectColors: ['#db615e', '#db8dd2', '#42beda', '#1EB58D', '#99ccff', '#dbaf4f'],
                lineData: 440,
                areaData: 490.5,
				curSubjectIndex:NaN
            }
        },

        methods: {
            // 处理动态配置文件
            handleOptions(val) {
                let subjectList = val.datas
				this.subjectSeries = []

                // 配置 柱状图的 Series 根据科目 配置
                subjectList.forEach((item, index) => {
                    let seriesItem = {
                        name: item.name,
                        type: 'bar',
                        stack: subjectList[0].name,
                        legendHoverLink: true,
                        itemStyle: {
                            color: this.subjectColors[index],
                            width: 10
                        },
						barMaxWidth:40,
                        data: item.score
                    }
                    this.subjectSeries.push(seriesItem)
                })

                // 配置学校校级平均分折线图Series
                let schoolLine = {
                    name: this.$t('totalAnalysis.ach_text5'),
                    type: 'line',
                    itemStyle: {
                        color: '#66ff99',
                        width: 2
                    },
                    symbol: 'none',
                    lineStyle: {
                        type: 'dashed',
                        width: 0
                    },
                    markLine: {
                        data: [
                            { type: 'average' }
                        ],
                        lineStyle: {
                            color: '#66ff99',
                            type: 'dashed',
                            width: 2
                        }
                    }, // 平均分为各科平均分总和
                    data: [...Array(val.classList.length)].map(() => val.subjectAverage.map(item => Number(item)).reduce(function(pre, cur) { return pre + cur }).toFixed(2))
                }

                // 配置区级平均分折线图Series
                let areaLine = {
                    name: this.$t('totalAnalysis.ach_text6'),
                    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: [...Array(val.classList.length)].map(() => 190)
                }

                this.subjectSeries.push(schoolLine)
                this.subjectSeries.push(areaLine)

                this.drawLine(val)
            },

            // 执行图表渲染工作
            drawLine(data) {
				console.log('BaseBar',this.subjectSeries)
                // 基于准备好的dom，初始化echarts实例
                let myBar = this.$echarts.init(document.getElementById('myBar'))
                let that = this
                // 指定图表的配置项和数据
                var option = {
                    legend: {
                        // data: data.datas.map(item => item.name).concat([this.$t('totalAnalysis.ach_text5'), this.$t('totalAnalysis.ach_text6')]),
                        data: this.subjectSeries.map(item => item.name).concat([this.$t('totalAnalysis.ach_text5'), this.$t('totalAnalysis.ach_text6')]),
                        textStyle: {
                            color: '#e4eadb'
                        }
                    },
                    // ---  提示框 ----
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: 'axis', // 数据项图形触发
                        axisPointer: {
                            type: 'shadow',
                            axis: 'auto',
                            shadowStyle: {
                                color: 'rgba(128,128,128,0.1)'
                            }
                        },
                        padding: 5,
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function(value) {
                            let arr = value[0].name + '<br>'
                            let sum = 0
                             for (var i = 0; i < value.length; i++) {
                                var datalist = value[i].marker + value[i].seriesName + ' : ' + value[i].data.toFixed(2) + '<br>'
                                // if (i === value.length - 1 || i === value.length - 2) {
                                //     sum += 0
                                // } else {
                                //     sum += Number(value[i].data)
                                // }
								sum += Number(value[i].data)
                                arr += datalist
                            };
                            return arr + value[value.length - 1].marker + that.$t('totalAnalysis.ach_text4') + '：' + sum.toFixed(2)
                        }

                    },
                    grid: {
                        show: false,
                        containLabel: true,
                        height: 300,
                        width: '75%',
						right:'18%',
                        tooltip: {
                            show: true,
                            trigger: 'axis', // 触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },
                    dataZoom: [{
                        'show': true,
                        'height': 10,
                        'xAxisIndex': [
                            0
                        ],
                        bottom: 10,
                        'start': 0,
                        'end': 100,
                        handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
                        handleSize: '160%',
                        handleStyle: {
                            color: '#d3dee5'

                        },
                        textStyle: {
                            color: '#fff'
                        },
                        borderColor: '#90979c',
                        borderRadius: '5px'
                    }, {
                        'type': 'inside',
                        'show': true,
                        'height': 15,
                        'start': 0,
                        'end': 100
                    }],
                    xAxis: {
                        show: true, // 是否显示
                        position: 'bottom', // x轴的位置
                        type: 'category', // 轴类型， 默认为 'category'
                        name: '月份', // 轴名称
                        nameLocation: 'end', // 轴名称相对位置
                        nameTextStyle: {
                            color: 'transparent',
                            padding: [5, 0, 10, -5]
                        },
                        nameGap: 35, // 坐标轴名称与轴线之间的距离
                        nameRotate: 0, // 坐标轴名字旋转
                        axisLine: {
                            show: false, // 是否显示
                            symbol: ['none', 'arrow'], // 是否显示轴线箭头
                            symbolSize: [8, 8], // 箭头大小
                            symbolOffset: [0, 7], // 箭头位置
                            lineStyle: {
                                color: '#6aabef',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            // 坐标轴 刻度
                            show: false, // 是否显示
                            inside: true, // 是否朝内
                            length: 3, // 长度
                            lineStyle: {
                                // 默认取轴线的样式
                                color: '#989898',
                                width: 2,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            // 坐标轴标签
                            show: true, // 是否显示
                            inside: false, // 是否朝内
                            rotate: 45, // 旋转角度
                            margin: 15, // 刻度标签与轴线之间的距离
                            color: '#989898', // 默认取轴线的颜色,
                            fontSize: 14,
                            fontFamily: 'Microsoft YaHei'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#4c504a'
                            }
                        },
                        splitArea: {
                            show: false // 是否显示，默认为false
                        },
                        data: data.classes.map(i => i.className)
                    },
                    yAxis: {
                        show: true, // 是否显示
                        position: 'left', // y轴位置
                        offset: 0, // y轴相对于默认位置的偏移
                        type: 'value', // 轴类型，默认为 ‘category’
                        nameLocation: 'end', // 轴名称相对位置value
                        nameTextStyle: {
                            color: '#fff',
                            padding: [5, 0, 0, 5] // 坐标轴名称相对位置
                        },
                        nameGap: 15, // 坐标轴名称与轴线之间的距离
                        nameRotate: 270, // 坐标轴名字旋转

                        axisLine: {
                            show: false, // 是否显示
                            symbol: ['none', 'arrow'], // 是否显示轴线箭头
                            symbolSize: [8, 8], // 箭头大小
                            symbolOffset: [0, 7], // 箭头位置
                            lineStyle: {
                                color: '#6aabef',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            show: false, // 是否显示
                            inside: true, // 是否朝内
                            length: 3, // 长度
                            lineStyle: {
                                color: '#989898', // 默认取轴线的颜色
                                width: 2,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true, // 是否显示
                            inside: false, // 是否朝内
                            rotate: 0, // 旋转角度
                            margin: 8, // 刻度标签与轴线之间的距离
                            color: '#989898', // 默认轴线的颜色
                            fontSize: 12,
                            fontFamily: 'Microsoft YaHei'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#4c504a',
                                width: 0.5,
                                type: 'solid'
                            }
                        }
                    },
                    series: this.subjectSeries
                }

                // 绘制图表
				myBar.clear()
                myBar.setOption(option)
                window.addEventListener('resize', function() {
                    myBar.resize()
                })

                // 通过hook监听组件销毁钩子函数，并取消监听事件
                that.$once('hook:beforeDestroy', () => {
                    window.removeEventListener('resize', () => { console.log('监听销毁') })
                })


                // 渲染完成事件
                myBar.on('finished', function() {
                    // console.log("Render Finish!!!")
                })

                // 点击图例 根据展示的科目来计算最新的 校级和区级平均总和
                myBar.on('legendselectchanged', function(obj) {
                    var selected = obj.selected
                    let arr = []
                    for (let i in selected) {
                        let o = {}
                        o[i] = selected[i]
                        arr.push(o)
                    }
                    arr.length = data.datas.length

                    let emptyNum = 0 // 不显示的科目数量
                    let schoolArr = []
                    let areaArr = []
                    arr.forEach(item => {
                        for (let key in item) {
                            // 如果当前科目是展示状态
                            if (item[key]) {
                                schoolArr.push(Number(data.datas.filter(item => item.name === key)[0].schoolAverage))
                                areaArr.push(Number(data.datas.filter(item => item.name === key)[0].areaAverage) + 15)
                            } else {
                                emptyNum++
                            }
                        }
                    })
                    // 如果都不显示 则参考线全部直接置为0
                    if (emptyNum == arr.length) {
                        option.series[option.series.length - 2].data = [...Array(data.classList.length).keys()].map(item => 0)
                        option.series[option.series.length - 1].data = [...Array(data.classList.length).keys()].map(item => 0)
                        myBar.setOption(option)
                    } else {
                        // 如果展示 则计算展示科目的平均分之和
                        let newSchoolAverage = schoolArr.reduce(function(pre, cur) { return pre + cur }).toFixed(2)
                        let newAreaAverage = areaArr.reduce(function(pre, cur) { return pre + cur }).toFixed(2)
                        // 计算完赋值最新的 平均分折线 值
                        option.series[option.series.length - 2].data = [...Array(data.classList.length).keys()].map(item => newSchoolAverage)
                        option.series[option.series.length - 1].data = [...Array(data.classList.length).keys()].map(item => newAreaAverage)
                            myBar.setOption(option)
                    }
                })
            },
			
			
			// 获取当前学科下每个班级的平均分
			getSeriesData(val,subjectIndex){
				let result = []
					val.classes.forEach(j => {
						result.push(j.subjects[subjectIndex].average)
					})
				return result
			},
			
			doRender(val){
				let subjectList = val.classes[0].subjects
				this.subjectSeries = []
				// 配置 柱状图的 Series 根据科目 配置
				subjectList.forEach((item, index) => {
				    let seriesItem = {
				        name: item.name,
				        type: 'bar',
				        stack: !isNaN(this.curSubjectIndex) ? item.name : subjectList[0].name,
				        legendHoverLink: true,
				        itemStyle: {
				            color: this.subjectColors[index],
				            width: 10
				        },
						barMaxWidth:30,
				        data: this.getSeriesData(val,index)
				    }
					// 如果是全科情况 或者 是当前单科情况 则加入
					if(isNaN(this.curSubjectIndex) || (!isNaN(this.curSubjectIndex) && this.curSubjectIndex === index)){
						this.subjectSeries.push(seriesItem)
					}
				})
				this.drawLine(val)
			}
        },
        mounted() {
            if (this.getBaseBarData) {
				console.log('BaseBar接收到的vuex',this.getBaseBarData)
				this.doRender(this.getBaseBarData)
			}
        },
        computed: {
            // 获取最新柱状图数据
            getBaseBarData() {
                return this.$store.state.totalAnalysis.analysisJson
            }
        },
        watch: {
            subjectIndex:{
				handler(n,o){
					console.log(n)
					this.curSubjectIndex = n
					this.doRender(this.getBaseBarData)
				},
			}
        }
    }
</script>

<style scoped>

    #myBar {
        width: 100%;
        height: 400px;
        margin: 0 auto;
        display: block;
    }
</style>
