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

<script>
	export default {
		name: 'BaseBar',
		props: ['barId', 'barData'],
		data() {
			return {
				barDatas: []
			}
		},
		methods: {

			drawLine(data) {
				let that = this
				// 基于准备好的dom，初始化echarts实例
				let myBar = this.$echarts.init(document.getElementById(this.barId), 'chalk')

				let option = {
					title: {
						text: that.$t('survey.barTitle'),
						left: 'center',
						top: 20,
						textStyle: {
							color: '#919191'
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						},
						formatter: function(params) {
							var curCode = String.fromCharCode(64 + parseInt(params[0].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: {
						show:false,
						"top": "25%",
						"left": "5%",
						"bottom": "0",
						"right": "5%",
						"containLabel": true
					},
					xAxis: [{
						type: 'category',
						data: data.count.map(item => item.code),
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#6d6a6a",
							}
						},
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}'
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: "#B0ABAB",
								width: 1,
								type: "solid"
							},
						},
						splitLine: {
							lineStyle: {
								color: "#c7c4c4",
								width: 1,
								type: "solid"
							},
						}
					}],
					series: [{
						type: 'bar',
						data: data.count.map(item => item.value),
						barWidth: 50, //柱子宽度
						itemStyle: {
							normal: {
								color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#00fcae'
								}, {
									offset: 1,
									color: '#006388'
								}]),
								opacity: 1,
							}
						}
					}]
				};

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

				window.addEventListener('resize', function() {
					myBar.resize()
				})
			}
		},
		mounted() {
			if (!this.barData.count.length) return
			this.drawLine(this.barData)


		},
		watch: {
			barData: {
				deep: true,
				handler(val) {
					this.drawLine(val)
				}
			}
		}

	}
</script>

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