<template>
    <div :id="echartsId" class="knowledgeBar"></div>
</template>

<script>
    export default {
        name: 'hello',
        props: ['echartsId','classIndex'],
        data() {
            return {
                knowledgeData: [],
                x: [],
                y: [],
                activeItemIndex: 0,
				curClassIndex:-1,
            }
        },

        created() {

        },

        methods: {
            drawLine() {
                let _this = this
                // 基于准备好的dom，初始化echarts实例
                let myBar = this.$echarts.init(document.getElementById(this.echartsId))
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        show: true, // 是否显示提示框，默认为true
                        trigger: 'axis', // 数据项图形触发
                        axisPointer: {
                            // 指示样式
                            type: 'shadow',
                            axis: 'auto',
                            shadowStyle: {
                                color: 'rgba(128,128,128,0.1)'
                            }
                        },
                        padding: 15,
                        textStyle: {
                            // 提示框内容的样式
                            color: '#fff'
                        },
                        formatter: function(value) {
                            // console.log(value);
                            return value[0].name + ' : ' + value[0].data + '%'
                        }
                    },
                    grid: {
                        show: false, // 是否显示直角坐标系网格
                        top: 80, // 相对位置 top\bottom\left\right
						left:'center',
						width:'75%',
                        height: 440,
                        containLabel: true // gird 区域是否包含坐标轴的刻度标签
                    },
                    dataZoom: [{
                        'show': true,
                        'height': 10,
                        'xAxisIndex': [
                            0
                        ],
                        bottom:36,
                        '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'
                    }, {
                        'type': 'inside',
                        'show': true,
                        'height': 15,
                        'start': 0,
                        'end': 100
                    }],
                    xAxis: {
                        show: true, // 是否显示
                        position: 'bottom', // x轴的位置
                        offset: 0, // x轴相对于默认位置的偏移
                        type: 'category', // 轴类型， 默认为 'category'
                        name: '月份', // 轴名称
                        nameLocation: 'end', // 轴名称相对位置
                        nameTextStyle: {
                            color: 'transparent',
                            padding: [5, 0, 10, -5]
                        },
                        nameGap: 35, // 坐标轴名称与轴线之间的距离
                        nameRotate: 0, // 坐标轴名字旋转
                        axisLabel: {
                            // 坐标轴标签
                            show: true, // 是否显示
                            inside: false, // 是否朝内
                            margin: 15,
                            rotate: 60,
                            color: '#989898' // 默认取轴线的颜色,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#4c504a'
                            }
                        },
                        splitArea: {
                            show: false // 是否显示，默认为false
                        },
                        data: this.x
                    },
                    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, // 是否显示
                            lineStyle: {
                                color: '#595959',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true, // 是否显示
                            inside: false, // 是否朝内
                            rotate: 0, // 旋转角度
                            margin: 8, // 刻度标签与轴线之间的距离
                            color: '#989898', // 默认轴线的颜色
                            fontSize: 12,
                            formatter: '{value} %'

                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#4c504a',
                                width: 0.5,
                                type: 'solid'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            animation: false,
                            itemStyle: {
                                color: function(params) {
                                    var key = params.dataIndex
                                    if (key === _this.activeItemIndex) {
                                        return '#ff9999'
                                    } else {
                                        return '#1b9dff'
                                    }
                                },
                            },
							barMaxWidth:40,
                            emphasis: {
                                itemStyle: {
                                    color: '#ff9999'
                                }
                            },
                            data: this.y
                        }]
                }

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

                let that = this
                myBar.on('click', function(params) {
                    that.activeItemIndex = params.dataIndex
                    that.$emit('handleItemClick', params)
                    myBar.setOption(option)
                })
				
				
            },

            doRender(data,classIndexs) {
				let classIndex = this.getCurClassIndex
				console.log(classIndex)
				// 区分全部班级以及单个班级的数据
                this.x = data.pointList
                this.y = classIndex === -1 ? data.stupercent.grade.map(item => (Number(item)).toFixed(2)) : data.pointList.map(pointName => data.classpercent[pointName][classIndex].toFixed(2))
                this.drawLine()
            },
			
			doSubjectChange(subject){
				let curclassIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(subject)
				let curJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curclassIndex].levelKey
					let transArr = this.$GLOBAL.EXERCISE_LEVELS()
					curJson.pointList = curJson.pointList.map((i,index) => transArr[index])
					for(let key in curJson.classpercent){
						if(!isNaN(key)){
							let newKey = transArr[+key - 1]
							curJson.classpercent[newKey] = curJson.classpercent[key]
							curJson.stupercent[newKey] = curJson.stupercent[key]
						}
					}
				return curJson
			}
        },

        mounted() {
            if (this.getKnowledgeData) {
				// this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(this.getAnalysisJson.classes.map(item => item.className))]) // 获取班级列表
                this.doRender(this.getKnowledgeData,this.curClassIndex)
            }
			
			this.$EventBus.$on('onCollapseChange',val => {
				const myBar = this.$echarts.init(document.getElementById(this.echartsId))
				myBar.setOption({
				     grid: {
						 width: val ? '90%' : '80%'
					 }
				})
			})
        },

        computed: {
            // 获取最新散点图数据
            getKnowledgeData() {
				let curclassIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
                let curJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curclassIndex].levelKey
					let transArr = this.$GLOBAL.EXERCISE_LEVELS()
					curJson.pointList = curJson.pointList.map((i,index) => transArr[index])
					for(let key in curJson.classpercent){
						if(!isNaN(key)){
							let newKey = transArr[+key - 1]
							curJson.classpercent[newKey] = curJson.classpercent[key]
							curJson.stupercent[newKey] = curJson.stupercent[key]
						}
					}
				return curJson
            },
			getCurSubject(){
				return this.$store.state.totalAnalysis.currentSubject
			},
			getAnalysisJson() {
			    return this.$store.state.totalAnalysis.analysisJson
			},
			getCurClassIndex(){
				return this.$store.state.totalAnalysis.curClassIndex
			}
        },
		
		watch: {
			getCurSubject(n,o){
				console.log(n,o)
				this.doRender(this.doSubjectChange(n),this.curClassIndex)
			},
		    // getKnowledgeData: {
		    //     handler(n,o) {
		    //         if (n) {
						// console.log(n,o)
		    //             this.doRender(n,this.curClassIndex)
		    //         }
		    //     }
		    // },
			classIndex(n,o){
				console.log('柱状图变化了', n - 1)
				this.curClassIndex = n - 1
				this.doRender(this.getKnowledgeData,n - 1)
			},
		}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .knowledgeBar {
        width:100%;
        height: 600px;
        margin: 0 auto;
        display: block;
    }
</style>
