<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: {
		chartType: '',
		chartTime: ''
	},
	data() {
		const colors = [
			'#12FFF5',
			'#2760FF',
			'#FFD160',
			'#E80091',
			'#8064ff',
			'#ff8a3b',
			'#8cd26d',
			'#2aa1ff',
		];
		return {
			chart: null
		};
	},
	computed: {
		gasChartDayTrend() {
			return this.$store.state.websocket.gasChartDayTrend
		},
		gasChartWeekTrend() {
			return this.$store.state.websocket.gasChartWeekTrend
		},
		gasChartMonthTrend() {
			return this.$store.state.websocket.gasChartMonthTrend
		},
		gasChartYearTrend() {
			return this.$store.state.websocket.gasChartYearTrend
		}
	},
	watch: {
		gasChartDayTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '日') {
					this.updateChart()
				}
			}
		},
		gasChartWeekTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '周') {
					this.updateChart()
				}
			}
		},
		gasChartMonthTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '月') {
					this.updateChart()
				}
			}
		},
		gasChartYearTrend: {
			handler(newVal, oldVal) {
				if (this.chartTime === '年') {
					this.updateChart()
				}
			}
		},
		chartType: {// 监听类型变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		},
		chartTime: {// 监听时间变化，更新图
			handler(newVal, oldVal) {
				this.updateChart()
			}
		}
	},
	mounted() {
		this.$el.addEventListener('resize', () => {
			console.log('resziing.....');
		});
		this.updateChart()
	},
	methods: {
		updateChart() {
			let gasName  = ''
			const colors = ['#FFCB59'];
			let temp1 = []
			let temp2 = []
			let seriesData = []
			let xData = []
			let yData = []
			switch (this.chartTime) {
				case '日':{
					temp1 = this.gasChartDayTrend
					break;
				}
				case '周':{
					temp1 = this.gasChartWeekTrend
					break;
				}
				case '月':{
					temp1 = this.gasChartMonthTrend
					break;
				}
				case '年':{
					temp1 = this.gasChartYearTrend
					break;
				}
				default:
			}
			switch (this.chartType) {
				case '氧气含量':{
					temp2 = temp1.O2_float || []
					break;
				}
				case '二氧化硫':{
					temp2 = temp1.SO2_float || []
					break;
				}
				case '一氧化氮':{
					temp2 = temp1.NOX_float || []
					break;
				}
				case '颗粒物':{
					temp2 = temp1.dust_float || []
					break;
				}
				default:
			}
			temp2.length > 0 && temp2.map(i => {
				xData.push(i.time)
				yData.push(i.value)
			}) 
			if (yData.length == 0) {
				seriesData = []
			}else {
				seriesData = [{
					name: gasName,
					data: yData,
					type: "line",
					areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#FFCB59' + "40" },
							{ offset: 0.5, color: '#FFCB59' + "20" },
							{ offset: 1, color: '#FFCB59' + "00" },
							]),
					},
					lineStyle: {
							width: 1
					},
					symbolSize: 1,
					emphasis: {
							focus: 'series'
					}
				}]
					
			}
			// 绘图
			if (
        this.chart !== null &&
        this.chart !== '' &&
        this.chart !== undefined
      ) {
        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
      }
			this.chart = echarts.init(this.$el);
			var option = {
				color: colors,
				grid: { top: 32, right: 12, bottom: 20, left: 48 },
				xAxis: {
					type: 'category',
					data: xData,
					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: seriesData,
				tooltip: {
					trigger: 'axis',
				},
			}
			option && this.chart.setOption(option)
		}
	},
};
</script>

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