import { useState } from 'react';
import cls from './index.module.css';
import Chart2 from '../../../公共组件/时间火向数据';
import VideoContainer from './VideoContainer';

function KilnCenter() {
	const [floor, setFloor] = useState(0);

	function onFloorUpdate(flr) {
		setFloor(flr);
	}

	return (
		<div
			className="bgKilnInner"
			style={{
				width: '100%',
				position: 'absolute',
				top: '12%',
				display: 'flex',
				flexDirection: 'column',
			}}
		>
			{/* 时间火向数据 */}
			<div
				className="fireAndTime"
				style={{ position: 'absolute', top: '-112px', height: '212px' }}
			>
				<Chart2 />
			</div>

			{/* menu  */}
			<div
				className="subMenu"
				style={{
					display: 'flex',
					marginBottom: '24px',
					justifyContent: 'center',
				}}
			>
				<div
					className={
						'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
					}
					onClick={() => onFloorUpdate(1)}
				>
					一层
				</div>
				<div
					className={
						'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
					}
					onClick={() => onFloorUpdate(2)}
				>
					二层
				</div>
			</div>

			{/* video  */}
			<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />

			<div className={cls.videoLayer2}></div>

			{/* left side  */}
			{/* <div
				className="leftSide"
				style={{
					position: 'absolute',
					left: '88px',
					top: '24%',
					display: 'grid',
					gridTemplateColumns: '100px 100px',
					gap: '20px 18px',
					gridAutoRows: '64px',
				}}
			>
				{data.map((item) => (
					<div
						className="leftSideItem"
						style={{
							background: '#fff3',
							display: 'flex',
							flexDirection: 'column',
							alignItems: 'center',
							justifyContent: 'center',
							background: '#32535d',
						}}
					>
						<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
							{item.name}
						</span>
						<span
							style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
						>
							{item.value} ℃
						</span>
					</div>
				))}
			</div>

			<div
				className="toolbox"
				style={{
					position: 'absolute',
					bottom: '32px',
					left: '64px',
					display: 'flex',
					alignItems: 'center',
					gap: '24px',
				}}
			>
				<div
					className="tlj tlj1"
					style={{ background: '#ccc', width: '200px', height: '100px' }}
				></div>
				<div
					className="tlj tlj2"
					style={{ background: '#ccc', width: '200px', height: '100px' }}
				></div>
			</div> */}
		</div>
	);
}

export default KilnCenter;