import React, { useMemo, useState, useCallback, useEffect } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { FormItemProps } from 'antd/lib/form';
import {
	PARTICIPATION_TYPE,
	CERTIFICATE_TYPE,
	PERSON_TYPE,
} from '../../../../contants';
import { UnitRecordProps } from '../../../../hooks/uint';
import { MangerPersonRecordProps } from '../../../../hooks/manger';
interface Iprops {
	visible: boolean;
	corps: UnitRecordProps[];
	onCancel?: () => void;
	onOk?: (values: any) => void;
	details?: MangerPersonRecordProps;
}

const mangerForm: React.FC<Iprops> = (props) => {
	const [form] = Form.useForm();
	const { visible, corps, onOk, onCancel, details } = props;
	const [tempUnit, changeTempUnit] = useState<number>(() => {
		return details?.corp_type as number;
	});
	useEffect(() => {
		if (details && Object.keys(details).length > 0) {
			form.setFieldsValue(details);
		} else {
			form.resetFields();
		}
	}, [JSON.stringify(details)]);
	const handlePost = useCallback(() => {
		form.validateFields().then((data) => {
			onOk &&
				onOk({
					...details,
					...data,
					corp_id: corps.find((element) => element.corp_type === data.corp_type)
						?.id,
				});
		});
	}, [onOk, form]);
	return (
		<Modal
			title='人员信息'
			visible={visible}
			onOk={handlePost}
			destroyOnClose
			onCancel={() => {
				form.resetFields();
				onCancel && onCancel();
			}}>
			<Form labelCol={{ span: 4 }} form={form}>
				{[
					{
						label: '参建单位',
						name: 'corp_type',
						children: (
							<Select
								placeholder='请选择参建单位'
								onChange={(unitId) => {
									changeTempUnit(unitId as number);
								}}>
								{corps.map((unit) => {
									return (
										<Select.Option value={unit.corp_type} key={unit.id}>
											{unit.name}({PARTICIPATION_TYPE[unit.corp_type].name})
										</Select.Option>
									);
								})}
							</Select>
						),
					},
					{
						label: '人员类型',
						name: 'p_type',
						children: (
							<Select placeholder='请选择人员类型' disabled={!tempUnit}>
								{tempUnit
									? PARTICIPATION_TYPE[tempUnit].personTypes.map((type) => {
											return (
												<Select.Option value={type} key={type}>
													{PERSON_TYPE[type]}
												</Select.Option>
											);
									  })
									: null}
							</Select>
						),
					},
					{
						label: '姓名',
						name: 'name',
						children: <Input placeholder='请输入姓名'></Input>,
					},
					{
						label: '手机号',
						name: 'phone',
						children: <Input placeholder='请输入手机号'></Input>,
					},
					{
						label: '证件类型',
						name: 'cert_type',
						children: (
							<Select placeholder='请选择证件类型'>
								{Object.keys(CERTIFICATE_TYPE).map((type) => {
									return (
										<Select.Option value={Number(type)} key={type}>
											{CERTIFICATE_TYPE[type]}
										</Select.Option>
									);
								})}
							</Select>
						),
					},
					{
						label: '证件号',
						name: 'cert_num',
						children: <Input placeholder='请输入证件号'></Input>,
					},
				].map((formItem) => {
					return (
						<Form.Item
							rules={[{ required: true, message: `请输入${formItem.label}` }]}
							required
							{...formItem}
							key={formItem.name as string}></Form.Item>
					);
				})}
			</Form>
		</Modal>
	);
};
export default mangerForm;
