import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, Space, Modal, Select } from 'antd';
import { SearchOutlined, RedoOutlined, CloseOutlined, EyeOutlined, DeleteOutlined, PlusOutlined, UploadOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './WastewaterFacilityManagement.less';
import licence1 from '@/assets/business_envinformation/image1.svg';
import licence2 from '@/assets/business_envinformation/image2.svg';
import viewicon from '@/assets/business_envinformation/viewicon.svg';
import editicon from '@/assets/business_envinformation/editicon.svg';
import downloadicon from '@/assets/business_envinformation/downloadicon.svg';
import deleteicon from '@/assets/business_envinformation/deleteicon.svg';

const WastewaterFacilityManagement = () => {
    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,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 2,
            recordTime: '2025-09-02',
            recorder: '王嘉祺',
            reviewer: '赵子峰',
            facilityName: '复方水杨酸甲酯乳膏(曼秀雷敦)',
            code: '65.177.48.116',
            facilityModel: '3D8d4ffa-bD7e-AffF-ED68-839DAFe74c27',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '14:10',
            endRunTime: '03:06',
            isNormal: '异常',
            pollutantOutletFlow: '2',
            pollutantFactor: '烟尘2',
            treatmentEfficiency: '93.81',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '59.12',
            treatmentMethod: '95',
            powerConsumption: '34',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-08-24 05:16',
            reagentAdditionAmount: '2',
        },
        {
            key: 3,
            recordTime: '2025-09-06',
            recorder: '王嘉琪',
            reviewer: '郑清予',
            facilityName: '口炎清颗粒(大神)',
            code: '111.161.135.125',
            facilityModel: '19b89EB2-ae94-6bF7-2355-6DBC2d6a6009',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '12:26',
            endRunTime: '03:26',
            isNormal: '异常',
            pollutantOutletFlow: '2',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '91.40',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '59.95',
            treatmentMethod: '90',
            powerConsumption: '56',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-08-30 18:34',
            reagentAdditionAmount: '2',
        },
        {
            key: 4,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 5,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 6,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 7,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 8,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 9,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 10,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 11,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            reagentName: '乳酸钠葡萄糖',
            reagentAdditionTime: '2025-09-01 07:53',
            reagentAdditionAmount: '2',
        },
        {
            key: 12,
            recordTime: '2025-08-29',
            recorder: '赵吾行',
            reviewer: '郑叶飞',
            facilityName: '塞隆风湿酒(同仁堂)',
            code: '35.236.217.212',
            facilityModel: '6Ddb888D-3d7A-3e5E-3372-109F7154A03A',
            parameterName: '重量',
            designValue: '2',
            unit: 't',
            startRunTime: '00:46',
            endRunTime: '03:55',
            isNormal: '正常',
            pollutantOutletFlow: '1',
            pollutantFactor: '烟尘',
            treatmentEfficiency: '95.32',
            dataSource: '实时采集',
            dischargeDestination: '2',
            sludgeProduction: '50.48',
            treatmentMethod: '100',
            powerConsumption: '39',
            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: 'recordTime',
            key: 'recordTime',
            width: 120,
            align: 'center',
        },
        {
            title: '记录人',
            dataIndex: 'recorder',
            key: 'recorder',
            width: 100,
            align: 'center',
        },
        {
            title: '审核人',
            dataIndex: 'reviewer',
            key: 'reviewer',
            width: 100,
            align: 'center',
        },
        {
            title: '设施名称',
            dataIndex: 'facilityName',
            key: 'facilityName',
            width: 200,
        },
        {
            title: '编码',
            dataIndex: 'code',
            key: 'code',
            width: 150,
        },
        {
            title: '设施型号',
            dataIndex: 'facilityModel',
            key: 'facilityModel',
            width: 200,
        },
        {
            title: '参数名称',
            dataIndex: 'parameterName',
            key: 'parameterName',
            width: 120,
            align: 'center',
        },
        {
            title: '设计值',
            dataIndex: 'designValue',
            key: 'designValue',
            width: 100,
            align: 'center',
        },
        {
            title: '单位',
            dataIndex: 'unit',
            key: 'unit',
            width: 80,
            align: 'center',
        },
        {
            title: '开始运行时间',
            dataIndex: 'startRunTime',
            key: 'startRunTime',
            width: 120,
            align: 'center',
        },
        {
            title: '结束运行时间',
            dataIndex: 'endRunTime',
            key: 'endRunTime',
            width: 120,
            align: 'center',
        },
        {
            title: '是否正常',
            dataIndex: 'isNormal',
            key: 'isNormal',
            width: 100,
            align: 'center',
            render: (text) => (
                <span style={{ 
                    color: text === '异常' ? '#ff4d4f' : '#52c41a',
                    backgroundColor: text === '异常' ? '#FFF1F0' : '#F6FFED',
                    border: text === '异常' ? '1px solid #FFA39E' : '1px solid #B7EB8F',
                    padding: '2px 8px',
                    borderRadius: '4px',
                    display: 'inline-block'
                }}>
                    {text}
                </span>
            ),
        },
        {
            title: '污染物出口流量(m³/h)',
            dataIndex: 'pollutantOutletFlow',
            key: 'pollutantOutletFlow',
            width: 150,
            align: 'center',
        },
        {
            title: '污染因子',
            dataIndex: 'pollutantFactor',
            key: 'pollutantFactor',
            width: 120,
            align: 'center',
        },
        {
            title: '治理效率(%)',
            dataIndex: 'treatmentEfficiency',
            key: 'treatmentEfficiency',
            width: 120,
            align: 'center',
        },
        {
            title: '数据来源',
            dataIndex: 'dataSource',
            key: 'dataSource',
            width: 120,
            align: 'center',
        },
        {
            title: '排放去向',
            dataIndex: 'dischargeDestination',
            key: 'dischargeDestination',
            width: 120,
            align: 'center',
        },
        {
            title: '污泥产生量(t)',
            dataIndex: 'sludgeProduction',
            key: 'sludgeProduction',
            width: 130,
            align: 'center',
        },
        {
            title: '处理方式',
            dataIndex: 'treatmentMethod',
            key: 'treatmentMethod',
            width: 120,
            align: 'center',
        },
        {
            title: '耗电量(kWh)',
            dataIndex: 'powerConsumption',
            key: 'powerConsumption',
            width: 120,
            align: 'center',
        },
        {
            title: '药剂名称',
            dataIndex: 'reagentName',
            key: 'reagentName',
            width: 120,
            align: 'center',
        },
        {
            title: '药剂添加时间',
            dataIndex: 'reagentAdditionTime',
            key: 'reagentAdditionTime',
            width: 150,
            align: 'center',
        },
        {
            title: '药剂添加量(t)',
            dataIndex: 'reagentAdditionAmount',
            key: 'reagentAdditionAmount',
            width: 140,
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            fixed: 'right',
            render: (_, record) => (
                <Space size={18}>
                    {/* <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={downloadicon}
                        alt="下载"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleDownload(record)}
                    />
                    <img 
                        src={deleteicon}
                        alt="删除"
                        style={{ width: 16, height: 16, cursor: 'pointer' }} 
                        onClick={() => handleDelete(record)}
                    />
                </Space>
            ),
        },
    ];

    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.wastewaterFacilityContainer}>
            {/* 第一块：操作按钮和筛选条件 */}
            <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>
                    {/* <Button 
                        onClick={() => handleBatchOperation('删除')}
                        className={styles.importButton}
                        disabled={selectedRowKeys.length === 0}
                    >
                        批量删除
                    </Button> */}
                </div>
                
                <div className={styles.rightControls}>
                    <span className={styles.filterLabel}>筛选条件</span>
                    <Select 
                        placeholder="请选择" 
                        style={{ width: 140, height: 28 }}
                        allowClear
                        className={styles.selectInput}
                    />
                    
                    <Input 
                        placeholder="请输入" 
                        style={{ width: 160, height: 28 }}
                    />
                    <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: 3000 }}
                />
            </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 WastewaterFacilityManagement;