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 BasicInfoCreateForm = (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}
                // layout='vertical'
                requiredMark={false}
                style={{ marginTop: 30 }}
            >
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="项目名称"
                            name="projectName"
                            rules={[{ required: true, message: '请输入项目名称' }]}
                        >
                            <Input placeholder="输入项目名称" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            label="地理信息"
                            name="location"
                            rules={[{ required: true, message: '请输入位置信息' }]}
                        >
                            <Input placeholder="请输入位置信息" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            label="占地面积"
                            name="area"
                            rules={[{ required: true, message: '请输入面积信息' }]}
                        >
                            <Input
                                placeholder="面积信息"
                                addonAfter="m²"
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="职业人数"
                            name="peopleCount"
                            rules={[{ required: true, message: '请输入人数' }]}
                        >
                            <Input placeholder="输入数量" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            label="组织机构"
                            name="org"
                            rules={[{ required: true, message: '请选择组织机构' }]}
                        >
                            <Select
                                placeholder="请选择"
                                options={[
                                    { label: '机构A', value: 'A' },
                                    { label: '机构B', value: 'B' }
                                ]}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="安全等级"
                            name="safeLevel"
                            rules={[{ required: true, message: '请选择安全等级' }]}
                        >
                            <Select
                                placeholder="请选择"
                                options={[
                                    { label: '一级', value: '1' },
                                    { label: '二级', value: '2' },
                                    { label: '三级', value: '3' }
                                ]}
                            />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    )
})

export default BasicInfoCreateForm
