import { useState, useEffect } from 'react'
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
import SelectDeptTree from '@/components/SelectDeptTree'
import SelectOrganTree from '@/components/SelectOrganTree'
import datadictionary from '@/utils/dataDictionary'
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
import { NumberInput } from '@/components/NumberInput'
import styles from '../BasicInformation.less'
import style from '@/global.less'
import dayjs from 'dayjs'
import { formatDate } from '@/utils/formatUtils'

const { Item: FormItem } = Form
const { TextArea } = Input
const dictData = datadictionary

//新增表单
let getDeptTreeBySelectTree
let getOrganTreeBySelectTree

const PersonnelCreateForm = (props => {
    const [form] = Form.useForm()

    const {
        modalVisible,
        handleAdd,
        handleModalVisible,
        loading,
        dispatch,
        selectDeptTree,
        selectOrganTree
    } = props

    // 清空和初始化逻辑可保留
    useEffect(() => {
        form.resetFields();
    }, [modalVisible])

    const okHandle = () => {
        form.validateFields()
            .then(fieldsValue => {
                form.resetFields()
                handleAdd(fieldsValue)
            })
            .catch(() => { })
    }

    const afterClose = () => {
        form.resetFields();
    }

    return (
        <Modal
            width={550}
            bodyStyle={{ minHeight: '200px' }}
            className={styles.createForm}
            centered
            destroyOnClose
            title='新增人员'
            open={modalVisible}
            onOk={okHandle}
            onCancel={() => handleModalVisible()}
            afterClose={afterClose}
            confirmLoading={loading}
            footer={[
                <button
                    key="cancel"
                    onClick={() => handleModalVisible()}
                    className={styles['modal-cancel-btn']}
                >取消</button>,
                <button
                    key="submit"
                    onClick={okHandle}
                    className={styles['modal-ok-btn']}
                >确定</button>
            ]}
        >
            <Form
                form={form}
                requiredMark={false}
                style={{ marginTop: 30 }}
            >
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="姓　　名"
                            name="name"
                            rules={[{ required: true, message: '请输入姓名' }]}
                        >
                            <Input placeholder="输入姓名" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="身份证号"
                            name="idNumber"
                            rules={[{ required: true, message: '请输入身份证号' }]}
                        >
                            <Input placeholder="请输入身份证号" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="所属公司"
                            name="company"
                            rules={[{ required: true, message: '请输入公司名' }]}
                        >
                            <Input placeholder="请输入公司名" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '请输入手机号' }]}
                        >
                            <Input placeholder="请输入手机号" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            label="人员分类"
                            name="personType"
                            rules={[{ required: true, message: '请选择人员分类' }]}
                        >
                            <Select placeholder="请选择" options={[]} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="合同状态"
                            name="contractStatus"
                            rules={[{ required: true, message: '请选择合同状态' }]}
                        >
                            <Select placeholder="请选择" options={[]} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
})

export default PersonnelCreateForm
