import * as React from 'react';
import { Modal, Image } from 'antd';
import VideoPalyer from '../../compontens/videoPlayer';
import BoxContainer from '../../compontens/box';
import './index.scss';
import { useCarList } from '../../hooks/car';
const { useEffect } = React;
const CarMangement: React.FC = (props) => {
	const { state: listState, request: requestCarList } = useCarList();
	useEffect(() => {
		requestCarList({
			page_size: 4,
			page: 1,
		});
	}, []);
	return (
		<div className='car-mangement-wrapper'>
			<div className='car-video-wrapper'>
				{/* <VideoPalyer sessionid=''></VideoPalyer> */}
			</div>
			<BoxContainer title='车辆进出场统计' className='car-static-wrapper'>
				<div>
					<table>
						<thead>
							<tr>
								<th>车牌</th>
								<th>进出类型</th>
								<th>进出场图</th>
								<th>进出场时间</th>
								<th>车辆类型</th>
							</tr>
						</thead>
						<tbody>
							{listState.dataSource.map((element) => {
								return (
									<tr key={element.id}>
										<td>{element.plate_no}</td>
										<td>{element.type}</td>
										<td
											style={{ cursor: 'pointer' }}
											onClick={() => {
												Modal.info({
													icon: null,
													title: null,
													content: <Image src={element.image}></Image>,
												});
											}}>
											查看详情
										</td>
										<td>{element.date}</td>
										<td>{element.vehicle_type}</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			</BoxContainer>
		</div>
	);
};
export default CarMangement;
