import {Button, Card, Col, DatePicker, Form, Input, Row, Select, Space} from "antd";
import styles from "./HistoryAlarms.less";
import Title from "@/pages/homepage/compontent/title";
import {SearchOutlined} from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
import React, {useState} from "react";
const { Option } = Select;
const { RangePicker } = DatePicker;

const columns = [

    {
        title: '序号',
        dataIndex: 'serialNumber',
        key: 'serialNumber',
    },
    {
        title: '告警级别',
        dataIndex: 'alarmLevel',
        key: 'alarmLevel',
        render: (text) => {
            const colorMap = {
                '紧急': '#ff4d4f',
                '严重': '#fa8c16',
                '警告': '#faad14',
                '提示': '#52c41a'
            };
            return <span style={{ color: colorMap[text] || '#000' }}>{text}</span>;
        }
    },
    {
        title: '设备名称',
        dataIndex: 'deviceName',
        key: 'deviceName',
    },
    {
        title: '设备类型',
        dataIndex: 'deviceType',
        key: 'deviceType',
    },
    {
        title: '告警类别',
        dataIndex: 'alarmType',
        key: 'alarmType',

    },
    {
        title: '规划时间',
        dataIndex: 'planTime',
        key: 'planTime',
    },
    {
        title: '处理时间',
        dataIndex: 'handleTime',
        key: 'handleTime',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text) => {
            const statusColor = {
                '未处理': '#FFBC00',
                '已处理': '#2C9E9D',
                '已忽略': '#666666'
            };
            return <span style={{ color: statusColor[text] || '#000' }}>{text}</span>;
        }
    },
    {
        title: '处理人',
        dataIndex: 'handler',
        key: 'handler',
    },
    {
        title: '操作',
        key: 'operations',
        render: (_, record) => {
            if(record.status === '已处理'){
                return (
                    <div>
                        <Button type={"link"} style={{color:'#2C9E9D'}}>处理</Button>
                        <Button type={"link"} style={{color:'#2C9E9D'}}>详情</Button>
                        <Button type={"link"} style={{color:'#006665'}}>追溯</Button>
                    </div>
                )
            }else if(record.status === '未处理'){
                return (
                    <div>
                        <Button type={"link"} style={{color: '#2C9E9D'}}>处理</Button>
                        <Button type={"link"} style={{color: '#006665'}}>确认</Button>
                        <Button type={"link"} style={{color: '#999999'}}>忽略</Button>
                    </div>
                )
            }else if(record.status === '已忽略'){
                return (
                    <div>
                        <Button type={"link"} style={{color:'#2C9E9D'}}>详情</Button>
                        <Button type={"link"} style={{color:'#FF826D'}}>取消忽略</Button>
                    </div>
                )
            }
        },
    },
]

const mockData = [
    {
        key: '1',
        serialNumber: 'ALM-1001',
        alarmLevel: '紧急',
        deviceName: '核心服务器 A',
        deviceType: '服务器',
        alarmType: 'CPU 使用率>96%',
        planTime: '2025-10-30',
        handleTime: '2025-10-25',
        status: '已处理',
        handler: '政府',
    },
    {
        key: '2',
        serialNumber: 'ALM-1002',
        alarmLevel: '严重',
        deviceName: '工业网关 B',
        deviceType: '网关',
        alarmType: '系统配置 > 分钟',
        planTime: '2025-10-30',
        handleTime: '2025-10-24',
        status: '已处理',
        handler: '马明',
    },
    {
        key: '3',
        serialNumber: 'ALM-1003',
        alarmLevel: '警告',
        deviceName: '温度传感器 G',
        deviceType: '传感器',
        alarmType: '温度>40℃',
        planTime: '2025-10-30',
        handleTime: '--',
        status: '未处理',
        handler: '--',
    },
    {
        key: '4',
        serialNumber: 'ALM-1004',
        alarmLevel: '提示',
        deviceName: '温控器输入 D',
        deviceType: '摄像头',
        alarmType: '温度报警/远程控制',
        planTime: '2025-10-30',
        handleTime: '2025-10-22',
        status: '已忽略',
        handler: '赵小强',
    },
    {
        key: '5',
        serialNumber: 'ALM-1005',
        alarmLevel: '紧急',
        deviceName: '存储节点 E',
        deviceType: '服务器',
        alarmType: '温度报警/报警>90%',
        planTime: '2025-10-30',
        handleTime: '2025-10-21',
        status: '已处理',
        handler: '冯玉洁',
    },
    {
        key: '6',
        serialNumber: 'ALM-1006',
        alarmLevel: '严重',
        deviceName: '边缘网关 F',
        deviceType: '网关',
        alarmType: '网络安全等级>20%',
        planTime: '2025-10-30',
        handleTime: '2025-10-20',
        status: '已处理',
        handler: '王文忠',
    },
    {
        key: '7',
        serialNumber: 'ALM-1007',
        alarmLevel: '警告',
        deviceName: '温度传感器 G',
        deviceType: '传感器',
        alarmType: '温度>60%',
        planTime: '2025-10-30',
        handleTime: '--',
        status: '未处理',
        handler: '--',
    },
];

