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 './AtmospherePollutantLibrary.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';
import icon_add from '@/assets/business_envinformation/icon_add.svg';

const AtmospherePollutantLibrary = () => {
    const [form] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [currentImage, setCurrentImage] = useState(null);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 19,
    });
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [dataSource, setDataSource] = useState([
        {
            key: 1,
            serialNumber: 1,
            pollutantName: '对乙酰氨基酚栓',
            category: 25,
            mainFeatures: '在接受调查的19为华尔街分析师...',
            monitoringPoint: 1.25,
            emittingEnterprise: '每日协通(北京)咨询有限公司',
            monthlyEmission: 4.6,
            quarterlyEmission: 4.6,
            yearlyEmission: 5.0,
        },
        {
            key: 2,
            serialNumber: 2,
            pollutantName: '萘普生缓释胶囊(适洛特)',
            category: 27,
            mainFeatures: '热到融化的马路、无穷无尽的野火...',
            monitoringPoint: 1.25,
            emittingEnterprise: '赢王科技有限公司',
            monthlyEmission: 1.1,
            quarterlyEmission: 1.1,
            yearlyEmission: 1.8,
        },
        {
            key: 3,
            serialNumber: 3,
            pollutantName: '复方感冒灵片',
            category: 44,
            mainFeatures: '从病虫害探测、土壤墒情监测智能...',
            monitoringPoint: 1.25,
            emittingEnterprise: '北京福商商务服务有限公司',
            monthlyEmission: 2.4,
            quarterlyEmission: 2.4,
            yearlyEmission: 5.0,
        },
        {
            key: 4,
            serialNumber: 4,
            pollutantName: '红药片',
            category: 21,
            mainFeatures: '近日,有科普博主发帖称,某社交...',
            monitoringPoint: 1.25,
            emittingEnterprise: '实华国际租赁有限公司',
            monthlyEmission: 3.6,
            quarterlyEmission: 3.6,
            yearlyEmission: 4.7,
        },
        {
            key: 5,
            serialNumber: 5,
            pollutantName: '布洛芬混悬液(翔宇赛可)',
            category: 56,
            mainFeatures: '在七八十年代,这种面料做成的服...',
            monitoringPoint: 1.25,
            emittingEnterprise: '北京冠钧财经策划有限公司',
            monthlyEmission: 3.0,
            quarterlyEmission: 3.0,
            yearlyEmission: 4.7,
        },
        {
            key: 6,
            serialNumber: 6,
            pollutantName: '阿莫西林胶囊',
            category: 32,
            mainFeatures: '抗生素类药物，用于治疗细菌感染...',
            monitoringPoint: 1.15,
            emittingEnterprise: '华北制药集团有限责任公司',
            monthlyEmission: 2.8,
            quarterlyEmission: 2.8,
            yearlyEmission: 3.5,
        },
        {
            key: 7,
            serialNumber: 7,
            pollutantName: '头孢拉定胶囊',
            category: 28,
            mainFeatures: '头孢类抗生素，广谱抗菌药物...',
            monitoringPoint: 1.30,
            emittingEnterprise: '石药集团欧意药业有限公司',
            monthlyEmission: 1.9,
            quarterlyEmission: 1.9,
            yearlyEmission: 2.3,
        },
        {
            key: 8,
            serialNumber: 8,
            pollutantName: '复方甘草片',
            category: 35,
            mainFeatures: '镇咳祛痰药物，含有甘草提取物...',
            monitoringPoint: 1.20,
            emittingEnterprise: '太极集团重庆桐君阁药厂有限公司',
            monthlyEmission: 3.2,
            quarterlyEmission: 3.2,
            yearlyEmission: 4.1,
        },
        {
            key: 9,
            serialNumber: 9,
            pollutantName: '板蓝根颗粒',
            category: 41,
            mainFeatures: '清热解毒，凉血利咽的中成药...',
            monitoringPoint: 1.10,
            emittingEnterprise: '广州白云山和记黄埔中药有限公司',
            monthlyEmission: 4.5,
            quarterlyEmission: 4.5,
            yearlyEmission: 5.8,
        },
        {
            key: 10,
            serialNumber: 10,
            pollutantName: '维生素C片',
            category: 22,
            mainFeatures: '补充维生素C，增强免疫力...',
            monitoringPoint: 1.35,
            emittingEnterprise: '华润三九医药股份有限公司',
            monthlyEmission: 2.1,
            quarterlyEmission: 2.1,
            yearlyEmission: 2.7,
        },
        {
            key: 11,
            serialNumber: 11,
            pollutantName: '感冒清热颗粒',
            category: 38,
            mainFeatures: '疏风散寒，解表清热的中成药...',
            monitoringPoint: 1.25,
            emittingEnterprise: '北京同仁堂股份有限公司',
            monthlyEmission: 3.7,
            quarterlyEmission: 3.7,
            yearlyEmission: 4.9,
        },
        {
            key: 12,
            serialNumber: 12,
            pollutantName: '双氯芬酸钠缓释片',
            category: 29,
            mainFeatures: '非甾体抗炎药，用于缓解疼痛...',
            monitoringPoint: 1.18,
            emittingEnterprise: '扬子江药业集团有限公司',
            monthlyEmission: 1.6,
            quarterlyEmission: 1.6,
            yearlyEmission: 2.0,
        },
        {
            key: 13,
            serialNumber: 13,
            pollutantName: '藿香正气水',
            category: 43,
            mainFeatures: '解表化湿，理气和中的中成药...',
            monitoringPoint: 1.22,
            emittingEnterprise: '云南白药集团股份有限公司',
            monthlyEmission: 2.9,
            quarterlyEmission: 2.9,
            yearlyEmission: 3.8,
        },
        {
            key: 14,
            serialNumber: 14,
            pollutantName: '蒙脱石散',
            category: 26,
            mainFeatures: '止泻药物，保护胃肠黏膜...',
            monitoringPoint: 1.28,
            emittingEnterprise: '博福-益普生制药有限公司',
            monthlyEmission: 1.4,
            quarterlyEmission: 1.4,
            yearlyEmission: 1.9,
        },
        {
            key: 15,
            serialNumber: 15,
            pollutantName: '复方丹参片',
            category: 37,
            mainFeatures: '活血化瘀，理气止痛的中成药...',
            monitoringPoint: 1.16,
            emittingEnterprise: '天津中新药业集团股份有限公司',
            monthlyEmission: 3.3,
            quarterlyEmission: 3.3,
            yearlyEmission: 4.2,
        },
        {
            key: 16,
            serialNumber: 16,
            pollutantName: '奥美拉唑肠溶胶囊',
            category: 31,
            mainFeatures: '质子泵抑制剂，治疗胃溃疡...',
            monitoringPoint: 1.33,
            emittingEnterprise: '阿斯利康制药有限公司',
            monthlyEmission: 2.2,
            quarterlyEmission: 2.2,
            yearlyEmission: 2.8,
        },
        {
            key: 17,
            serialNumber: 17,
            pollutantName: '六味地黄丸',
            category: 45,
            mainFeatures: '滋阴补肾的经典中成药...',
            monitoringPoint: 1.12,
            emittingEnterprise: '仲景宛西制药股份有限公司',
            monthlyEmission: 4.1,
            quarterlyEmission: 4.1,
            yearlyEmission: 5.3,
        },
        {
            key: 18,
            serialNumber: 18,
            pollutantName: '阿司匹林肠溶片',
            category: 24,
            mainFeatures: '解热镇痛抗炎药，预防血栓...',
            monitoringPoint: 1.27,
            emittingEnterprise: '拜耳医药保健有限公司',
            monthlyEmission: 1.8,
            quarterlyEmission: 1.8,
            yearlyEmission: 2.4,
        },
        {
            key: 19,
            serialNumber: 19,
            pollutantName: '复方黄连素片',
            category: 39,
            mainFeatures: '清热燥湿，行气止痛的中成药...',
            monitoringPoint: 1.21,
            emittingEnterprise: '哈药集团三精制药有限公司',
            monthlyEmission: 2.6,
            quarterlyEmission: 2.6,
            yearlyEmission: 3.4,
        },
    ]);

    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: 'serialNumber',
            key: 'serialNumber',
            width: 80,
            align: 'center',
        },
        {
            title: '特征污染物名称',
            dataIndex: 'pollutantName',
            key: 'pollutantName',
            width: 200,
            align: 'center',
        },
        {
            title: '种类',
            dataIndex: 'category',
            key: 'category',
            width: 100,
            align: 'center',
        },
        {
            title: '主要特征',
            dataIndex: 'mainFeatures',
            key: 'mainFeatures',
            width: 300,
        },
        {
            title: '环境监测点',
            dataIndex: 'monitoringPoint',
            key: 'monitoringPoint',
            width: 120,
            align: 'center',
        },
        {
            title: '排放企业',
            dataIndex: 'emittingEnterprise',
            key: 'emittingEnterprise',
            width: 200,
        },
        {
            title: '本月排放量',
            dataIndex: 'monthlyEmission',
            key: 'monthlyEmission',
            width: 120,
            align: 'center',
        },
        {
            title: '本季度排放量',
            dataIndex: 'quarterlyEmission',
            key: 'quarterlyEmission',
            width: 130,
            align: 'center',
        },
        {
            title: '本年度排放量',
            dataIndex: 'yearlyEmission',
            key: 'yearlyEmission',
            width: 130,
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            fixed: 'right',
            render: (_, record) => (
                <Space size={18}>
                    {/* <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.atmospherePollutantLibrary}>
            {/* 页面头部 */}
            <div className={styles.pageHeader}>
                大气污染特征污染物名录库
            </div>
            {/* 第一块：操作按钮和筛选条件 */}
            <div className={styles.searchSection}>
                <div className={styles.leftButtons}>
                    <Button 
                        type="primary" 
                        onClick={handleAdd}
                        className={styles.addButton}
                    >
                        <img 
                            src={icon_add}
                            alt="新增"
                            style={{ width: 16, height: 16, marginRight: 0 }} 
                        />
                        新增
                    </Button>
                    <Button 
                        onClick={handleImport}
                        className={styles.importButton}
                    >
                        批量导出
                    </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 AtmospherePollutantLibrary;
