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

<script>
    export default {
        props: ['echartData','echartsId'],
        data() {
            return {
            }
        },

        methods: {
            drawLine(data) {
				console.log('进线人数统计数据',data)
                // 基于准备好的dom，初始化echarts实例
                let myBar = this.$echarts.init(document.getElementById(this.echartsId))

                // 指定图表的配置项和数据
                var option = {
                    legend: {
                        //  data:['班级进线人数','班级总人数']
                        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(params) {
                            var results = params[0].name + '<br>'
                            for (var i = 0; i < params.length; i++) {
                                if (params[i].seriesType === 'line') {
                                    results += params[i].marker + params[i].seriesName + '：' + params[i].data + '%<br>'
                                } else {
                                    results += params[i].marker + params[i].seriesName + '：' + params[i].data + '<br>'
                                }
                            }
                            return results
                        }
                    },
                    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'
                    }, {
                        '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: 50, // 坐标轴名字旋转
                        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, // 是否朝内
                            margin: 15,
                            rotate: 45,
                            color: '#989898' // 默认取轴线的颜色,
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#595959'
                            }
                        },
                        splitArea: {
                            show: false // 是否显示，默认为false
                        },
                        data: data.map(item => item.name)
                    },
                    yAxis: [
                        {
                            show: true, // 是否显示
                            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'
                                }
                            },
                            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'
                                },
                                axisLabel: {
                                    show: true, // 是否显示
                                    inside: false, // 是否朝内
                                    rotate: 0, // 旋转角度
                                    margin: 8, // 刻度标签与轴线之间的距离
                                    color: '#fff', // 默认轴线的颜色
                                    fontSize: 12,
                                    fontFamily: 'Microsoft YaHei'
                                }
                            }
                        },
                         {
                            type: 'value',
                            min: 0,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#595959'
                                }
                            },
                            nameTextStyle: {
                                color: '#999'
                            },
                            axisLabel: {
                                show: true, // 是否显示
                                inside: false, // 是否朝内
                                rotate: 0, // 旋转角度
                                margin: 8, // 刻度标签与轴线之间的距离
                                color: '#989898', // 默认轴线的颜色
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei',
                                formatter: function(value) {
                                    return value + '%'
                                }
                            },
                            splitArea: {
                                show: false
                            }
                        }],
                    series: [
                        {
                            name: this.$t('totalAnalysis.ach_text7'),
                            type: 'bar',
                            itemStyle: {
                                color: '#787c76',
                                width: 20
                            },
							barMaxWidth:40,
                            data: data.map(item => item.totalNum)
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text8'),
                            type: 'bar',
                            itemStyle: {
                                color: '#42beda',
                                width: 20
                            },
                            barGap: '-100%',
							barMaxWidth:40,
                            data: data.map(item => item.entryNum)
                        },
                        {
                            name: this.$t('totalAnalysis.ach_text9'),
                            type: 'line',
                            color: '#66cc00',
                            itemStyle: {
                                color: '#66cc00',
                                borderColor: '#efefef',
                                borderWidth: 3
                            },
                            symbolSize: 10,
                            yAxisIndex: 1,
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: '#66cc00',
                                    shadowColor: 'rgba(245,128,128, 0.5)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
							barMaxWidth:30,
                            data: data.map(item => item.overAverageRate)
                        }
                    ]
                }

                // 绘制图表
                myBar.setOption(option)
                window.addEventListener('resize', function() {
                    myBar.resize()
                })
            },
			
			getEntryBarData(analysisJson){
				let result = []
				analysisJson.classes.forEach((classItem,classIndex) => {
					let totalNum = classItem.stuCount
					let	entryNum = classItem.lineCount
					result.push({
						name:classItem.className,
						totalNum:totalNum,
						entryNum:entryNum,
						overAverageRate:((entryNum / totalNum) * 100).toFixed(2)
					})
				})
				return result
			}
        },
        mounted() {
            if (this.getAnalysisJson){
				this.drawLine(this.getEntryBarData(this.getAnalysisJson))
			}
        },
        computed: {
            // 获取最新柱状图数据
            getAnalysisJson() {
                return this.$store.state.totalAnalysis.analysisJson
            }
        },
        watch: {
            getAnalysisJson(val) {
                if (val) {
					this.$nextTick(() => {
						this.drawLine(this.getEntryBarData(val))
					})
				}
            }
        }
    }
</script>

<style scoped>
    .entryNumberBar {
        width: 100%;
        height: 400px;
        margin: 0 auto;
        display: block;
    }
</style>
