<!-- 
    filename: GasChart.vue
    author: liubin
    date: 2023-12-12 10:53:49
    description: 
-->

<template>
	<div class="gas-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'

export default {
	name: 'GasChart',
	mixins: [resize],
	components: {},
	props: {},
	data() {
		const colors = [
			'#12FFF5',
			'#2760FF',
			'#FFD160',
			'#E80091',
			'#8064ff',
			'#ff8a3b',
			'#8cd26d',
			'#2aa1ff',
		];
		return {
			chart: null,
			option: {
				color: colors,
				grid: { top: 32, right: 12, bottom: 20, left: 48 },
				xAxis: {
					type: 'category',
					data: Array(7)
						.fill(1)
						.map((_, index) => {
							const today = new Date();
							const dtimestamp = today - index * 24 * 60 * 60 * 1000;
							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
								dtimestamp
							).getDate()}`;
						})
						.reverse(),
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisTick: { show: false },
					axisLine: {
						lineStyle: {
							width: 1,
							color: '#213259',
						},
					},
				},
				yAxis: {
					name: '单位m³/h',
					nameTextStyle: {
						color: '#fff',
						fontSize: 10,
						align: 'right',
					},
					type: 'value',
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#213259',
						},
					},
					splitLine: {
						lineStyle: {
							color: '#213259a0',
						},
					},
				},
				series: [
					Array(7)
						.fill(1)
						.map((_) => Math.ceil(Math.random() * 100)),
					Array(7)
						.fill(1)
						.map((_) => Math.ceil(Math.random() * 100)),
					Array(7)
						.fill(1)
						.map((_) => Math.ceil(Math.random() * 100)),
				].map((v, i) => ({
					name: ['总量', '白班', '夜班'][i],
					data: v,
					type: 'line',
					symbol: 'circle',
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							// i % 8 避免超过8个数据时无颜色的问题
							{ offset: 0, color: colors[i % 8] + '40' },
							{ offset: 0.5, color: colors[i % 8] + '20' },
							{ offset: 1, color: colors[i % 8] + '00' },
						]),
					},
				})),
				tooltip: {
					trigger: 'axis',
				},
			},
		};
	},
	computed: {
		sidebarStatus() {
			return this.$store.state.app.sidebar.opened;
		},
		gasChartMsg() {
			return this.$store.state.websocket.gasInfo
		}
	},
	watch: {
		sidebarStatus(val) {
			console.log('sidebarStatus', val);
			this.chart && this.chart.dispose();

			setTimeout(() => {
				this.chart = echarts.init(this.$el);
				this.chart.setOption(this.option);
			}, 500);
		},
		gasChartMsg: {
			handler(newVal, oldVal) {
				console.log(newVal)
				// this.chartData = newVal
				console.log('newVal============')
				// this.updateChart()
			}
		}
	},
	mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.chart = echarts.init(this.$el);
		this.chart.setOption(this.option);
	},
	methods: {},
};
</script>

<style scoped lang="scss">
.gas-chart {
	width: 100%;
	height: 100%;
}
</style>
