import cls from './index.module.css';
import ReactECharts from 'echarts-for-react';
import getOptions from './chart.config';
import SocketContext from '../../../../store/socket-data-provider';
import { useContext } from 'react';

function GasChart(props) {
	const { dataSource } = props;
	const { hisState } = useContext(SocketContext);

	const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';

	// keys() 的结果不是按照顺序的，需要 sort()
	const seriesData = hisState?.[dataName]
		? Object.keys(hisState?.[dataName])
				.sort()
				.map((key, index) => hisState?.[dataName][key])
		: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));

	// debug
	console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);

	return (
		<div className={cls.gasChart}>
			<ReactECharts
				key={Math.random()}
				option={getOptions(
					seriesData,
					dataSource == 'gas-i' ? '天然气I' : '天然气II',
				)}
				style={{ height: '100%' }}
			/>
		</div>
	);
}

export default GasChart;