import React, {
	Fragment,
	useMemo,
	useCallback,
	useState,
	useEffect,
} from 'react';
import {
	Table,
	Form,
	Select,
	Input,
	Row,
	Col,
	Button,
	Space,
	message,
	Modal,
} from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { useUnitList } from '../../hooks/uint';
import {
	useMangerPersonList,
	MangerPersonRecordProps,
	InsertDataTye,
	useAddMangerPerson,
	useUpdateMangerPerson,
	useRemoveMangerPerson,
} from '../../hooks/manger';
import {
	CERTIFICATE_TYPE,
	PERSON_TYPE,
	PARTICIPATION_TYPE,
} from '../../contants';
import MangerFormModal from './components/mangerForm';
const colums: ColumnProps<MangerPersonRecordProps>[] = [
	{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '手机号',
		dataIndex: 'phone',
		key: 'phone',
	},
	{
		title: '证件类型',
		dataIndex: 'cert_type',
		key: 'cert_type',
		render: (value) => CERTIFICATE_TYPE[value],
	},
	{
		title: '证件号',
		dataIndex: 'cert_num',
		key: 'cert_num',
	},
	{
		title: '人员类型',
		dataIndex: 'p_type',
		key: 'p_type',
		render: (value) => PERSON_TYPE[value],
	},
	{
		title: '参建单位名称',
		dataIndex: 'corp_name',
		key: 'corp_name',
	},
	{
		title: '参建单位类型',
		dataIndex: 'corp_type',
		key: 'corp_type',
		render: (value) => PARTICIPATION_TYPE[value].name,
	},
];
const pageMangerPerson: React.FC = (props) => {
	const [searchState, handleChangeSearchState] = useState({
		page: 1,
		filter: '',
		corp_id: -1,
	});
	const [modalState, changeModalState] = useState<{
		visible: boolean;
		values?: MangerPersonRecordProps;
	}>({
		visible: false,
	});
	const { state: unitListState, request: requestUnitList } = useUnitList();
	const {
		state: deleteState,
		request: requestDeleteMangerPerson,
	} = useRemoveMangerPerson();
	const {
		state: updateState,
		request: requestUpdateMangerPerson,
	} = useUpdateMangerPerson();
	const {
		state: addPersonState,
		request: requestAddPerson,
	} = useAddMangerPerson();
	const {
		state: mangerListState,
		request: requestMangerList,
	} = useMangerPersonList();
	// 请求建设单位数据
	React.useEffect(() => {
		requestUnitList();
	}, []);
	// 请求人员列表
	useEffect(() => {
		requestMangerList(searchState);
	}, [JSON.stringify(searchState)]);
	// 切换modal
	const handleChangeModalVisible = useCallback(() => {
		changeModalState((preState) => ({
			...preState,
			visible: !preState.visible,
			values: preState.visible ? undefined : preState.values,
		}));
	}, []);
	// 提交数据
	const handleSubmit = useCallback(
		async (values: MangerPersonRecordProps | InsertDataTye) => {
			try {
				if (!values['id']) {
					await requestAddPerson(values);
				} else {
					await requestUpdateMangerPerson(values as MangerPersonRecordProps);
				}
			} catch (error) {
				message.error(error.message);
				return;
			}
			message.success('更新人员信息成功');
			handleChangeModalVisible();
			requestMangerList(searchState);
		},
		[handleChangeModalVisible, requestAddPerson, requestUpdateMangerPerson]
	);
	const handleDeletePerson = useCallback((record: MangerPersonRecordProps) => {
		Modal.confirm({
			title: '确认删除',
			content: `确认删除${record.name}管理人员`,
			onOk: () => {
				return requestDeleteMangerPerson({ id: record.id })
					.then(() => {
						message.success('删除人员成功');
						requestMangerList(searchState);
					})
					.catch((error) => {
						message.error(error.message);
					});
			},
			okButtonProps: {
				loading: deleteState.loading,
			},
		});
	}, []);
	const tableColums = useMemo(() => {
		return colums.concat({
			title: '操作',
			render: (_, record) => {
				return (
					<Space>
						<Button
							type='primary'
							onClick={() => {
								changeModalState((preState) => ({
									...preState,
									visible: true,
									values: record,
								}));
							}}>
							更新
						</Button>
						<Button danger onClick={() => handleDeletePerson(record)}>
							删除
						</Button>
					</Space>
				);
			},
		});
	}, [handleChangeModalVisible, handleDeletePerson]);
	return (
		<Fragment>
			<Row gutter={[0, 24]} justify='space-between'>
				<Col span={16}>
					<Form
						layout='inline'
						onFinish={(searchForm) =>
							handleChangeSearchState({
								corp_id: -1,
								...searchForm,
								page: 1,
							})
						}>
						<Form.Item
							label = "关键字"
							name='filter'
							children={
								<Input autoComplete='off' placeholder='姓名'></Input>
							}></Form.Item>
						<Form.Item
							name='corp_id'
							children={
								<Select
									style={{
										width: 200,
									}}
									placeholder='请选择参建单位'>
									{unitListState.dataSource.map((unit) => {
										return (
											<Select.Option value={unit.id} key={unit.id}>
												{unit.name}
											</Select.Option>
										);
									})}
								</Select>
							}></Form.Item>
						<Space>
							<Button htmlType='submit' type='primary'>
								搜索
							</Button>
							<Button htmlType='reset'>清空</Button>
						</Space>
					</Form>
				</Col>
				<Col>
					<Button onClick={handleChangeModalVisible}>添加</Button>
				</Col>
			</Row>
			{modalState.visible ? (
				<MangerFormModal
					details={modalState.values}
					visible={modalState.visible}
					onOk={handleSubmit}
					onCancel={handleChangeModalVisible}
					corps={unitListState.dataSource}></MangerFormModal>
			) : null}

			<Table
				pagination={{
					hideOnSinglePage: true,
					onChange: (page) =>
						handleChangeSearchState((preState) => ({
							...preState,
							page,
						})),
				}}
				rowKey={(record) => record.id}
				loading={mangerListState.loading}
				columns={tableColums}
				dataSource={mangerListState.dataSource}></Table>
		</Fragment>
	);
};
export default pageMangerPerson;
