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

<script>
	export default {
		name: 'hello',
		props: ['echartData', 'exerciseIndex'],
		data() {
			return {
				echartDatas: [],
				gradeSeries: [],
				gradeLengend: [],
				colorArr: ['#ff9f7f', '#37d2da', '#d4e676', '#ff9f7f', '#d4e676', '#ff9f7f', '#fb7293'],
				currentExerciseIndex: 0
			}
		},
		created() {},
		methods: {
			drawLine(echartData, exerciseIndex) {
				console.log('年级得分率图表数据', echartData)
				console.log(this.gradeSeries)
				let that = this
				let myBar = this.$echarts.init(document.getElementById('stuAverageBar'))
				var option = {
					legend: {
						top: '7%',
						data: [{
							name: that.$t('totalAnalysis.ta_chart_text4'),
							textStyle: {
								color: '#fff'
							}
						}].concat(this.gradeLengend)

					},
					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) {
							let result = params[0].name
							for (let i = 0; i < params.length; i++) {
								result += '<br>' + params[i].marker + params[i].seriesName + '：' + params[i].data + '%'
							}
							return result
						}
					},
					grid: {
						show: false,
						containLabel: true,
						height: 400,
						width: '88%',
						left:'3%',
						bottom: '12%',
						tooltip: {
							show: true,
							trigger: 'axis', // 触发类型
							textStyle: {
								color: '#666'
							}
						}
					},
					dataZoom: [{
						'show': true,
						'height': 10,
						'xAxisIndex': [
							0
						],
						bottom: 30,
						'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,
						offset: 0,
						type: 'category',
						axisLabel: {
							show: true,
							inside: false,
							margin: 15,
							color: '#989898'
						},
						data: echartData.map(item => item.className)
					},
					yAxis: {
						show: true,
						type: 'value',
						min: 0,
						max: 100,
						axisLabel: {
							show: true,
							inside: false,
							rotate: 0,
							margin: 8,
							color: '#989898',
							formatter: '{value} %',
							fontSize: 12,
							fontFamily: 'Microsoft YaHei'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#4c504a',
								width: 0.5,
								type: 'solid'
							}
						}
					},
					series: [{
						name: that.$t('totalAnalysis.ta_chart_text4'),
						type: 'bar',
						itemStyle: {
							normal: { // 渐变色
								color: '#66cccc'
							},
							width: 20
						},
						markPoint: {
							data: [{
									type: 'max',
									name: that.$t('totalAnalysis.ta_chart_text7')
								},
								{
									type: 'min',
									name: that.$t('totalAnalysis.ta_chart_text8')
								}
							]
						},
						barMaxWidth: 40,
						data: echartData.map(item => item.classScoreRate)
					}].concat(this.gradeSeries)
				}

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

			doAddGradeSeries(analysisJson, curSubjectIndex, echartsData) {
				this.gradeSeries = []
				this.gradeLengend = []
				analysisJson.grades.forEach((grade, gradeIndex) => {
					let seriesItem = {
						name: grade.gradeName + this.$t('totalAnalysis.ta_table_text8'),
						type: 'line',
						itemStyle: {
							color: this.colorArr[gradeIndex],
							width: 0
						},
						symbol: 'none',
						lineStyle: { 
							type: 'dashed',
							width: 0
						},
						markLine: {
							data: [{
								type: 'average'
							}],
							lineStyle: {
								color: this.colorArr[gradeIndex],
								type: 'dashed'
							}
						},
						data: new Array(analysisJson.classes.length).fill(grade.subjects[curSubjectIndex].item[this.currentExerciseIndex])
					}
					this.gradeSeries.push(seriesItem)
					this.gradeLengend.push({
						name: grade.gradeName + this.$t('totalAnalysis.ta_table_text8'),
						textStyle: {
							color: '#fff'
						}
					})
					console.log(this.gradeLengend)
					console.log(this.gradeSeries[0].data)

				})

				this.drawLine(echartsData)
			},

			// 调整图表所需数据结构格式
			renderData(data) {
				console.log(this.currentExerciseIndex)
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].value.forEach((exercise, exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})
					result.push(obj)
				})


				let echartsData = []
				analysisJson.classes.forEach((classItem, classIndex) => {
					echartsData.push({
						className: classItem.className,
						classScoreRate: classItem.subjects[curSubjectIndex].item[this.currentExerciseIndex]
					})
				})

				this.doAddGradeSeries(analysisJson, curSubjectIndex, echartsData)
			},

			// 监听变化处理重新渲染
			doRender(data) {
				let analysisJson = data
				if (!analysisJson) return
				let exerciseData = analysisJson.grades[0].item
				this.gradeRate = exerciseData[this.currentExerciseIndex]
				this.drawLine(data)
			}
		},
		mounted() {
			if (this.getAnalysisJson) {
				this.renderData(this.getAnalysisJson)
			}
		},
		computed: {
			// 获取最新柱状图数据
			getAnalysisJson() {
				return this.$store.state.totalAnalysis.analysisJson
			}
		},
		watch: {
			getAnalysisJson(val) {
				if (!val) return
				this.doRender(val)
			},

			exerciseIndex(val) {
				if (val) {
					this.currentExerciseIndex = +val - 1 // 拿到当前所选择的题号 确认数据下标
					this.renderData(this.getAnalysisJson)
				}
			}

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#stuAverageBar {
		width: 100%;
		height: 600px;
		margin: 0 auto;
		display: block;
	}
</style>
