import { useEffect } from 'react'
import { Col, Form, Input, Modal, Row, Select } from 'antd'
import styles from '../BasicInformation.less'

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

    const {
        updateModalVisible,
        handleUpdate,
        handleUpdateModalVisible,
        loading,
        values = {}
    } = props

    useEffect(() => {
        if (updateModalVisible) {
            form.setFieldsValue(values)
        }
    }, [updateModalVisible, values, form])

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

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

    return (
        <Modal
            width={550}
            bodyStyle={{ minHeight: '200px' }}
            className={styles.createForm}
            centered
            destroyOnClose
            title='修改项目'
            open={updateModalVisible}
            onOk={okHandle}
            onCancel={() => handleUpdateModalVisible()}
            afterClose={afterClose}
            confirmLoading={loading}
            footer={[
                <button
                    key="cancel"
                    onClick={() => handleUpdateModalVisible()}
                    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="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 BasicInfoUpdateForm