import React from 'react';
import { useState, useEffect, useContext } from 'react';
import Container from '../Container';
import SocketContext from '../../store/socket-data-provider';
import cls from './kiln.module.less';

export default function Kiln() {
	const ctx = useContext(SocketContext);

	const infos = [
		{ label: '窑炉压力', value: ctx.kilnInfo?.kilnPressure || '0Pa' },
		{ label: '循环水温度', value: ctx.kilnInfo?.waterLoopTemperature || '0℃' },
		{ label: '循环水流量', value: ctx.kilnInfo?.waterLoopFlow || '0㎡/h' },
		{ label: '循环水压力', value: ctx.kilnInfo?.waterLoopPressure || '0Pa' },
		{ label: '助燃风压力', value: ctx.kilnInfo?.windPressure || '0℃' },
		{ label: '碹顶加权温度', value: ctx.kilnInfo?.topTemperature || '0℃' },
		{
			label: '压缩气压力',
			value: ctx.kilnInfo?.gasPressure || '0Pa',
		},
		{ label: '融化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
	];

	return (
		<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
			<div className={cls.leftBar__top__content}>
				{infos.map((item) => (
					<div key={item.label} className={cls.info__item}>
						{item.label}: {item.value}
					</div>
				))}
			</div>
		</Container>
	);
}