import BottomBarItem from '../BottomItemBackground';
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('fan');

	function handleSourceChange(e) {
		console.log('val', e.target.value);
		if (e.target.value == 'fan') {
			setDataSource('fan');
		} else if (e.target.value == 'switcher') {
			setDataSource('switcher');
		} else if (e.target.value == 'heating') {
			setDataSource('heating');
		}
	}

	return (
		<BottomBarItem
			icon="pause"
			title="当前温度"
			className={props.className}
			style={props.style}
		>
			<div className={cls.floatHead}>
				<div className={cls.alignRight}>
					<Radio.Group
						defaultValue="fan"
						buttonStyle="solid"
						className={cls.radioGroup}
						onChange={handleSourceChange}
					>
						<Radio.Button value="fan" className="radio-group__item">
							风机
						</Radio.Button>
						<Radio.Button value="switcher" className="radio-group__item">
							风阀
						</Radio.Button>
						<Radio.Button value="heating" className="radio-group__item">
							电加热
						</Radio.Button>
					</Radio.Group>
				</div>
			</div>

			<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>
		</BottomBarItem>
	);
}

export default WindFrequence;