import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, Space, Modal, Select, Switch } from 'antd';
import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './ExhaustEmissionStandard.less';

const ExhaustEmissionStandard = () => {
    const [form] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentImage, setCurrentImage] = useState(null);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 12,
    });
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [dataSource, setDataSource] = useState([
        // 图片表格数据
        {
            key: 1,
            region: '2025-08-29',
            source: '赵喜行',
            outletName: '郑叶飞',
            outletNumber: '塞隆风湿酒(同仁堂)',
            monitorTime: '35.236.217.212',
            smokeHumidity: '6Dd888D-3d',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 2,
            region: '2025-09-02',
            source: '王嘉琪',
            outletName: '赵子峰',
            outletNumber: '复方水杨酸甲酯乳膏(曼秀雷敦)',
            monitorTime: '65.177.48.116',
            smokeHumidity: '3D8d4ffa-bD',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 3,
            region: '2025-09-06',
            source: '王嘉琪',
            outletName: '郑清予',
            outletNumber: '口炎清颗粒(大神)',
            monitorTime: '111.161.135.125',
            smokeHumidity: 'f9b89EB2-ae9',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 4,
            region: '2025-09-06',
            source: '王思琪',
            outletName: '赵玉',
            outletNumber: '烧结砖(茂祥)',
            monitorTime: '162.208.135.147',
            smokeHumidity: '0ca9DB56-DA',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 5,
            region: '2025-08-31',
            source: '吴子富',
            outletName: '钱茂莉',
            outletNumber: '云南白药(云南白药)',
            monitorTime: '138.6.246.181',
            smokeHumidity: 'bf0173D6-3cf',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 6,
            region: '2025-08-30',
            source: '何凤景',
            outletName: '赵海洲',
            outletNumber: '鹏程书局(修正)',
            monitorTime: '134.80.173.128',
            smokeHumidity: '55aACD54-69',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 7,
            region: '2025-08-29',
            source: '李计颖',
            outletName: '李海洲',
            outletNumber: '复方醋酸甲羟孕酮颗粒(妇复春)',
            monitorTime: '218.169.25.43',
            smokeHumidity: 'b0a849eD-9e',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 8,
            region: '2025-08-26',
            source: '赵年光',
            outletName: '钱海莉',
            outletNumber: '杜龙药酒',
            monitorTime: '54.218.80.84',
            smokeHumidity: 'b1D5cFbD-EA',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 9,
            region: '2025-08-21',
            source: '王凤妍',
            outletName: '李金泽',
            outletNumber: '和兴白花油(和兴白花油)',
            monitorTime: '222.1.18.173',
            smokeHumidity: 'fbc9cb69-F8B',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 10,
            region: '2025-09-09',
            source: '赵芳',
            outletName: '何能',
            outletNumber: '柔来期明含片(哈喽舒)',
            monitorTime: '136.200.182.22',
            smokeHumidity: 'e4b6adE6-8C1',
            smokeFlow: '重量',
            smokePressure: '2',
            o2Content: 't',
            o2Content2: 't',
        },
        {
            key: 5,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 6,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 7,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 8,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 9,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 10,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 11,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 12,
            recordTime: '2025-08-29',
            recorder: '赵喜行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            equipmentModel: '6Ddb888D-3d7A-305E-3372-109F7154Ad3A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantFlueGasVolume: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            exhaustStackHeight: '2',
            exhaustTemperature: '50.48',
            pressure: '100',
            emissionTime: '115',
            powerConsumption: '39',
            byproductName: '氮气',
            byproductProduction: '2',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
    ]);

    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const start = (current - 1) * pageSize;
        const end = start + pageSize;
        return dataSource.slice(start, end);
    };

    const columns = [
        {
            title: (
                <input
                    type="checkbox"
                    checked={selectedRowKeys.length === getCurrentPageData().length && getCurrentPageData().length > 0}
                    onChange={(e) => handleSelectAll(e.target.checked)}
                />
            ),
            key: 'selection',
            width: 60,
            align: 'center',
            fixed: 'left',
            render: (_, record) => (
                <input
                    type="checkbox"
                    checked={selectedRowKeys.includes(record.key)}
                    onChange={(e) => {
                        if (e.target.checked) {
                            setSelectedRowKeys([...selectedRowKeys, record.key]);
                        } else {
                            setSelectedRowKeys(selectedRowKeys.filter(key => key !== record.key));
                        }
                    }}
                />
            ),
        },
        { title: '所属区县', dataIndex: 'region', key: 'region', align: 'left' },
        { title: '污染源', dataIndex: 'source', key: 'source', align: 'left' },
        { title: '排口名称', dataIndex: 'outletName', key: 'outletName', align: 'left' },
        { title: '排口编号', dataIndex: 'outletNumber', key: 'outletNumber', align: 'left' },
        { title: '监测时间', dataIndex: 'monitorTime', key: 'monitorTime', align: 'left' },
        { title: '烟气湿度', dataIndex: 'smokeHumidity', key: 'smokeHumidity', align: 'left' },
        { title: '烟气流速', dataIndex: 'smokeFlow', key: 'smokeFlow', align: 'left' },
        { title: '烟气压力', dataIndex: 'smokePressure', key: 'smokePressure', align: 'left' },
        { title: 'O₂含量', dataIndex: 'o2Content', key: 'o2Content', align: 'left' },
        { title: 'O₂含量', dataIndex: 'o2Content2', key: 'o2Content2', align: 'left' },
    ];

    const handleSearch = (values) => {
        console.log('搜索参数:', values);
        // TODO: 实现搜索功能
    };

    const handleReset = () => {
        form.resetFields();
        // TODO: 重置搜索
    };

    const handleView = (record) => {
        console.log('查看:', record);
        // TODO: 实现查看功能
    };

    const handleEdit = (record) => {
        console.log('编辑:', record);
        // TODO: 实现编辑功能
    };

    const handleDownload = (record) => {
        console.log('下载:', record);
        // TODO: 实现下载功能
    };

    const handleDelete = (record) => {
        console.log('删除:', record);
        // TODO: 实现删除功能
    };

    const handleAdd = () => {
        console.log('新增');
        // TODO: 实现新增功能
    };

    const handleImport = () => {
        console.log('导入');
        // TODO: 实现导入功能
    };

    const handleQuery = () => {
        console.log('查询');
        // TODO: 实现查询功能
    };

    const handleTableChange = (pagination) => {
        setPagination(pagination);
    };

    // 全选功能
    const handleSelectAll = (checked) => {
        if (checked) {
            const allKeys = getCurrentPageData().map(item => item.key);
            setSelectedRowKeys(allKeys);
        } else {
            setSelectedRowKeys([]);
        }
    };

    // 批量操作
    const handleBatchOperation = (operation) => {
        console.log(`批量${operation}:`, selectedRowKeys);
        // TODO: 实现批量操作功能
    };

    return (
        <div className={styles.wasteGasContainer}>
            {/* 第一块：操作按钮和筛选条件 */}
            <div className={styles.searchSection}>
                <div className={styles.leftButtons}>
                    <Button
                        type="primary"
                        icon={<PlusOutlined />}
                        onClick={handleAdd}
                        className={styles.addButton}
                    >
                        新增
                    </Button>
                    <Button
                        // icon={<UploadOutlined />} 
                        onClick={handleImport}
                        className={styles.importButton}
                    >
                        上传
                    </Button>
                    <Button
                        // icon={<UploadOutlined />} 
                        onClick={() => handleBatchOperation('下载')}
                        className={styles.importButton}
                        disabled={selectedRowKeys.length === 0}
                    >
                        批量下载
                    </Button>
                    <div className={styles.switchContainer}>
                        <span>仅显示异常信息</span>
                        <Switch />
                    </div>
                </div>

                <div className={styles.rightControls}>
                    <Select
                        defaultValue={'1'}
                        placeholder="请选择"
                        style={{ width: 140, height: 28 }}
                        allowClear
                        className={styles.selectInput}
                        options={
                            [
                                { value: '1', label: 'xx监测点' },
                            ]
                        }
                    />
                    <Select
                        defaultValue={'1'}
                        placeholder="请选择"
                        style={{ width: 140, height: 28 }}
                        allowClear
                        className={styles.selectInput}
                        options={
                            [
                                { value: '1', label: 'xx污染物' },
                            ]
                        }
                    />
                    <Select
                        defaultValue={'1'}
                        placeholder="请选择"
                        style={{ width: 140, height: 28 }}
                        allowClear
                        className={styles.selectInput}
                        options={
                            [
                                { value: '1', label: '本月' },
                            ]
                        }
                    />
                    <Button
                        onClick={handleQuery}
                        className={styles.queryButton}
                    >
                        查询
                    </Button>
                    <Button
                        onClick={handleReset}
                        className={styles.resetButton}
                    >
                        重置
                    </Button>
                </div>
            </div>

            {/* 第二块：表格 */}
            <div className={styles.tableSection}>
                <StandardTable
                    columns={columns}
                    data={{
                        list: getCurrentPageData(),
                        pagination: {
                            ...pagination,
                            total: dataSource.length,
                            showTotal: (total) => `共 ${total} 条`,
                            showSizeChanger: false,
                        }
                    }}
                    onChange={handleTableChange}
                    scroll={{ x: 'max-content' }}
                />
            </div>

            {/* 图片弹窗 */}
            <Modal
                open={isModalVisible}
                onCancel={() => setIsModalVisible(false)}
                footer={null}
                closeIcon={<CloseOutlined style={{ color: '#fff', fontSize: 20 }} />}
                width="auto"
                centered
                styles={{
                    mask: { backgroundColor: '#10101080' },
                    content: { padding: 0, background: 'transparent', boxShadow: 'none' }
                }}
            >
                {currentImage && <img src={currentImage} alt="许可证" style={{ width: '100%', display: 'block' }} />}
            </Modal>
        </div>
    );
};

export default ExhaustEmissionStandard;
