<template>
	<div :class="className" :style="{ height: height, width: width }" :id="id" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';

const animationDuration = 1000;

export default {
	mixins: [resize],
	props: {
		id: {
			type: String,
			default: '',
		},
		className: {
			type: String,
			default: 'barChart',
		},
		title: {
			type: String,
			default: '',
		},
		width: {
			type: String,
			default: '95%',
		},
		height: {
			type: String,
			default: '420px',
		},
		barData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			chart: null,
		};
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		initChart(data) {
			let barData = [];
			for (const key in data) {
				const obj = {
					name: key,
					value: data[key],
				};
				barData.push(obj);
			}
			this.chart = echarts.init(this.$el, 'macarons');

			var option = {
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'line', // 默认为直线，可选为：'line' | 'shadow'
					},
				},
				grid: [
					{
						containLabel: true,
						top: 40,
						left: '2%',
						right: '2%',
						bottom: '3%',
					},
				],
				xAxis: [
					{
						type: 'category',
						data: barData.map((item) => {
							return item.name;
						}),
						axisTick: {
							alignWithLabel: true,
						},
						axisLabel: {
							color: '#979797',
							fontSize: 18,
						},
						axisLine: {
							lineStyle: {
								color: '#979797',
							},
						},
					},
				],
				yAxis: [
					{
						name: '数量',
						nameTextStyle: {
							color: '#979797',
							fontSize: 18,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#4561AE',
							},
						},
						splitArea: {
							show: false,
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#4561AE',
							},
						},
						axisLabel: {
							color: '#979797',
							fontSize: 18,
						},
					},
				],
				series: [
					{
						name: '数量',
						type: 'bar',
						barWidth: '16',
						data: barData.map((item) => {
							return item.value;
						}),
						label: {
							show: true,
							position: 'top',
							color: '#DFF1FE',
						},
						animationDuration,
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' },
							]),
						},
						emphasis: {
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 0, color: '#2378f7' },
									{ offset: 0.7, color: '#2378f7' },
									{ offset: 1, color: '#83bff6' },
								]),
							},
						},
					},
				],
			};
			if (this.chart !== '') {
				this.chart.setOption(option);
			} else {
				this.chart = echarts.init(document.getElementById(this.id));
				this.chart.setOption(option);
			}
		},
	},
};
</script>
