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

const RegulationCompliance = () => {
    const [form] = Form.useForm();

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

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


    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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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}>
                                <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>
    );
};

export default RegulationCompliance;