<template>
	<div class="chart-wrap">
		<v-chart class="chart" :option="chartOption" autoresize />
	</div>
</template>

<script>
import { mapState } from 'vuex';
import VChart from 'vue-echarts';
export default {
	components: {
		VChart,
	},
	props: {
		chartData: {
			type: Object,
			default: () => {},
			require: true,
		},
		isLegend: {
			type: Boolean,
		},
	},
	computed: {
		...mapState({
			isDarkMode: 'isDarkMode',
		}),
		chartOption() {
			let chartOption = { ...this.option };
			if (this.chartData) {
				chartOption.xAxis.data = this.chartData.xAxis;
				chartOption.series = this.chartData.series;
				chartOption.toolbox = this.chartData.toolbox;
				chartOption.dataZoom = this.chartData.dataZoom;
				if (this.chartData.color) chartOption.color = this.chartData.color;
			}
			return chartOption;
		},
	},
	data() {
		return {
			option: {
				tooltip: {
					trigger: 'axis',
					confine: true,
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					left: '3%',
					right: '4%',
					top: '3%',
					bottom: this.isLegend ? '30' : '0',
					containLabel: true,
				},
				legend: this.isLegend
					? {
							top: 'bottom',
							left: 'center',
							textStyle: {
								color: '#95A0A9',
								fontSize: 10,
							},
					  }
					: null,
				yAxis: {
					type: 'value',
					axisLabel: {
						color: '#767D83',
						fontSize: 10,
					},
				},
				xAxis: {
					type: 'category',
					axisLabel: {
						color: '#767D83',
						fontSize: 10,
					},
					data: [], //xAxis text
				},
				series: [
					{
						name: '',
						type: 'bar',
						showBackground: true,
						data: [],
					},
				],
			},
		};
	},
	created() {
		// this.
	},
};
</script>
