import cls from './index.module.css';
import { useContext, useEffect, useState } from 'react';
import SocketContext from '../../../../store/socket-data-provider';

function getData(type) {
	let data = [];
	switch (type) {
		case 'gas-i':
			data = [
				{ id: 1, name: '1#天然气I', value: '0m³/h' },
				{ id: 2, name: '2#天然气I', value: '0m³/h' },
				{ id: 3, name: '3#天然气I', value: '0m³/h' },
				{ id: 4, name: '4#天然气I', value: '0m³/h' },
				{ id: 5, name: '5#天然气I', value: '0m³/h' },
				{ id: 6, name: '6#天然气I', value: '0m³/h' },
				{ id: 7, name: '7#天然气I', value: '0m³/h' },
				{ id: 8, name: '8#天然气I', value: '0m³/h' },
			];
			break;
		case 'gas-ii':
			data = [
				{ id: 11, name: '1#天然气II', value: '0m³/h' },
				{ id: 12, name: '2#天然气II', value: '0m³/h' },
				{ id: 13, name: '3#天然气II', value: '0m³/h' },
				{ id: 14, name: '4#天然气II', value: '0m³/h' },
				// { id: 15, name: '5#天然气II', value: '0m³/h' },
			];
			break;
	}
	return data;
}

function GridList(props) {
	const { runState } = useContext(SocketContext);
	const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';

	let dataList = getData(props.dataSource);
	dataList = runState?.[key]
		? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
		: dataList;

	return (
		<div className={cls.gridList}>
			{dataList.map((item) => (
				<div key={item.id} className={cls.listItem}>
					{item.name}: {item.value}
				</div>
			))}
		</div>
	);
}

export default GridList;