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 './AlarmInformation.less';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
import deleteIcon from '@/assets/business_envinformation/deleteicon.svg';
const AlarmInformation = () => {
    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, type: 'xxxx', level: '二级', company: '北京市-聚能和京东有限公司', site: 'xxxx站点', time: '2025-08-31', method: 'xxxx', content: 'xxxx' },
        { key: 2, type: 'xxxx', level: '二级', company: '万和化企业服务有限公司北京分公司', site: 'xxxx站点', time: '2025-08-29', method: 'xxxx', content: 'xxxx' },
        { key: 3, type: 'xxxx', level: '二级', company: '佳园国际集团有限公司', site: 'xxxx站点', time: '2025-09-14', method: 'xxxx', content: 'xxxx' },
        { key: 4, type: 'xxxx', level: '二级', company: '飞骑摩车(中国)有限公司北京分公司', site: 'xxxx站点', time: '2025-09-13', method: 'xxxx', content: 'xxxx' },
        { key: 5, type: 'xxxx', level: '二级', company: '深圳亿和企业管理有限公司', site: 'xxxx站点', time: '2025-08-20', method: 'xxxx', content: 'xxxx' },
        { key: 6, type: 'xxxx', level: '二级', company: '深圳亿和企业管理有限公司', site: 'xxxx站点', time: '2025-08-20', method: 'xxxx', content: 'xxxx' },
        { key: 7, type: 'xxxx', level: '二级', company: '深圳亿和企业管理有限公司', site: 'xxxx站点', time: '2025-08-20', method: 'xxxx', content: 'xxxx' },
        { key: 8, type: 'xxxx', level: '二级', company: '深圳亿和企业管理有限公司', site: 'xxxx站点', time: '2025-08-20', method: 'xxxx', content: 'xxxx' },
        { key: 9, type: 'xxxx', level: '二级', company: '深圳亿和企业管理有限公司', site: 'xxxx站点', time: '2025-08-20', method: 'xxxx', content: 'xxxx' },
    ]);

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

    const columns = [
        { title: '序号', dataIndex: 'key', key: 'key', align: 'left' },
        { title: '告警类型', dataIndex: 'type', key: 'type', align: 'left' },
        { title: '告警等级', dataIndex: 'level', key: 'level', align: 'left' },
        { title: '所属企业', dataIndex: 'company', key: 'company', align: 'left' },
        { title: '告警站点', dataIndex: 'site', key: 'site', align: 'left' },
        { title: '告警时间', dataIndex: 'time', key: 'time', align: 'left' },
        { title: '通知方式', dataIndex: 'method', key: 'method', align: 'left' },
        { title: '告警内容', dataIndex: 'content', key: 'content', align: 'left' },
        { 
            title: '操作',
            key: 'action',
            align: 'center',
            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={deleteIcon} alt="删除" style={{ width: 16, height: 16, cursor: 'pointer' }} />
                </div>
            ),
        },
    ];

    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}>
                <Form
                    form={form}
                    layout="inline"
                    className={styles.rightControls}
                    onFinish={handleQuery}
                >
                    <Form.Item label="告警类型" name="type" style={{ marginRight: 12 }}>
                        <Select
                            placeholder="请选择"
                            style={{ width: 140, height: 28 }}
                            allowClear
                            className={styles.selectInput}
                            options={[
                                { value: '1', label: '类型1' },
                                { value: '2', label: '类型2' },
                                { value: '3', label: '类型3' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="告警等级" name="level" style={{ marginRight: 12 }}>
                        <Select
                            placeholder="全部监测因子"
                            style={{ width: 140, height: 28 }}
                            allowClear
                            className={styles.selectInput}
                            options={[
                                { value: '1', label: '一级' },
                                { value: '2', label: '二级' },
                                { value: '3', label: '三级' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="告警站点" name="site" style={{ marginRight: 12 }}>
                        <Select
                            placeholder="请选择"
                            style={{ width: 140, height: 28 }}
                            allowClear
                            className={styles.selectInput}
                            options={[
                                { value: '1', label: '站点1' },
                                { value: '2', label: '站点2' },
                                { value: '3', label: '站点3' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item style={{ marginInlineEnd: 0 }}>
                        <Button
                            type="primary"
                            htmlType="submit"
                            className={styles.queryButton}
                        >
                            查询
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button
                            onClick={handleReset}
                            className={styles.resetButton}
                        >
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </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 AlarmInformation;
