
import React, { useState, useEffect } from 'react';
import { Card, Result, Select, Button } from 'antd';
import { CheckCircleOutlined, ExportOutlined } 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';

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: 5,
        total: 0,
    });




    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 5;
                const number = (page - 1) * pageSize + index + 1;
                return `0${number}`.slice(-2);
            }
        },
        {
            title: '设备编号',
            dataIndex: 'deviceId',
            key: 'deviceId',
            width: 140,
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName',
            width: 110,
        },
        {
            title: '型号规格',
            dataIndex: 'modelSpec',
            key: 'modelSpec',
            width: 140,
        },
        {
            title: '安装位置',
            dataIndex: 'installLocation',
            key: 'installLocation',
            width: 200,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 80,
            render: (text) => {
                const statusMap = {
                    '故障': { color: '#FF4D4F', bg: '#FFF2F0' },
                    '预警': { color: '#FAAD14', bg: '#FFF3E9' },
                    '正常': { color: '#44BB5F', bg: '#D8F7DE' }
                };
                const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
                return (
                    <span style={{
                        color: status.color,
                        backgroundColor: status.bg,
                        padding: '2px 8px',
                        borderRadius: '4px',
                        fontSize: '12px'
                    }}>
                        {text}
                    </span>
                );
            }
        },
        {
            title: '最后维护',
            dataIndex: 'lastMaintenance',
            key: 'lastMaintenance',
            width: 150,
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            render: (_, record) => (
                <div>
                    <Button type="link" size="small" style={{ 
                        padding: '2px 8px', 
                        fontSize: 12, 
                        marginRight: 8,
                        border: '1px solid #E6E9FB',
                        backgroundColor: 'transparent',
                        borderRadius: '4px'
                    }}>
                        编辑
                    </Button>
                    <Button type="link" size="small" style={{ 
                        padding: '2px 8px', 
                        fontSize: 12,
                        border: '1px solid #E6E9FB',
                        backgroundColor: 'transparent',
                        borderRadius: '4px'
                    }}>
                        详情
                    </Button>
                </div>
            ),
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '001',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼1层大厅',
            status: '故障',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '2',
            id: '002',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼3层 东区',
            status: '预警',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '3',
            id: '003',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '4',
            id: '004',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '故障',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '5',
            id: '005',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '6',
            id: '006',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '预警',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '7',
            id: '007',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '故障',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '8',
            id: '008',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '9',
            id: '009',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '预警',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '10',
            id: '010',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '故障',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '11',
            id: '011',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '12',
            id: '012',
            deviceId: 'HQ-XF-01-001',
            deviceName: '消防水泵',
            modelSpec: 'XBD5.0/30-125',
            installLocation: '总部大楼地下一层',
            status: '预警',
            lastMaintenance: '2025-09-10',
        },
    ];

    // 初始化数据
    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,
        }));
    };

    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}>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}>258</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}>347</div>
                            </div>
                        </div>

                        {/* 块4 */}
                        <div className={`${styles.blockItem} ${styles.block4}`}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>环保总人数</div>
                                <div className={styles.blockNumber}>258</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}>258</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}>258</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.leftBlock}>
                        {/* 第一行块 - 蓝色方块加标题 */}
                        <div className={styles.leftBlockTitle}>
                            <div className={styles.titleIcon}></div>
                            <div>预警信息</div>
                        </div>

                        <div className={styles.developmentContainer}>
                            <div className={styles.developmentBlock1}>
                                <div className={styles.leftContent}>
                                    <div className={styles.mainText}>灭火器压力不足</div>
                                    <div className={styles.subText}>2号楼3层 丨 15分钟前</div>
                                </div>
                                <div className={styles.rightContent}>
                                    <div className={styles.importantTag}>重要</div>
                                </div>
                            </div>
                            <div className={styles.developmentBlock1}>
                                <div className={styles.leftContent}>
                                    <div className={styles.mainText}>烟雾探测器电池低电量</div>
                                    <div className={styles.subText}>1号楼5层 丨 1小时前</div>
                                </div>
                                <div className={styles.rightContent}>
                                    <div className={styles.importantTag}>重要</div>
                                </div>
                            </div>
                            <div className={styles.developmentBlock1}>
                                <div className={styles.leftContent}>
                                    <div className={styles.mainText}>消防栓维护到期</div>
                                    <div className={styles.subText}>3号楼1层 丨 2小时前</div>
                                </div>
                                <div className={styles.rightContent}>
                                    <div className={styles.normalTag}>一般</div>
                                </div>
                            </div>
                            <div className={styles.developmentBlock1}>
                                <div className={styles.leftContent}>
                                    <div className={styles.mainText}>应急照明故障3</div>
                                    <div className={styles.subText}>地下停车场 丨 3小时前</div>
                                </div>
                                <div className={styles.rightContent}>
                                    <div className={styles.normalTag}>一般</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className={styles.rightBlock}>
                        {/* 表格 */}
                        <div className={styles.tableHeader}>
                            <div className={styles.tableTitle}>
                                <div className={styles.titleIcon}></div>
                                <div>消防设备台账</div>
                            </div>

                            <div className={styles.tableActions}>
                                <button className={styles.actionButton} onClick={handleAddDevice}>
                                    <span className={styles.buttonIcon}>+</span>
                                    <span>新增设备</span>
                                </button>
                                <button className={styles.actionButton} onClick={handleExportData}>
                                    <span className={styles.buttonIcon}><ExportOutlined /></span>
                                    <span>导出数据</span>
                                </button>
                            </div>
                        </div>

                        {/* 表格 */}
                        <div className={styles.tableContainer}>
                            <StandardTable
                                columns={columns}
                                data={{
                                    list: getCurrentPageData(),
                                    pagination: pagination
                                }}
                                loading={loading}
                                selectionType="checkbox"
                                onSelectRow={onSelectChange}
                                onChange={handleTableChange}
                                pagination={{
                                    ...pagination,
                                    showSizeChanger: false,
                                    showQuickJumper: true,
                                    showTotal: (total, range) =>
                                        `共 ${total} 条`,
                                }}
                                // scroll={{ x: 1200 }}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );  
};

export default EnvironmentalPersonnelManagement; 
