<template>
	<div
		:id="'currentDataChart' + chartN"
		style="width: 100%; height: 300px"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize';
export default {
	name: 'BaseChart',
	mixins: [resize],
	data() {
		return {
			chartDom: '',
			chart: '',
		};
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		lineName: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		chartN: {
			type: Number,
			required: true,
			default: () => {
				return 0;
			},
		},
	},
	watch: {
		chartData: function () {
			this.getChart();
		},
	},
	mounted() {
		this.getChart();
	},
	methods: {
		getChart() {
			if (
				this.chart !== null &&
				this.chart !== '' &&
				this.chart !== undefined
			) {
				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
			}
			this.chartDom = document.getElementById('currentDataChart' + this.chartN);
			this.chart = echarts.init(this.chartDom);
			if (this.chartData.length === 0) {
				return false;
			}
			console.log('chartData:', this.chartData);
			console.log('lineName:', this.lineName);
			let xData = this.chartData.map((item) => {
				return item.inspectionContent;
			});
			console.log('xData:', xData);
			let series = [];
			this.lineName.map((item) => {
				let obj = {
					data: [],
					type: 'bar',
					stack: 'a',
					barWidth: 20,
					name: item.prop,
				};
				this.chartData.forEach((ele) => {
					obj.data.push(ele[item.prop]);
				});
				series.push(obj);
			});
			console.log('series:', series);
			var option = {
				color: [
					'#288AFF',
					'#73DE93',
					'#FFCE6A',
					'#63BDFF',
					'#7164FF',
					'#FF6860',
					'#FF9747',
					'#B0EB42',
					'#D680FF',
					'#0043D2',
				],
				legend: {
					itemWidth: 10,
					itemHeight: 10,
					textStyle: {
						color: '#8c8c8c',
					},
					right: 0,
				},
				tooltip: {
					trigger: 'axis',
				},
				grid: {
					left: 20,
					right: 0,
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: xData,
				},
				yAxis: {
					type: 'value',
				},
				series: series,
			};

			option && this.chart.setOption(option);
		},
	},
};
</script>
