import React, { useState } from 'react';
import { Form, Input, Button, Space, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './sjjrgl.less';

const Sjjrgl = () => {
    const [form] = Form.useForm();
    const [dataSource, setDataSource] = useState([
        {
            key: 1,
            serialNumber: 1,
            dataSourceName: 'Q3车间废水总排口COD在线监测',
            type: '在线监测设备',
            status: '未校验',
            lastUpdateTime: '2025-11-27 05:10:34',
        },
        {
            key: 2,
            serialNumber: 2,
            dataSourceName: '危废仓库VOCs无组织排放手工记录',
            type: '在线监测设备',
            status: '异常',
            lastUpdateTime: '2025-11-24 18:08:09',
        },
        {
            key: 3,
            serialNumber: 3,
            dataSourceName: '2024年5月第三方环境检测报告数据',
            type: 'API接口',
            status: '正常',
            lastUpdateTime: '2025-11-23 00:41:17',
        },
        {
            key: 4,
            serialNumber: 4,
            dataSourceName: '锅炉房烟气排放口 (CEMS) 数据流',
            type: 'API接口',
            status: '未校验',
            lastUpdateTime: '2025-11-19 14:30:08',
        },
        {
            key: 5,
            serialNumber: 5,
            dataSourceName: '厂界噪声季度监测记录表',
            type: 'Excel导入',
            status: '正常',
            lastUpdateTime: '2025-11-14 08:57:38',
        },
        {
            key: 6,
            serialNumber: 6,
            dataSourceName: '南区污水处理站加药台账',
            type: 'Excel导入',
            status: '异常',
            lastUpdateTime: '2025-11-10 08:34:40',
        },
        {
            key: 7,
            serialNumber: 7,
            dataSourceName: '活性炭更换记录 (吸附装置A/B)',
            type: 'API接口',
            status: '未校验',
            lastUpdateTime: '2025-11-08 15:56:39',
        },
        {
            key: 8,
            serialNumber: 8,
            dataSourceName: '活性炭更换记录 (吸附装置A/B)',
            type: '在线监测设备',
            status: '未校验',
            lastUpdateTime: '2025-11-04 00:10:56',
        },
        {
            key: 9,
            serialNumber: 9,
            dataSourceName: '活性炭更换记录 (吸附装置A/B)',
            type: '在线监测设备',
            status: '异常',
            lastUpdateTime: '2025-11-03 14:21:29',
        },
        {
            key: 10,
            serialNumber: 10,
            dataSourceName: '活性炭更换记录 (吸附装置A/B)',
            type: '在线监测设备',
            status: '异常',
            lastUpdateTime: '2025-11-03 11:01:14',
        },
    ]);

    const getStatusColor = (status) => {
        switch (status) {
            case '正常':
                return '#52c41a';
            case '异常':
                return '#ff4d4f';
            case '未校验':
                return '#faad14';
            default:
                return '#999';
        }
    };

    const getTypeStyle = (type) => {
        switch (type) {
            case '在线监测设备':
                return {
                    border: '1px solid rgba(135, 232, 222, 1)',
                    backgroundColor: 'rgba(230, 255, 251, 1)',
                    color: 'rgba(19, 194, 194, 1)',
                    borderRadius: '2px',
                };
            case 'API接口':
                return {
                    border: '1px solid rgba(255, 178, 168, 1)',
                    backgroundColor: 'rgba(255, 239, 239, 1)',
                    color: 'rgba(255, 89, 60, 1)',
                    borderRadius: '2px',
                };
            case 'Excel导入':
                return {
                    border: '1px solid rgba(168, 206, 255, 1)',
                    backgroundColor: 'rgba(230, 240, 255, 1)',
                    color: 'rgba(60, 106, 255, 1)',
                    borderRadius: '2px',
                };
            default:
                return {
                    border: '1px solid #d9d9d9',
                    backgroundColor: '#fafafa',
                    color: '#666',
                    borderRadius: '2px',
                };
        }
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'serialNumber',
            key: 'serialNumber',
            width: 80,
            align: 'center',
        },
        {
            title: '数据源名称',
            dataIndex: 'dataSourceName',
            key: 'dataSourceName',
            width: 300,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 150,
            align: 'center',
            render: (type) => (
                <span style={{ 
                    ...getTypeStyle(type),
                    display: 'inline-block',
                    padding: '0 12px',
                    lineHeight: '22px',
                    fontSize: '12px',
                }}>
                    {type}
                </span>
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 120,
            align: 'center',
            render: (status) => (
                <span>
                    <span 
                        style={{ 
                            display: 'inline-block',
                            width: 8,
                            height: 8,
                            borderRadius: '50%',
                            backgroundColor: getStatusColor(status),
                            marginRight: 8,
                        }}
                    />
                    {status}
                </span>
            ),
        },
        {
            title: '最后更新时间',
            dataIndex: 'lastUpdateTime',
            key: 'lastUpdateTime',
            width: 180,
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (_, record) => (
                <Space size="small">
                    <a 
                        style={{ color: 'rgba(0, 215, 97, 1)', cursor: 'pointer' }} 
                        onClick={() => handleEdit(record)}
                    >
                        编辑
                    </a>
                    <a 
                        style={{ color: 'rgba(255, 183, 27, 1)', cursor: 'pointer' }} 
                        onClick={() => handleVerify(record)}
                    >
                        校验
                    </a>
                    <a 
                        style={{ color: 'rgba(255, 80, 27, 1)', cursor: 'pointer' }} 
                        onClick={() => handleDelete(record)}
                    >
                        删除
                    </a>
                </Space>
            ),
        },
    ];

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

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

    const handleEdit = (record) => {
        console.log('编辑:', record);
        // TODO: 实现编辑功能
    };

    const handleVerify = (record) => {
        console.log('校验:', record);
        // TODO: 实现校验功能
    };

    const handleDelete = (record) => {
        console.log('删除:', record);
        // TODO: 实现删除功能
    };

    const handleAdd = () => {
        console.log('新增');
        // TODO: 实现新增功能
    };

    return (
        <div className={styles.permitContainer}>
            {/* 第一块：搜索表单 */}
            <div className={styles.searchSection}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    {/* 左侧：新增按钮 */}
                    <Button 
                        type="primary"
                        onClick={handleAdd}
                        style={{ 
                            backgroundColor: 'rgba(0, 212, 138, 1)', 
                            borderColor: 'rgba(0, 212, 138, 1)', 
                            color: '#fff',
                            borderRadius: '4px',
                            display: 'flex',
                            alignItems: 'center',
                            gap: '8px',
                        }}
                    >
                        <span style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: '20px',
                            height: '20px',
                            borderRadius: '50%',
                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
                        }}>
                            <PlusOutlined style={{ fontSize: '12px' }} />
                        </span>
                        新增
                    </Button>

                    {/* 右侧：搜索表单 */}
                    <Form form={form} layout="inline" onFinish={handleSearch} style={{ marginLeft: 'auto' }}>
                        <Form.Item name="name">
                            <Input placeholder="名称" style={{ width: 160, borderRadius: '2px' }} />
                        </Form.Item>
                        <Form.Item name="type">
                            <Select 
                                placeholder="全部类型" 
                                style={{ width: 160, borderRadius: '2px' }}
                                allowClear
                            >
                                <Select.Option value="在线监测设备">在线监测设备</Select.Option>
                                <Select.Option value="API接口">API接口</Select.Option>
                                <Select.Option value="Excel导入">Excel导入</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="status">
                            <Select 
                                placeholder="全部状态" 
                                style={{ width: 160, borderRadius: '2px' }}
                                allowClear
                            >
                                <Select.Option value="正常">正常</Select.Option>
                                <Select.Option value="异常">异常</Select.Option>
                                <Select.Option value="未校验">未校验</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item>
                            <Button 
                                type="primary" 
                                htmlType="submit"
                                style={{ 
                                    backgroundColor: 'rgba(0, 212, 138, 1)', 
                                    borderColor: 'rgba(0, 212, 138, 1)', 
                                    color: '#fff', 
                                    borderRadius: '4px' 
                                }}
                            >
                                查询
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button onClick={handleReset} style={{ borderRadius: '4px' }}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>

            {/* 第二块：表格 */}
            <div className={styles.tableSection}>
                <StandardTable
                    columns={columns}
                    data={{
                        list: dataSource,
                        pagination: {
                            total: dataSource.length,
                            pageSize: 10,
                            currentPage: 1,
                            showTotal: (total) => `共 ${total} 条`,
                        }
                    }}
                />
            </div>
        </div>
    );
};

export default Sjjrgl;

