import React, { useState } from 'react';
import { Button, Input, Select, Switch } from 'antd';
import { SearchOutlined, RedoOutlined, UploadOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './AbnormalAlarmInformation.less';

const AbnormalAlarmInformation = () => {
    const [activeTab, setActiveTab] = useState('actual');

    // 表格数据与图片一致
    const [tableData, setTableData] = useState([
        { key: 1, siteName: '2025-08-29', monitorFactor: '赵若行', alarmCount: '郑祥飞', autoHandle: false },
        { key: 2, siteName: '2025-09-02', monitorFactor: '王翠琪', alarmCount: '赵广峰', autoHandle: true },
        { key: 3, siteName: '2025-09-06', monitorFactor: '王翠琪', alarmCount: '郑嘉亨', autoHandle: true },
        { key: 4, siteName: '2025-08-22', monitorFactor: '王锦瑞', alarmCount: '赵玉', autoHandle: true },
        { key: 5, siteName: '2025-08-31', monitorFactor: '吴子鑫', alarmCount: '钱如珩', autoHandle: true },
        { key: 6, siteName: '2025-08-29', monitorFactor: '何凤彬', alarmCount: '赵润琪', autoHandle: false },
        { key: 7, siteName: '2025-08-28', monitorFactor: '李树烈', alarmCount: '李建刚', autoHandle: false },
        { key: 8, siteName: '2025-08-22', monitorFactor: '赵午光', alarmCount: '钱瑞西', autoHandle: false },
        { key: 9, siteName: '2025-08-21', monitorFactor: '王凤妍', alarmCount: '李金涛', autoHandle: false },
        { key: 10, siteName: '2025-09-09', monitorFactor: '赵涛', alarmCount: '何倩', autoHandle: false },
    ]);

    // 表格列定义
    const handleSwitchChange = (checked, record) => {
        setTableData(prevData => prevData.map(item =>
            item.key === record.key ? { ...item, autoHandle: checked } : item
        ));
    };

    const normalColumns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
            align: 'center',
            width: 60,
        },
        {
            title: '站点名称',
            dataIndex: 'siteName',
            key: 'siteName',
            align: 'left',
        },
        {
            title: '监测因子',
            dataIndex: 'monitorFactor',
            key: 'monitorFactor',
            align: 'left',
        },
        {
            title: '报警次数',
            dataIndex: 'alarmCount',
            key: 'alarmCount',
            align: 'left',
        },
        {
            title: '异常自动报警',
            dataIndex: 'autoHandle',
            key: 'autoHandle',
            align: 'left',
            render: (text, record) => (
                <Switch checked={!!text} size="small" onChange={checked => handleSwitchChange(checked, record)} />
            ),
        },
        {
            title: '详情',
            key: 'detail',
            align: 'left',
            render: () => <a href="#">查看</a>,
        },
    ];

    // 获取当前标签页的数据
    const getCurrentData = () => {
        switch (activeTab) {
            case 'actual':
            case 'excessive':
            case 'equipment':
                return tableData;
            default:
                return tableData;
        }
    };

    // 获取当前标签页的列定义
    const getCurrentColumns = () => {
        switch (activeTab) {
            case 'actual':
            case 'excessive':
            case 'equipment':
                return normalColumns;
            default:
                return normalColumns;
        }
    };

    // 分页配置
    const pagination = {
        current: 1,
        pageSize: 10,
        total: 12,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
    };

    return (
        <div className={styles.dischargePermitManagement}>
            <div className={styles.tabContainer}>
                <div className={styles.tabButtons}>
                    <Button
                        className={`${styles.tabButton} ${activeTab === 'actual' ? styles.active : ''}`}
                        onClick={() => setActiveTab('actual')}
                    >
                        异常报警
                    </Button>
                    <Button
                        className={`${styles.tabButton} ${activeTab === 'excessive' ? styles.active : ''}`}
                        onClick={() => setActiveTab('excessive')}
                    >
                        超标报警
                    </Button>
                    <Button
                        className={`${styles.tabButton} ${activeTab === 'equipment' ? styles.active : ''}`}
                        onClick={() => setActiveTab('equipment')}
                    >
                        离线报警
                    </Button>
                </div>

                <div className={styles.filterSection}>
                    <Select
                        defaultValue={"1"}
                        className={styles.filterSelect}
                        placeholder="请选择"
                        style={{ width: 120 }}
                        options={
                            [
                                { value: '1', label: '全部站点类型' },
                            ]
                        }
                    />
                    <Select
                        defaultValue={"1"}
                        className={styles.filterSelect}
                        placeholder="请选择"
                        style={{ width: 120 }}
                        options={
                            [
                                { value: '1', label: '全部站点' },
                            ]
                        }
                    />
                    <Select
                        defaultValue={"1"}
                        className={styles.filterSelect}
                        placeholder="请选择"
                        style={{ width: 120 }}
                        options={
                            [
                                { value: '1', label: '全部监测因子' },
                            ]
                        }
                    />
                    <Button
                        type="primary"
                        // icon={<SearchOutlined />}
                        className={styles.queryBtn}
                    >
                        查询
                    </Button>
                    <Button
                        // icon={<RedoOutlined />}
                        className={styles.resetBtn}
                    >
                        重置
                    </Button>
                </div>
            </div>

            <div className={styles.tableContent}>
                <StandardTable
                    columns={getCurrentColumns()}
                    data={{
                        list: getCurrentData(),
                        pagination: pagination
                    }}
                    rowKey="key"
                />
            </div>
        </div>
    );
};

export default AbnormalAlarmInformation;