<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: "black",
							fontFamily: "Ariel",
							fontWeight: "bolder",
						},
						formatter: function(params) {
							var curCode = String.fromCharCode(64 + parseInt(params.dataIndex + 1))
							var students = data.details[curCode] || []
							var results = ''
							if(students.length){
								for (var i = 0; i < students.length; i++) {
									results += students[i] + '<br>'
								}
								return results
							}else{
								return that.$t('totalAnalysis.text9')
							}
							
						}
					},
					grid: {
						containLabel: true,
					},
					xAxis: {
						type: "category",
						data: data.count.map(i => i.code),
						splitLine: {
							lineStyle: {
								color: "transparent",
							},
						},
						//座標軸線的設置
						axisLine: {
							show:false,
							lineStyle: {
								color: "gray",
								width: 2,
							},
						},
						//座標軸的刻度顏色
						axisLabel: {
							show:false,
							color: "black",
						},
					},
					yAxis: {
						type: "value",
						show: false,
						axisLine: {
							show:false,
							lineStyle: {
								color: "gray",
								width: 2,
							},
						},
						//座標軸的刻度顏色
						axisLabel: {
							show:false,
							color: "black",
						},
					},
					emphasis: {
						itemStyle: {
							color: "#FA6400", //高亮
						},
					},
					series: [{
						label: {
							show: true,
							position: 'top',
							fontSize: 10,
							color: '#3DC3F0',
							fontWeight: 'bold'
						},
						data: data.count.map(item => {
							return {
								value:item.value,
								itemStyle:{
									color:item.value === Math.max(...data.count.map(i => i.value)) ? 'rgb(31, 218, 59)' : 'rgb(190, 211, 218)'
								}
							}
							
						}),
						barWidth:20,
						type: "bar",
					}],
				}

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

				window.addEventListener('resize', function() {
					myBar.resize()
				})
			}
		},
		mounted() {
			if (!this.barData.count.length) return
			console.log('mini接受到的',this.barData)
			this.drawLine(this.barData)
		},
		watch: {
			barData: {
				
				handler(val) {
					console.log('mini接受到的',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%;
		margin: 0 auto;
		display: block;
	}
</style>
