import React, { Fragment } from 'react';
import { Table, Select, Row, Col } from 'antd';
import { useWarningList } from '../../hooks/device';
const warnList: React.FC = (props) => {
	const [searchState, handleChangeSearch] = React.useState<{
		page: number;
		filter: 0 | 1 | 2;
	}>({
		page: 1,
		filter: 0,
	});
	const [warnListState, requestWarns] = useWarningList();
	React.useEffect(() => {
		requestWarns({ sn: '', ...searchState });
	}, [searchState]);

	return (
		<Fragment>
			<Row gutter={[0, 24]}>
				<Col span={6}>
					<Select
						style={{ width: 200 }}
						defaultValue={0}
						onChange={(value) => {
							handleChangeSearch((preState) => ({
								...preState,
								page: 1,
								filter: value,
							}));
						}}>
						{[
							{ text: '全部', value: 0 },
							{ text: '已处理', value: 1 },
							{ text: '未处理', value: 2 },
						].map((element) => {
							return (
								<Select.Option value={element.value}>
									{element.text}
								</Select.Option>
							);
						})}
					</Select>
				</Col>
			</Row>
			<Table
				rowKey={(record) => record.id}
				columns={[
					{
						title: '设备类型',
						dataIndex: 'type_name',
						key: 'type_name',
					},
					{
						title: '设备名',
						dataIndex: 'name',
						key: 'name',
					},
					{
						title: '设备编号',
						dataIndex: 'sn',
						key: 'sn',
					},

					{
						title: '告警时间',
						dataIndex: 'time',
						key: 'time',
					},
					{
						title: '告警原因',
						dataIndex: 'reason',
						key: 'reason',
					},
					{
						title: '状态',
						dataIndex: 'is_handled',
						key: 'is_handled',
						render: (datakey) => (datakey ? '已处理' : '未处理'),
					},
				]}
				pagination={{
					hideOnSinglePage: true,
					total: warnListState.total,
					showSizeChanger: false,
					current: warnListState.page,
					onChange: (page) =>
						handleChangeSearch((preState) => ({ ...preState, page })),
				}}
				loading={warnListState.loading}
				dataSource={warnListState.dataSource}></Table>
		</Fragment>
	);
};
export default warnList;
