<template>
	<div :id="barId" class="myBar"></div>
</template>

<script>
	export default {
		name: 'BaseBar',
		props: ['barId', 'barData'],
		data() {
			return {}
		},
		methods: {
			drawLine(data) {
				let that = this
				// 基于准备好的dom，初始化echarts实例
				let myBar = this.$echarts.init(document.getElementById(this.barId), 'chalk')
				let option = {
					tooltip: {
						trigger: "item",
						padding: [4, 12],
						backgroundColor: "white",
						textStyle: {
							color: "#7d7d7d",
							fontFamily: "Ariel",
						},
						formatter: function(params) {
							var curCode = String.fromCharCode(64 + parseInt(params.dataIndex + 1))
							var students = data.details[curCode] || []
							var results =  params.name + '：<br>'
							if (students.length) {
								for (var i = 0; i < students.length; i++) {
									results += students[i] + '<br>'
								}
								return results
							} else {
								return that.$t('totalAnalysis.text9')
							}

						}
					},
					grid: {
						show: false,
						"top": "8%",
						"left": "0%",
						"bottom": "40%",
						"right": "0%",
						"containLabel": true
					},
					xAxis: {
						type: "category",
						data: data.count.map(i => i.key),
						splitLine: {
							lineStyle: {
								color: "transparent",
							},
						},
						//座標軸線的設置
						axisLine: {
							lineStyle: {
								color: "#a1a1a1",
								width: 1,
							},
						},
						 axisTick:{
							show:false
						 },
						//座標軸的刻度顏色
						axisLabel: {
							color: "#a1a1a1",
						},
					},
					yAxis: {
						type: "value",
						show: false,
						axisLine: {
							show: true,
							lineStyle: {
								color: "gray",
								width: 2,
							},
						},
						//座標軸的刻度顏色
						axisLabel: {
							show: true,
							color: "black",
						},
					},
					emphasis: {
						itemStyle: {
							color: that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(0,244,255,1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(0,77,167,1)' // 100% 处的颜色
							}], false)
						},
					},
					series: [{
						label: {
							show: true,
							position: 'top',
							fontSize: 10,
							color: '#949494',
						},
						data: data.count.map(item => {
							return {
								value: item.value == 0 ? '' : item.value,
								itemStyle: {
									color: item.value === Math.max(...data.count.map(i => i.value)) ? '#dc57e8' : '#3280e6'
								}
							}
						}),
						itemStyle: {
							normal: {
								barBorderRadius: 0 //圆角大小
							},
						},
						barWidth: 16,
						type: "bar",
					}],
				}

				// 绘制图表
				myBar.setOption(option)

				window.addEventListener('resize', function() {
					myBar.resize()
				})
			}
		},
		mounted() {
			if (!this.barData) return
			this.drawLine(this.barData)
		},
		watch: {
			barData: {
				handler(val) {
					if (val.count && val.count.length) {
						this.drawLine(val)
					}
				},
				deep: true,
			}
		}

	}
</script>

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