
import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { Card, Result, Select, Button, Drawer, Upload, Input, Modal, Form, DatePicker, Row, Col } from 'antd';
import { CheckCircleOutlined, ExportOutlined, PlusOutlined, UploadOutlined, UserOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './EnvironmentalPersonnelManagement.less';
// import './EnvironmentalPersonnelManagement.less';

import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
// import eqicon1 from '@/assets/business_basic/eqicon1.png';
// import eqicon2 from '@/assets/business_basic/eqicon2.png';
// import eqicon3 from '@/assets/business_basic/eqicon3.png';
// import eqicon4 from '@/assets/business_basic/eqicon4.png';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
import editIcon from '@/assets/business_envinformation/editicon.svg';
import deleteIcon from '@/assets/business_envinformation/deleteicon.svg';
import personnelIcon from '@/assets/business_envinformation/personnel.svg';





const EnvironmentalPersonnelManagement = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [selectedRecord, setSelectedRecord] = useState(null);
    const [modalVisible, setModalVisible] = useState(false);
    const [form] = Form.useForm();
    const [editDrawerVisible, setEditDrawerVisible] = useState(false);
    const [editForm] = Form.useForm();




    // 表格列定义
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: 80,
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 10;
                const number = (page - 1) * pageSize + index + 1;
                return number;
            }
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: 120,
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
            width: 120,
            filters: [
                { text: '环保管理', value: '环保管理' },
                { text: '技术部', value: '技术部' },
                { text: '生产部', value: '生产部' },
                { text: '质量部', value: '质量部' },
            ],
            onFilter: (value, record) => record.department === value,
        },
        {
            title: '岗位',
            dataIndex: 'position',
            key: 'position',
            width: 120,
            filters: [
                { text: '污水化验', value: '污水化验' },
                { text: '环境监测', value: '环境监测' },
                { text: '环保工程师', value: '环保工程师' },
                { text: '安全员', value: '安全员' },
                { text: '技术员', value: '技术员' },
            ],
            onFilter: (value, record) => record.position === value,
        },
        {
            title: '入职时间',
            dataIndex: 'joinDate',
            key: 'joinDate',
            width: 120,
            sorter: (a, b) => {
                // 将日期字符串转换为Date对象进行比较
                const dateA = new Date(a.joinDate);
                const dateB = new Date(b.joinDate);
                return dateA - dateB;
            },
        },
        {
            title: '岗位职责',
            dataIndex: 'responsibility',
            key: 'responsibility',
            width: 200,
        },
        {
            title: '联系方式',
            dataIndex: 'contact',
            key: 'contact',
            width: 150,
        },
        {
            title: '操作',
            key: 'action',
            width: 180,
            render: (_, record) => (
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px' }}>
                    <img 
                        src={viewIcon} 
                        alt="查看" 
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleView(record)}
                    />
                    <img 
                        src={editIcon} 
                        alt="编辑" 
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleEdit(record)}
                    />
                    <img src={deleteIcon} alt="删除" style={{ width: 16, height: 16, cursor: 'pointer' }} />
                </div>
            ),
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '001',
            name: '吴振峰',
            department: '环保管理',
            position: '污水运行',
            joinDate: '2025-09-02',
            responsibility: '保障污水设备运行、处理故障',
            contact: '13321493732',
            employeeId: '434545',
            gender: '男',
            birthDate: '2025-08-08',
            idCard: '340802199809050811',
            address: '西辛南区46号楼2单元101室',
            other: '暂无'
        },
        {
            key: '2',
            id: '002',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138002',
        },
        {
            key: '3',
            id: '003',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138003',
        },
        {
            key: '4',
            id: '004',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138004',
        },
        {
            key: '5',
            id: '005',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138005',
        },
        {
            key: '6',
            id: '006',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138006',
        },
        {
            key: '7',
            id: '007',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138007',
        },
        {
            key: '8',
            id: '008',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138008',
        },
        {
            key: '9',
            id: '009',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138009',
        },
        {
            key: '10',
            id: '010',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138010',
        },
        {
            key: '11',
            id: '011',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138011',
        },
        {
            key: '12',
            id: '012',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138012',
        },
        {
            key: '13',
            id: '013',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138013',
        },
        {
            key: '14',
            id: '014',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138014',
        },
        {
            key: '15',
            id: '015',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138015',
        },
        {
            key: '16',
            id: '016',
            name: '张一龙',
            department: '环保管理',
            position: '污水化验',
            joinDate: '2025-08-25',
            responsibility: '定期采样分析',
            contact: '13800138016',
        },
    ];

    // 初始化数据
    useEffect(() => {
        setPagination(prev => ({ ...prev, total: mockData.length }));
    }, []);

    // 根据分页获取当前页数据
    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const startIndex = (current - 1) * pageSize;
        const endIndex = startIndex + pageSize;
        return mockData.slice(startIndex, endIndex);
    };

    // 表格选择变化
    const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
        setSelectedRowKeys(newSelectedRowKeys);
        setSelectedRows(newSelectedRows);
    };

    // 新增设备按钮点击事件
    const handleAddDevice = () => {
        console.log('新增设备');
        // TODO: 实现新增设备逻辑
    };

    // 导出数据按钮点击事件
    const handleExportData = () => {
        console.log('导出数据');
        // TODO: 实现导出数据逻辑
    };

    // 分页变化处理
    const handleTableChange = (pagination) => {
        setPagination(prev => ({
            ...prev,
            current: pagination.current,
            pageSize: pagination.pageSize,
        }));
    };

    // 查看详情
    const handleView = (record) => {
        setSelectedRecord(record);
        setDrawerVisible(true);
    };

    // 关闭抽屉
    const handleCloseDrawer = () => {
        setDrawerVisible(false);
        setSelectedRecord(null);
    };

    // 打开新增模态框
    const handleOpenModal = () => {
        setModalVisible(true);
    };

    // 关闭新增模态框
    const handleCloseModal = () => {
        setModalVisible(false);
        form.resetFields();
    };

    // 保存新增数据
    const handleSave = () => {
        form.validateFields().then(values => {
            console.log('新增数据:', values);
            // TODO: 实现保存逻辑
            setModalVisible(false);
            form.resetFields();
        }).catch(error => {
            console.log('表单验证失败:', error);
        });
    };

    // 打开编辑抽屉
    const handleEdit = (record) => {
        console.log('点击编辑按钮，记录:', record);
        setSelectedRecord(record);
        setEditDrawerVisible(true);
        console.log('设置编辑抽屉可见:', true);
        // 设置表单初始值
        editForm.setFieldsValue({
            name: record.name,
            employeeId: record.employeeId,
            department: record.department,
            position: record.position,
            gender: record.gender,
            address: record.address,
            birthDate: record.birthDate ? moment(record.birthDate) : null,
            joinDate: record.joinDate ? moment(record.joinDate) : null,
            idCard: record.idCard,
            contact: record.contact,
            responsibility: record.responsibility,
            other: record.other
        });
    };

    // 关闭编辑抽屉
    const handleCloseEditDrawer = () => {
        setEditDrawerVisible(false);
        setSelectedRecord(null);
        editForm.resetFields();
    };

    // 保存编辑数据
    const handleEditSave = () => {
        editForm.validateFields().then(values => {
            console.log('编辑数据:', values);
            // TODO: 实现保存逻辑
            setEditDrawerVisible(false);
            editForm.resetFields();
        }).catch(error => {
            console.log('表单验证失败:', error);
        });
    };

    return (
        <div className={styles.Rcontainer}>
            {/* 第一个div - 高度20% */}
            <div className={styles.RcontainerTop}>
                <div className={styles.sectionContent}>
                    <div className={styles.blocksContainer}>
                        {/* 块1 */}
                        <div className={`${styles.blockItem} ${styles.block1}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>环保总人数</div>
                                <div className={`${styles.blockNumber} ${styles.number258}`}>258</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                        {/* 块2 */}
                        <div className={`${styles.blockItem} ${styles.block2}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>管理岗人数</div>
                                <div className={`${styles.blockNumber} ${styles.number58}`}>58</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                        {/* 块3 */}
                        <div className={`${styles.blockItem} ${styles.block3}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>污水运行人数</div>
                                <div className={`${styles.blockNumber} ${styles.number51}`}>51</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                        {/* 块4 */}
                        <div className={`${styles.blockItem} ${styles.block4}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>污水化验人数</div>
                                <div className={`${styles.blockNumber} ${styles.number28}`}>28</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                        {/* 块5 */}
                        <div className={`${styles.blockItem} ${styles.block5}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>危废管理人员</div>
                                <div className={`${styles.blockNumber} ${styles.number50}`}>50</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                        {/* 块6 */}
                        <div className={`${styles.blockItem} ${styles.block6}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>一般固体废物管理人员</div>
                                <div className={`${styles.blockNumber} ${styles.number58Second}`}>58</div>
                                <div className={styles.blockTime}>截止到 2025-09-11 07:35</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>



            {/* 第三个div - 占满剩余位置 */}
            <div className={styles.RcontainerBottom}>
                <div className={styles.sectionContent}>
                    {/* 第一行 - 表单控件 */}
                    <div className={styles.formRow}>
                        <button className={styles.addButton} onClick={handleOpenModal}>
                            <span className={styles.buttonIcon}>+</span>
                            <span>新增</span>
                        </button>
                        
                        <div className={styles.rightControls}>
                            <span className={styles.filterLabel}>筛选条件</span>
                            <Select 
                                placeholder="请选择" 
                                style={{ width: 150,  height  :28}}
                                allowClear
                            />
                            
                            <input 
                                type="text" 
                                placeholder="请输入" 
                                className={styles.searchInput}
                            />
                            <button className={styles.queryButton}>查询</button>
                            <button className={styles.resetButton}>重置</button>
                        </div>
                    </div>

                    {/* 第二行 - 表格 */}
                    <div className={styles.tableSection}>
                        <StandardTable
                            columns={columns}
                            data={{
                                list: getCurrentPageData(),
                                pagination: pagination
                            }}
                            loading={loading}
                            onChange={handleTableChange}
                            pagination={{
                                ...pagination,
                                showSizeChanger: false,
                                showQuickJumper: true,
                                showTotal: (total, range) =>
                                    `共 ${total} 条`,
                            }}
                        />
                    </div>
                </div>
            </div>
            
            {/* 侧边抽屉 */}
            <Drawer
                title={<span style={{ color: '#C3C3C3', fontWeight: 500, fontSize: '16px' }}>查看</span>}
                placement="right"
                onClose={handleCloseDrawer}
                open={drawerVisible}
                width={600}
                closable={false}
                bodyStyle={{ fontSize: '12px' }}
            >
                {selectedRecord && (
                    <div style={{ padding: '10px 0' }}>
                        {/* 姓名和头像区域 */}
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
                            <div style={{ flex: 1 }}>
                                <h2 style={{ margin: '0 0 20px 0', fontSize: '18px', fontWeight: 'bold' }}>
                                    {selectedRecord.name}
                                </h2>
                                
                                {/* 基本信息 - 两列布局 */}
                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
                                    <div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>工号：</span>
                                            <span>{selectedRecord.employeeId}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>部门：</span>
                                            <span>{selectedRecord.department}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>岗位：</span>
                                            <span>{selectedRecord.position}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>性别：</span>
                                            <span>{selectedRecord.gender}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>住址：</span>
                                            <span>{selectedRecord.address}</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>出生日期：</span>
                                            <span>{selectedRecord.birthDate}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>入职时间：</span>
                                            <span>{selectedRecord.joinDate}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>身份证号：</span>
                                            <span>{selectedRecord.idCard}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>联系方式：</span>
                                            <span>{selectedRecord.contact}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {/* 头像上传区域 */}
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '20px' }}>
                                <div style={{ 
                                    width: '90px', 
                                    height: '90px', 
                                    backgroundColor: '#D7FED2', 
                                    borderRadius: '4px',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}>
                                    <img src={personnelIcon} style={{ width: '45px', height: '51px' }} alt="personnel" />
                                </div>
                                <div style={{ fontSize: '12px', color: '#3AD327', fontWeight: 500, marginTop: '5px' }}>上传</div>
                            </div>
                        </div>
                        
                        {/* 岗位职责 */}
                        <div style={{ marginBottom: '20px' }}>
                            <div style={{ 
                                fontWeight: 'bold', 
                                marginBottom: '10px',
                                fontSize: '12px'
                            }}>
                                岗位职责
                            </div>
                            <Input.TextArea
                                value={selectedRecord.responsibility}
                                rows={3}
                                readOnly
                                style={{ backgroundColor: '#f9f9f9' }}
                            />
                        </div>
                        
                        {/* 其他 */}
                        <div>
                            <div style={{ 
                                fontWeight: 'bold', 
                                marginBottom: '10px',
                                fontSize: '12px'
                            }}>
                                其他
                            </div>
                            <Input.TextArea
                                value={selectedRecord.other}
                                rows={3}
                                readOnly
                                style={{ backgroundColor: '#f9f9f9' }}
                            />
                        </div>
                    </div>
                )}
            </Drawer>

            {/* 新增模态框 */}
            <Modal
                title="新增"
                open={modalVisible}
                onCancel={handleCloseModal}
                width={800}
                footer={[
                    <Button key="cancel" onClick={handleCloseModal} style={{ 
                        backgroundColor: '#f5f5f5', 
                        color: '#666',
                        border: '1px solid #d9d9d9',
                        borderRadius: '2px'
                    }}>
                        取消
                    </Button>,
                    <Button key="save" type="primary" onClick={handleSave} style={{ 
                        backgroundColor: '#52c41a', 
                        borderColor: '#52c41a',
                        borderRadius: '2px'
                    }}>
                        保存
                    </Button>
                ]}
                closable={true}
            >
                <Form
                    form={form}
                    layout="vertical"
                    style={{ marginTop: '20px' }}
                    className={styles.formInput}
                >
                    {/* 第一行：姓名 + 出生日期 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>姓名</span>
                            <Form.Item
                                name="name"
                                rules={[{ required: true, message: '请输入姓名' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
                            </Form.Item>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>出生日期</span>
                            <Form.Item
                                name="birthDate"
                                rules={[{ required: true, message: '请选择出生日期' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <DatePicker 
                                    placeholder="请选择" 
                                    style={{ width: '100%', height: '32px', borderRadius: '2px' }}
                                    format="YYYY-MM-DD"
                                />
                            </Form.Item>
                        </div>
                    </div>

                    {/* 第二行：工号 + 入职时间 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>工号</span>
                            <Form.Item
                                name="employeeId"
                                rules={[{ required: true, message: '请输入工号' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
                            </Form.Item>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>入职时间</span>
                            <Form.Item
                                name="joinDate"
                                rules={[{ required: true, message: '请选择入职时间' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <DatePicker 
                                    placeholder="请选择" 
                                    style={{ width: '100%', height: '32px', borderRadius: '2px' }}
                                    format="YYYY-MM-DD"
                                />
                            </Form.Item>
                        </div>
                    </div>

                    {/* 第三行：部门 + 身份证号 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>部门</span>
                            <Form.Item
                                name="department"
                                rules={[{ required: true, message: '请选择部门' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
                                    <Select.Option value="环保管理">环保管理</Select.Option>
                                    <Select.Option value="技术部">技术部</Select.Option>
                                    <Select.Option value="生产部">生产部</Select.Option>
                                    <Select.Option value="质量部">质量部</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>身份证号</span>
                            <Form.Item
                                name="idCard"
                                rules={[{ required: true, message: '请输入身份证号' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
                            </Form.Item>
                        </div>
                    </div>

                    {/* 第四行：岗位 + 联系方式 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>岗位</span>
                            <Form.Item
                                name="position"
                                rules={[{ required: true, message: '请选择岗位' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
                                    <Select.Option value="污水运行">污水运行</Select.Option>
                                    <Select.Option value="污水化验">污水化验</Select.Option>
                                    <Select.Option value="环境监测">环境监测</Select.Option>
                                    <Select.Option value="环保工程师">环保工程师</Select.Option>
                                    <Select.Option value="安全员">安全员</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>联系方式</span>
                            <Form.Item
                                name="contact"
                                rules={[{ required: true, message: '请输入联系方式' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
                            </Form.Item>
                        </div>
                    </div>

                    {/* 第五行：性别 + 照片 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', gap: '20px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>性别</span>
                            <Form.Item
                                name="gender"
                                rules={[{ required: true, message: '请选择性别' }]}
                                style={{ margin: 0, flex: 1 }}
                            >
                                <Select placeholder="请选择" style={{ height: '32px', borderRadius: '2px' }}>
                                    <Select.Option value="男">男</Select.Option>
                                    <Select.Option value="女">女</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
                            <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '60px' }}>照片</span>
                            <Button 
                                style={{ 
                                    height: '32px', 
                                    borderRadius: '4px',
                                    color: '#999999',
                                    fontSize: '12px',
                                }}
                            >
                                上传
                            </Button>
                        </div>
                    </div>

                    {/* 第六行：住址 */}
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
                        <span style={{ fontSize: '12px', color: '#999999', marginRight: '8px', minWidth: '40px' }}>住址</span>
                        <Form.Item
                            name="address"
                            rules={[{ required: true, message: '请输入住址' }]}
                            style={{ margin: 0, flex: 1 }}
                        >
                            <Input placeholder="请输入" style={{ height: '32px', borderRadius: '2px' }} />
                        </Form.Item>
                    </div>

                    {/* 岗位职责 */}
                    <Form.Item
                        label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#999999' }}>岗位职责</span>}
                        name="responsibility"
                        rules={[{ required: true, message: '请输入岗位职责' }]}
                    >
                        <Input.TextArea 
                            rows={4} 
                            placeholder="请输入岗位职责"
                            style={{ fontSize: '12px', color: '#333333', borderRadius: '2px' }}
                        />
                    </Form.Item>

                    {/* 其他 */}
                    <Form.Item
                        label={<span style={{ fontSize: '12px', fontWeight: '500', color: '#999999' }}>其他</span>}
                        name="other"
                    >
                        <Input.TextArea 
                            rows={3} 
                            placeholder="暂无"
                            style={{ fontSize: '12px', color: '#333333', borderRadius: '2px' }}
                        />
                    </Form.Item>
                </Form>
            </Modal>

            {/* 编辑抽屉 */}
            <Drawer
                title={<span style={{ color: '#C3C3C3', fontWeight: 500, fontSize: '16px' }}>编辑</span>}
                placement="right"
                onClose={handleCloseEditDrawer}
                open={editDrawerVisible}
                width={600}
                closable={false}
                destroyOnClose={true}
                bodyStyle={{ fontSize: '12px' }}
                footer={[
                    <Button key="cancel" onClick={handleCloseEditDrawer} style={{ 
                        backgroundColor: '#f5f5f5', 
                        color: '#666',
                        border: '1px solid #d9d9d9',
                        marginRight: '8px',
                        borderRadius: '2px'
                    }}>
                        取消
                    </Button>,
                    <Button key="save" type="primary" onClick={handleEditSave} style={{ 
                        backgroundColor: '#52c41a', 
                        borderColor: '#52c41a',
                        borderRadius: '2px'
                    }}>
                        保存
                    </Button>
                ]}
            >
                {selectedRecord && (
                    <div style={{ padding: '10px 0' }}>
                    {/* 姓名和头像区域 */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '30px' }}>
                        <div style={{ flex: 1 }}>
                                <h2 style={{ margin: '0 0 20px 0', fontSize: '18px', fontWeight: 'bold' }}>
                                    {selectedRecord.name}
                                </h2>
                            
                            {/* 基本信息 - 两列布局 */}
                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
                                    <div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>工号：</span>
                                            <span>{selectedRecord.employeeId}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>部门：</span>
                                            <span>{selectedRecord.department}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>岗位：</span>
                                            <span>{selectedRecord.position}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>性别：</span>
                                            <span>{selectedRecord.gender}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>住址：</span>
                                            <span>{selectedRecord.address}</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>出生日期：</span>
                                            <span>{selectedRecord.birthDate}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>入职时间：</span>
                                            <span>{selectedRecord.joinDate}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>身份证号：</span>
                                            <span>{selectedRecord.idCard}</span>
                                        </div>
                                        <div style={{ marginBottom: '10px' }}>
                                            <span style={{ color: '#666', marginRight: '8px' }}>联系方式：</span>
                                            <span>{selectedRecord.contact}</span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        
                        {/* 头像上传区域 */}
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '20px' }}>
                        <div style={{ 
                                    width: '90px', 
                                    height: '90px', 
                                    backgroundColor: '#D7FED2', 
                                    borderRadius: '4px',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                                    justifyContent: 'center'
                        }}>
                                    <img src={personnelIcon} style={{ width: '45px', height: '51px' }} alt="personnel" />
                                </div>
                                <div style={{ fontSize: '12px', color: '#3AD327', fontWeight: 500, marginTop: '5px' }}>上传</div>
                        </div>
                    </div>
                    
                    {/* 岗位职责 */}
                        <div style={{ marginBottom: '20px' }}>
                            <div style={{ 
                                fontWeight: 'bold', 
                                marginBottom: '10px',
                                fontSize: '12px'
                            }}>
                                岗位职责
                            </div>
                        <Input.TextArea 
                                value={selectedRecord.responsibility}
                                rows={3}
                                readOnly
                                style={{ backgroundColor: '#f9f9f9' }}
                            />
                        </div>
                    
                    {/* 其他 */}
                        <div>
                            <div style={{ 
                                fontWeight: 'bold', 
                                marginBottom: '10px',
                                fontSize: '12px'
                            }}>
                                其他
                            </div>
                        <Input.TextArea 
                                value={selectedRecord.other}
                            rows={3} 
                                readOnly
                                style={{ backgroundColor: '#f9f9f9' }}
                        />
                        </div>
                    </div>
                )}
            </Drawer>
        </div>
    );  
};

export default EnvironmentalPersonnelManagement; 
