import React, { useState } from 'react';
import { Form, Input, Button, DatePicker, Select, Drawer, Descriptions, Tag } from 'antd';
import styles from './RegulationCompliance.less';
import stipulation1 from '@/assets/business_envinformation/stipulation1.svg';

const RegulationCompliance = () => {
    const [form] = Form.useForm();
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [selectedRegulation, setSelectedRegulation] = useState(null);

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

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

    // 显示抽屉详情
    const showDrawer = (regulation) => {
        setSelectedRegulation(regulation);
        setDrawerVisible(true);
    };

    // 关闭抽屉
    const onCloseDrawer = () => {
        setDrawerVisible(false);
        setSelectedRegulation(null);
    };

    // 模拟法规数据（实际应该从后端获取）
    const mockRegulationDetail = {
        name: '2025排污许可条例',
        publishDate: '2025-08-24',
        department: '环保部门名称',
        content: '在此输入具体的法规内容...',
        status: '有效',
        category: '排污许可',
        version: '1.0',
        updateTime: '2025-08-24'
    };


    return (
        <div className={styles.regulationContainer}>
            {/* 第一块：搜索表单 */}
            <div className={styles.searchSection}>
                <Form form={form} layout="inline" onFinish={handleSearch}>
                    <Form.Item label="法规名称" name="regulationName">
                        <Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
                    </Form.Item>
                    <Form.Item label="发布部门" name="regulationNumber">
                        <Input placeholder="请输入" style={{ width: 160, borderRadius: '2px' }} />
                    </Form.Item>
                    <Form.Item label="发布日期" name="publishDate">
                        <DatePicker placeholder="请选择" style={{ width: 160, borderRadius: '2px' }} />
                    </Form.Item>
                    <Form.Item>
                        <Button 
                            type="primary" 
                            htmlType="submit"
                            style={{ backgroundColor: '#00D48A', borderColor: '#00D48A', color: '#fff', borderRadius: '4px' }}
                        >
                            查询
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={handleReset} style={{ borderRadius: '4px' }}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>

            {/* 第二块：表格区域 */}
            <div className={styles.tableSection}>
                <div className={styles.blocksContainer}>
                    {/* 法规合规管理块1 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-24
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块2 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-25
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块3 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-26
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块4 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-27
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块5 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-28
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块6 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-29
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块7 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-30
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块8 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-08-31
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块9 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-09-01
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称9
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块10 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-09-02
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块11 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-09-03
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    {/* 法规合规管理块12 */}
                    <div className={styles.regulationBlock}>
                        {/* 第一行：法规名称 */}
                        <div className={styles.regulationTitle}>
                            <img src={stipulation1} alt="法规图标" style={{ width: '20px', height: '20px', marginRight: '4px' }} />
                            2025排污许可条例
                        </div>

                        {/* 第二行：发布时间和发布部门 */}
                        <div className={styles.regulationInfo}>
                            <div className={styles.publishDate}>
                                发布时间&nbsp;&nbsp;&nbsp;&nbsp;2025-09-04
                            </div>
                            <div className={styles.publishDepartment}>
                                发布部门&nbsp;&nbsp;&nbsp;&nbsp;环保部门名称
                            </div>
                        </div>

                        {/* 第三行：操作按钮 */}
                        <div className={styles.actionButtons}>
                            <div
                                className={styles.actionButton}
                                onClick={() => showDrawer(mockRegulationDetail)}
                                style={{ cursor: 'pointer' }}
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                            <div className={styles.actionButton}>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#D8D8D8"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* 静态分页组件 */}
            <div className={styles.paginationContainer}>
                <div className={styles.pagination}>
                    <span className={styles.totalItems}>共85条</span>
                    {/* <select className={styles.pageSizeSelect}>
                        <option value="10">10 / page</option>
                    </select> */}
                    <button className={styles.pageButton}>&lt;</button>
                    <button className={styles.pageButton}>1</button>
                    <span className={styles.ellipsis}>...</span>
                    <button className={styles.pageButton}>4</button>
                    <button className={styles.pageButton}>5</button>
                    <button className={`${styles.pageButton} ${styles.active}`}>6</button>
                    <button className={styles.pageButton}>7</button>
                    <button className={styles.pageButton}>8</button>
                    <span className={styles.ellipsis}>...</span>
                    <button className={styles.pageButton}>50</button>
                    <button className={styles.pageButton}>&gt;</button>
                </div>
            </div>

            {/* 抽屉详情 */}
            <Drawer
                title="法规详情"
                width={600}
                placement="right"
                onClose={onCloseDrawer}
                visible={drawerVisible}
                maskClosable={true}
            >
                {selectedRegulation && (
                    <Descriptions bordered column={1} size="middle">
                        <Descriptions.Item label="法规名称">
                            {selectedRegulation.name}
                        </Descriptions.Item>
                        <Descriptions.Item label="发布日期">
                            {selectedRegulation.publishDate}
                        </Descriptions.Item>
                        <Descriptions.Item label="发布部门">
                            {selectedRegulation.department}
                        </Descriptions.Item>
                        <Descriptions.Item label="法规状态">
                            <Tag color="green">{selectedRegulation.status}</Tag>
                        </Descriptions.Item>
                        <Descriptions.Item label="法规类别">
                            {selectedRegulation.category}
                        </Descriptions.Item>
                        <Descriptions.Item label="版本号">
                            {selectedRegulation.version}
                        </Descriptions.Item>
                        <Descriptions.Item label="更新时间">
                            {selectedRegulation.updateTime}
                        </Descriptions.Item>
                        <Descriptions.Item label="法规内容">
                            <div style={{ whiteSpace: 'pre-wrap', maxHeight: '300px', overflow: 'auto' }}>
                                {selectedRegulation.content}
                            </div>
                        </Descriptions.Item>
                    </Descriptions>
                )}
            </Drawer>
        </div>
    );
};

export default RegulationCompliance;