import React, { PureComponent } from 'react';
import {
    Modal,
    Form,
    Input,
    Select,
    InputNumber,
    Row,
    Col,
    message,
    TreeSelect
} from 'antd';
import {
    ApartmentOutlined,
    UserOutlined,
    TeamOutlined,
    FileTextOutlined,
    NumberOutlined
} from '@ant-design/icons';

const { Option } = Select;

class DeptMaintainAdd extends PureComponent {
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
    }

    // 提交表单
    handleSubmit = (values) => {
        console.log('新增部门信息:', values);
        
        // 这里可以调用API接口保存数据
        // 模拟保存成功
        message.success('新增部门成功！');
        
        // 重置表单
        this.formRef.current?.resetFields();
        
        // 调用父组件的回调函数
        if (this.props.onSuccess) {
            this.props.onSuccess(values);
        }
        
        // 关闭弹窗
        this.handleCancel();
    };

    // 取消操作
    handleCancel = () => {
        // 重置表单
        this.formRef.current?.resetFields();
        
        // 调用父组件的关闭回调
        if (this.props.onCancel) {
            this.props.onCancel();
        }
    };

    render() {
        const { visible, loading = false } = this.props;

        return (
            <Modal
                title="新增部门"
                open={visible}
                onOk={() => this.formRef.current?.submit()}
                onCancel={this.handleCancel}
                width={700}
                confirmLoading={loading}
                destroyOnClose={true}
                maskClosable={false}
            >
                <Form
                    ref={this.formRef}
                    layout="vertical"
                    onFinish={this.handleSubmit}
                    initialValues={{
                        status: '1',
                        level: '2'
                    }}
                >
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="deptName"
                                label="部门名称"
                                rules={[
                                    { required: true, message: '请输入部门名称' },
                                    { min: 2, max: 20, message: '部门名称长度为2-20个字符' }
                                ]}
                            >
                                <Input
                                    placeholder="请输入部门名称"
                                    prefix={<ApartmentOutlined />}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="deptCode"
                                label="部门编码"
                                rules={[
                                    { required: true, message: '请输入部门编码' },
                                    { pattern: /^[A-Z0-9]{3,10}$/, message: '部门编码为3-10位大写字母和数字' }
                                ]}
                            >
                                <Input
                                    placeholder="请输入部门编码，如：TECH001"
                                    prefix={<NumberOutlined />}
                                    style={{ textTransform: 'uppercase' }}
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="parentDept"
                                label="上级部门"
                                rules={[
                                    { required: false, message: '请选择上级部门' }
                                ]}
                            >
                                <TreeSelect
                                    placeholder="请选择上级部门"
                                    allowClear
                                    treeDefaultExpandAll
                                    treeData={[
                                        {
                                            title: '飞利信科技有限公司',
                                            value: '0-0',
                                            children: [
                                                { title: '技术部', value: '0-0-0' },
                                                { title: '产品部', value: '0-0-1' },
                                                { title: '运营部', value: '0-0-2' },
                                                { title: '财务部', value: '0-0-3' },
                                                { title: '人事部', value: '0-0-4' },
                                            ]
                                        }
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="deptHead"
                                label="部门负责人"
                                rules={[
                                    { required: true, message: '请输入部门负责人' }
                                ]}
                            >
                                <Input
                                    placeholder="请输入部门负责人姓名"
                                    prefix={<UserOutlined />}
                                />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item
                                name="level"
                                label="部门层级"
                                rules={[
                                    { required: true, message: '请选择部门层级' }
                                ]}
                            >
                                <Select placeholder="请选择部门层级">
                                    <Option value="1">一级部门</Option>
                                    <Option value="2">二级部门</Option>
                                    <Option value="3">三级部门</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                name="status"
                                label="状态"
                                rules={[
                                    { required: true, message: '请选择状态' }
                                ]}
                            >
                                <Select placeholder="请选择状态">
                                    <Option value="1">启用</Option>
                                    <Option value="0">禁用</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>

                    <Row gutter={16}>
                        <Col span={24}>
                            <Form.Item
                                name="description"
                                label="部门描述"
                                rules={[
                                    { max: 200, message: '描述不能超过200个字符' }
                                ]}
                            >
                                <Input.TextArea
                                    placeholder="请输入部门职责描述"
                                    rows={3}
                                    showCount
                                    maxLength={200}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        );
    }
}

export default DeptMaintainAdd;
