import BottomBarItem from '../BottomItemBackground';
import GraphBase from '../GraphBase';
import { Radio } from 'antd';
import cls from './index.module.css';
import { useState } from 'react';

const SmallBox = (props) => {
	return (
		<div
			className="small-box"
			style={{
				boxShadow: 'inset 0 0 18px 10px #fff1',
				borderRadius: '3px',
				padding: '6px',
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				color: '#fff',
				position: 'relative',
				userSelect: 'none',
			}}
		>
			{props.split !== false && (
				<span
					className="vertical-line"
					style={{
						position: 'absolute',
						display: 'inline-block',
						width: '2px',
						height: '80%',
						top: '10%',
						left: '50%',
						background:
							'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
					}}
				></span>
			)}
			{props.children}
		</div>
	);
};

function WindFrequence(props) {
	const [dataSource, setDataSource] = useState('风机');

	function handleSourceChange(v) {
		console.log('val', v);
	}

	return (
		<GraphBase
			icon="pause"
			title="当前温度"
			dateOptions={['风机', '风阀', '电加热']}
			onDateChange={handleSourceChange}
			size={['middle', 'long']}
		>
			<div className={cls.mainContent + ' ' + cls.grid}>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox split={false}>
					<div className={cls.areaPureContent}>
						<span className={cls.areaPureValue}>123.8℃</span>
						<span className={cls.areaPureValue}>123.8℃</span>
						<span className={cls.areaPureValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox split={false}>
					<div className={cls.areaPureContent}>
						<span className={cls.areaPureValue}>123.8℃</span>
						<span className={cls.areaPureValue}>123.8℃</span>
						<span className={cls.areaPureValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
				<SmallBox>
					<h1 className={cls.areaName}>A1区板上</h1>
					<div className={cls.areaContent}>
						<span className={cls.areaValue}>123.8℃</span>
					</div>
				</SmallBox>
			</div>
		</GraphBase>
	);
}

export default WindFrequence;