import * as React from 'react';
import {
	Table,
	Button,
	Space,
	Modal,
	Row,
	PageHeader,
	Form,
	Input,
	message,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import {
	useWarnConcatList,
	useDeleteConcat,
	ConcatProps,
	useAddWarnConcat,
	useChangeWarnConcat,
} from '../../hooks/warn';

const warnConcat = () => {
	const [form] = Form.useForm();
	const [updateForm] = Form.useForm();
	const [addModalState, setModalState] = React.useState({
		visible: false,
	});
	const [updateModalState, handleUpdateModalState] = React.useState({
		visible: false,
		values: {},
	});
	const {
		state: concatListState,
		request: requestConcatList,
	} = useWarnConcatList();

	const { state: deleteState, request: requestDelete } = useDeleteConcat();
	const { state: addState, request: requestAddConcat } = useAddWarnConcat();
	const {
		state: changeState,
		request: requestChangeConcat,
	} = useChangeWarnConcat();

	React.useEffect(() => {
		requestConcatList();
	}, []);
	const colums: ColumnProps<ConcatProps>[] = [
		{
			title: '邮箱',
			dataIndex: 'email',
			key: 'email',
		},
		{
			title: '手机号',
			dataIndex: 'phone',
			key: 'phone',
		},
		{
			title: '操作',
			render: (record) => {
				return (
					<Space>
						<Button
							onClick={() => {
								handleUpdateModalState((preState) => ({
									...preState,
									visible: true,
									values: record,
								}));
								updateForm.setFieldsValue(record);
							}}>
							修改
						</Button>
						<Button danger onClick={() => handleDelete(record)}>
							删除
						</Button>
					</Space>
				);
			},
		},
	];
	const handleSubmitChange = () => {
		updateForm.validateFields().then((data: any) => {
			requestChangeConcat({
				...updateModalState.values,
				...data,
			})
				.then(() => {
					message.success('更新告警联系人成功');
					handleUpdateModalState((preState) => ({
						...preState,
						values: {},
						visible: false,
					}));
					requestConcatList();
				})

				.catch((error) => {
					message.error(error.message);
				});
		});
	};
	const handleDelete = (record: ConcatProps) => {
		Modal.confirm({
			title: '提示',
			content: '确认删除?',
			okText: '确认',
			cancelText: '取消',
			okButtonProps: { loading: deleteState.loading },
			onOk: () => {
				requestDelete({ id: record.id })
					.then(() => {
						requestConcatList();
					})
					.catch((error) => {
						message.error(error.message);
					});
			},
		});
	};
	const handleSubmit = () => {
		form.validateFields().then((data) => {
			if (!data.email && !data.phone) {
				return form.setFields([
					{ touched: true, name: 'email', errors: ['请输入邮箱'] },
				]);
			}

			requestAddConcat(data as any)
				.then(() => {
					requestConcatList();
					message.success('新增联系人成功');
					handleSwitchAddModal();
				})
				.catch((error) => {
					message.error(error.message);
				});
		});
	};
	const handleSwitchAddModal = () => {
		setModalState((preState) => ({ ...preState, visible: !preState.visible }));
	};
	return (
		<>
			<PageHeader title='告警联系人'></PageHeader>

			<Row justify='end' gutter={[0, 24]}>
				<Button onClick={handleSwitchAddModal}>新增</Button>
			</Row>
			<Table
				rowKey={(record) => record.id}
				columns={colums}
				dataSource={concatListState.dataSource}
				pagination={false}></Table>
			<Modal
				onCancel={handleSwitchAddModal}
				visible={addModalState.visible}
				title='告警联系人'
				onOk={handleSubmit}
				okButtonProps={{ loading: addState.loading }}>
				<Form form={form}>
					<Form.Item name='email' label='邮箱' labelCol={{ span: 4 }}>
						<Input placeholder='请输入邮箱'></Input>
					</Form.Item>
					<Form.Item name='phone' label='手机号' labelCol={{ span: 4 }}>
						<Input placeholder='请输入手机号'></Input>
					</Form.Item>
				</Form>
			</Modal>

			<Modal
				onCancel={() => {
					handleUpdateModalState((preState) => ({
						...preState,
						values: {},
						visible: false,
					}));
				}}
				visible={updateModalState.visible}
				title='告警联系人'
				onOk={handleSubmitChange}
				okButtonProps={{ loading: changeState.loading }}>
				<Form form={updateForm}>
					<Form.Item name='email' label='邮箱' labelCol={{ span: 4 }}>
						<Input placeholder='请输入邮箱'></Input>
					</Form.Item>
					<Form.Item name='phone' label='手机号' labelCol={{ span: 4 }}>
						<Input placeholder='请输入手机号'></Input>
					</Form.Item>
				</Form>
			</Modal>
		</>
	);
};
export default warnConcat;
