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

<script>
	export default {
		name: 'hello',
		props:{
			echartsId:{
				type:String,
				default:''
			},
			echartsData:{
				type:Array,
				default:() => []
			},
			subjectIndex:{
				type:Number,
				default:NaN
			}
		},
		data() {
			return {
				scoreRateCountArr: [],
				splitArr: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
			}
		},
		created() {},

		methods: {

			// 执行图表渲染工作
			drawLine(data) {
				// 基于准备好的dom，初始化echarts实例
				let myBar = this.$echarts.init(document.getElementById(this.echartsId))
				let that = this

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							textStyle: {
								color: '#fff',
								fontSize: '26'
							},
						},
						formatter: function(value) {
							let range = (that.splitArr[value[0].dataIndex] - 10) + '%-' + that.splitArr[value[0]
								.dataIndex] + '%:'
							return range + '<br>' + value[0].data + that.$t('unit.text7')
						}
					},
					legend: {
						top: '5%',
						right: '50%',
						data: ['人数'],
						textStyle: {
							fontSize: 12,
							color: '#808080'
						},
						icon: 'rect'
					},
					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: [{
						type: 'category',
						axisTick: {
							show: true
						},
						axisLine: {
							show: true
						},
						axisLabel: {
							color: '#aaaaaa',
							margin: 10,
							align: 'left'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#4c504a',
								width: 0.5,
								type: 'solid'
							}
						},
						data: ['     10%', '     20%', '     30%', '     40%', '     50%', '     60%',
							'     70%', '     80%', '     90%', '   100%'
						],

					}],
					yAxis: [{
						name: '人数',
						nameTextStyle: {
							color: '#808080',
							fontSize: 12,
						},
						type: 'value',
						axisLine: {
							show: false
						},
						axisLabel: {
							color: '#afafaf',
							fontSize: 12,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#4c504a',
								width: 0.5,
								type: 'solid'
							}
						},
						axisTick: {
							show: true
						}
					}],
					series: [{
						name: '人数',
						type: 'bar',
						label: {
							show: true,
							position: 'top',
							fontSize: 14,
							color: '#3DC3F0',
							fontWeight: 'bold'
						},
						barMaxWidth: 40,
						itemStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#3DC3F0' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#3486b1' // 100% 处的颜色
								}]
							}
						},
						data: that.scoreRateCountArr
					}, ]
				};
				// 绘制图表
				myBar.clear()
				myBar.setOption(option)
				window.addEventListener('resize', function() {
					myBar.resize()
				})
			},


			/* 根据学生总体数据来换取得分率区间分布数据 */
			doRender(list,isAll) {
				let sRateArr = isAll ? list.map(i => i.sRate) : list.map(i => i.subjects[this.subjectIndex].sRate)
				let splitArr = [...new Array(10).keys()]
				let result = new Array(10).fill(0)
				sRateArr.forEach(rate => {
					if(rate === 100){
						result[9]++
					}else if(rate < 10){
						result[0]++
					}else{
						splitArr.forEach((j, index) => {
							if(rate.toString().slice(0, 1) === j.toString()) {
								result[index]++
							}
						})
					}
					
				})
				this.scoreRateCountArr = result
				this.drawLine()
			}
		},
		mounted() {
			this.doRender(this.echartsData,isNaN(this.subjectIndex))
		},
		watch: {
			echartsData:{
				handler(n,o){
					this.doRender(n,isNaN(this.subjectIndex))
				},
			},
			subjectIndex:{
				handler(n,o){
					this.doRender(this.echartsData,isNaN(n))
				},
			}
		}
	}
</script>

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