import * as React from 'react';
import Table from '../../compontens/table';
import { useIotList, useDeviceList, useDeviceInfo } from '../../hooks/iot';
import BoxContainer from './components/boxContainer';
import './index.scss';
import HeadMast from './static/head-mast.png'
import HeadMastArrow from './static/head-mast-arrow.png'
import HeadMastComponent from './static/head-mast-component.png'

const { useEffect, useState } = React;
const hard: React.FC = (props) => {
	const [state, setstate] = useState<{
		checkedIot: number | undefined;
		checkedDeviceId: number | undefined;
	}>({
		checkedIot: undefined,
		checkedDeviceId: undefined,
	});
	const [tabsState, handleChangeTabState] = useState({
		list: [
			{ name: '实时数据', checked: true, key: 'real' },
			{ name: '历史数据', key: 'history' },
			{ name: '报警数据', key: 'warn' },
		]
	});
	const { state: iotListState, request: requestIotList } = useIotList();
	const { state: deviceState, request: requestDeviceList } = useDeviceList();
	const { state: infoState, request: requestInfo } = useDeviceInfo();
	useEffect(() => {
		requestIotList();
	}, []);
	useEffect(() => {
		if (iotListState.dataSource.length) {
			setstate((preState) => ({
				...preState,
				checkedIot: iotListState.dataSource[0].id,
			}));
		}
	}, [iotListState.dataSource]);
	useEffect(() => {
		if (deviceState.dataSource.length) {
			setstate((preState) => ({
				...preState,
				checkedDeviceId: deviceState.dataSource[0].id,
			}));
		}
	}, [deviceState.dataSource]);
	useEffect(() => {
		if (state.checkedIot) {
			requestDeviceList({
				page: 1,
				page_size: 20,
				device_code: iotListState.dataSource.find(
					(element) => element.id === state.checkedIot
				)?.type_code as number,
			});
		}
	}, [state.checkedIot]);
	useEffect(() => {
		if (state.checkedDeviceId) {
			const currentTab = tabsState.list.find((element) => element.checked);
			switch (currentTab?.key) {
				case 'real':
					requestInfo({
						sn: state.checkedDeviceId as number,
						device_code: state.checkedIot as number,
					});
					break;
				default:
					break;
			}
		}
	}, [state.checkedDeviceId, tabsState.list]);

	return (
		<div className='hard-wrapper'>
			<div className='hard-left'>
				<BoxContainer title='Iot设备' className='iot-wrapper'>
					<div className='iot-content'>
						{iotListState.dataSource.map((iot) => {
							return (
								<div
									key={iot.id}
									className='iot-box'
									onClick={() => {
										setstate((preState) => ({
											...preState,
											checkedIot: iot.id,
										}));
									}}
									data-checked={state.checkedIot === iot.id}>
									{iot.type_name}
								</div>
							);
						})}
					</div>
				</BoxContainer>
				<BoxContainer
					title='塔吊'
					className='iot-device-wrapper'
					renderMore={
						<div className='iot-device-moreInfo'>
							<span className='iot-online'>
								在线设备：<span>{deviceState.online}</span>台
							</span>
							<span className='iot-offline'>
								离线设备：<span>{deviceState.offline}</span> 台
							</span>
						</div>
					}>
					<Table
						rowKey={(item) => {
							return item.id;
						}}
						colums={[
							{ title: '设备名称', dataIndex: 'name', datakey: 'name' },
							{
								title: '状态',
								dataIndex: 'state',
								datakey: 'state',
								render: (data) => {
									return data.state === 1 ? (
										<span className='device-state-online'>在线</span>
									) : (
										<span className='device-state-offline'>离线</span>
									);
								},
							},
						]}
						dataSource={deviceState.dataSource}/>
				</BoxContainer>
			</div>
			<div className='hard-right'>
				<div className='hard-device-content'>
					<div className='hard-device-header'>
						{tabsState.list.map((tabs) => {
							return (
								<div
									data-checked={tabs.checked}
									key={tabs.key}
									onClick={() => {
										handleChangeTabState((preState) => ({
											...preState,
											list: preState.list.map((element) => {
												return {
													...element,
													checked: element.key === tabs.key,
												};
											}),
										}));
									}}>
									{tabs.name}
								</div>
							);
						})}
					</div>
					<div className='hard-info-wrapper'>
						<div className="hard-head-mast">
              <img className="arrow" src={HeadMastArrow} alt='' />
              <img src={HeadMast} alt='' />
              <img className="component" src={HeadMastComponent} alt='' />
						</div>
						<div>
							{infoState.list.map((element) => {
								return (
									<div className='info-record'>
										<span>{element.name}</span>
										<span>
											{element.value}&nbsp;{element.unit}
										</span>
									</div>
								);
							})}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};
export default hard;
