import React, { useState, useEffect, Fragment } from 'react';
import {
	Table,
	Badge,
	PageHeader,
	Button,
	Modal,
	Form,
	Input,
	message,
	notification,
} from 'antd';
import { useParams, RouteComponentProps } from 'react-router-dom';
import { ColumnProps } from 'antd/lib/table';

import {
	usVideoDeviceList,
	VideoStatus,
	VideoState,
	chanleState,
	useAdminChanleList,
	useChangeChnale,
} from '../../hooks/video';

const chanles: React.FC<RouteComponentProps> = ({ history }) => {
	const [form] = Form.useForm();
	const params = useParams<{ id: string }>();
	const [chanleListState, requestChanleList] = useAdminChanleList();
	const { state: putState, request: requestPut } = useChangeChnale();
	const [modalState, handleChangeModalState] = useState({ visible: false });
	const [searchState, handldeChangeSearchState] = useState({
		sn: params.id,
		page: 1,
	});
	useEffect(() => {
		requestChanleList(searchState);
	}, [searchState]);
	const handleSubmit = () => {
		form.validateFields().then((data: any) => {
			requestPut({ ...data, id: form.getFieldValue('id') })
				.then(() => {
					message.success('通道修改成功');
					handleChangeModalState((preState) => ({
						...preState,
						visible: false,
					}));
					requestChanleList(searchState);
				})
				.catch((error) => {
					notification.error({
						message: '通道修改失败',
						description: error.message,
					});
				});
		});
	};
	const chanleColums: ColumnProps<any>[] = [
		{
			title: '通道名',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '通道号',
			dataIndex: 'channel_no',
			key: 'channel_no',
		},
		{
			title: '状态',
			dataIndex: 'state',
			key: 'state',
			render: (indexKey) => {
				return (
					<Badge
						status={indexKey === 1 ? 'success' : 'error'}
						text={chanleState[indexKey]}
					/>
				);
			},
		},
		{
			title: '操作',
			render: (record) => {
				return (
					<Button
						type='primary'
						onClick={() => {
							handleChangeModalState((preState) => ({
								...preState,
								visible: true,
							}));
							form.setFields([
								{ name: 'name', value: record.name },
								{ name: 'id', value: record.id },
								{ name: 'channel_no', value: record.channel_no },
							]);
						}}>
						修改
					</Button>
				);
			},
		},
	];
	return (
		<Fragment>
			<PageHeader title='通道列表' style={{ paddingLeft: 0 }}></PageHeader>
			<Table
				rowKey={(record) => record.id}
				loading={chanleListState.loading}
				columns={chanleColums}
				pagination={{
					showSizeChanger: false,
					hideOnSinglePage: true,
					current: chanleListState.page,
					total: chanleListState.total,

					onChange: (page) => {
						handldeChangeSearchState((preState) => ({ ...preState, page }));
					},
				}}
				dataSource={chanleListState.dataSource}></Table>
			<Modal
				okButtonProps={{ loading: putState.loading }}
				title='修改'
				visible={modalState.visible}
				onOk={handleSubmit}
				onCancel={() => {
					handleChangeModalState((preState) => ({
						...preState,
						visible: false,
					}));
				}}>
				<Form form={form}>
					<Form.Item
						name='channel_no'
						label='通道号'
						children={<Input disabled></Input>}></Form.Item>
					<Form.Item
						name='name'
						required
						label='通道名'
						rules={[{ required: true, message: '请输入通道名' }]}
						children={<Input></Input>}></Form.Item>
				</Form>
			</Modal>
		</Fragment>
	);
};
export default chanles;