const HistoryAlarmsData = ()=>{
    const [form] = Form.useForm();
    const [dataSource, setDataSource] = useState(mockData);
    const [selectedRows, setSelectedRows] = useState([]);
    const [paginationProps, setPaginationProps] = useState({
        total: mockData.length,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100']
    });

    // 定义fetchData函数，方便后续对接接口
    const fetchData = async (page, pageSize) => {
        try {
            // 这里可以替换为实际的API调用
            // const response = await api.getServiceTickets({ page, pageSize, ...searchParams });
            // return response.data;

            // 模拟API调用
            const startIndex = (page - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            return mockData.slice(startIndex, endIndex);
        } catch (error) {
            console.error('获取工单列表失败:', error);
            return [];
        }
    };

    // 处理行选择
    const handleRowSelection = (selectedRowKeys, selectedRows) => {
        setSelectedRows(selectedRows);
    };

    // 搜索
    const handleSearch = (values) => {
        console.log('搜索条件:', values);
        // 这里可以添加实际的搜索逻辑
    };

    // 重置
    const handleReset = () => {
        form.resetFields();
    };

    // 新增工单
    const handleAdd = () => {
        console.log('新增工单');
        // 这里可以添加实际的新增工单逻辑
    };

    // 导入工单
    const handleImport = () => {
        console.log('导入工单');
        // 这里可以添加实际的导入工单逻辑
    };

    // 导出工单
    const handleExport = () => {
        console.log('导出工单');
        // 这里可以添加实际的导出工单逻辑
    };

    // 打印工单
    const handlePrint = () => {
        console.log('打印工单');
        // 这里可以添加实际的打印工单逻辑
    };

    // 删除工单
    const handleDelete = () => {
        console.log('删除工单');
        // 这里可以添加实际的删除工单逻辑
    };
    return (
        <div style={{padding: 20,}}>
            {/* 查询条件区域 */}
            <Card className={styles.card} bordered={false} bodyStyle={{paddingTop: 20}}>
                <Row>
                    <Col span={12}>
                        <Title title="查询条件" className={styles.title}/>
                    </Col>
                    <Col span={12} style={{textAlign: 'right'}}>
                        <Space>
                            <Button icon={<SearchOutlined/>} htmlType="submit"
                                    className={styles['search-button']}>查询</Button>
                            <Button onClick={handleReset} className={styles['reset-button']}>重置</Button>
                        </Space>
                    </Col>
                </Row>
                <Form form={form} layout="inline" onFinish={handleSearch}>
                    <Form.Item name="applicant" label="申请人">
                        <Input placeholder="设备名称、分组ID"/>
                    </Form.Item>
                    <Form.Item name="type" label="告警级别">
                        <Select placeholder="全部" style={{width: 132}}>
                            <Option value="设备维修">设备维修</Option>
                            <Option value="设备安装">设备安装</Option>
                            <Option value="设备巡检">设备巡检</Option>
                            <Option value="设备更换">设备更换</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="status" label="设备类型">
                        <Select placeholder="请选择状态" style={{width: 132}}>
                            <Option value="待处理">待处理</Option>
                            <Option value="处理中">处理中</Option>
                            <Option value="已完成">已完成</Option>
                            <Option value="已取消">已取消</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="applyTime" label="时间范围">
                        <RangePicker style={{width: 240}}/>
                    </Form.Item>
                </Form>
            </Card>
            {/* 工单列表区域 */}
            <Card className={styles.card} bordered={false} bodyStyle={{paddingTop: 0}}>
                <Title title="工单列表" className={styles.title}/>
                <div className={styles.toolbar}>
                    <div className={styles['button-group']}>
                        <Space size={'large'}>
                            <Button onClick={handleImport} className={styles['search-button']}>
                                批量确认
                            </Button>
                            <Button onClick={handleExport} className={styles['reset-button']}>
                                批量忽略
                            </Button>

                            <Button onClick={handleDelete} className={styles['del-button']}>
                                导出告警
                            </Button>
                        </Space>
                    </div>
                </div>
                <TableWithPagination
                    columns={columns}
                    dataSource={dataSource}
                    fetchData={fetchData}
                    paginationProps={paginationProps}
                    rowSelection={true}
                    tableStyle={{marginTop: 16}}
                    rowKey="id"
                    isPagination={true}
                />
            </Card>
        </div>
    )
}
export default HistoryAlarmsData
