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

// 模拟数据
const mockData = [
    {
        key: '1',
        alarmId: 'ALM-001',
        alarmLevel: '紧急',
        deviceName: '核心服务器 A',
        deviceType: '服务器',
        alarmType: 'CPU 使用率>96%',
        triggerTime: '2025-10-30',
        status: '未处理',
        operations: ['处理', '确认']
    },
    {
        key: '2',
        alarmId: 'ALM-002',
        alarmLevel: '严重',
        deviceName: '工业网关 B',
        deviceType: '网关',
        alarmType: '离线超过 5 分钟',
        triggerTime: '2025-10-30',
        status: '未处理',
        operations: ['处理', '确认']
    },
    {
        key: '3',
        alarmId: 'ALM-003',
        alarmLevel: '警告',
        deviceName: '遥感传感器 C',
        deviceType: '传感器',
        alarmType: '遥测>40℃',
        triggerTime: '2025-10-30',
        status: '已确认',
        operations: ['处理', '详情']
    },
    {
        key: '4',
        alarmId: 'ALM-004',
        alarmLevel: '提示',
        deviceName: '园区摄像头 D',
        deviceType: '摄像头',
        alarmType: '画面模糊(AI识别)',
        triggerTime: '2025-10-30',
        status: '已忽略',
        operations: ['详情', '取消忽略']
    },
    {
        key: '5',
        alarmId: 'ALM-005',
        alarmLevel: '紧急',
        deviceName: '存储节点 E',
        deviceType: '服务器',
        alarmType: '磁盘使用率>90%',
        triggerTime: '2025-10-30',
        status: '未处理',
        operations: ['处理', '确认']
    },
    {
        key: '6',
        alarmId: 'ALM-006',
        alarmLevel: '严重',
        deviceName: '边缘网关 F',
        deviceType: '网关',
        alarmType: '网络丢包率>30%',
        triggerTime: '2025-10-30',
        status: '未处理',
        operations: ['处理', '确认']
    },
    {
        key: '7',
        alarmId: 'ALM-007',
        alarmLevel: '警告',
        deviceName: '遥感传感器 G',
        deviceType: '传感器',
        alarmType: '遥测>80%',
        triggerTime: '2025-10-30',
        status: '未处理',
        operations: ['处理', '确认']
    },
];

// 表格列配置
const columns = [
    {
        title: '告警 ID',
        dataIndex: 'alarmId',
        key: 'alarmId',
        width: 100,
    },
    {
        title: '告警级别',
        dataIndex: 'alarmLevel',
        key: 'alarmLevel',
        width: 100,
        render: (text) => {
            const colorMap = {
                '紧急': '#ff4d4f',
                '严重': '#fa8c16',
                '警告': '#faad14',
                '提示': '#52c41a'
            };
            return <span style={{ color: colorMap[text] || '#000' }}>{text}</span>;
        }
    },
    {
        title: '设备名称',
        dataIndex: 'deviceName',
        key: 'deviceName',
        width: 120,
    },
    {
        title: '设备类型',
        dataIndex: 'deviceType',
        key: 'deviceType',
        width: 100,
    },
    {
        title: '告警类型',
        dataIndex: 'alarmType',
        key: 'alarmType',
        width: 150,
    },
    {
        title: '触发时间',
        dataIndex: 'triggerTime',
        key: 'triggerTime',
        width: 120,
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: (text) => {
            const statusColor = {
                '未处理': '#FFBC00',
                '已确认': '#2C9E9D',
                '已忽略': '#666666'
            };
            return <span style={{ color: statusColor[text] || '#000' }}>{text}</span>;
        }
    },
    {
        title: '操作',
        key: 'operations',
        width: 200,
        align: 'center',
        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 ImplementWarnings = () => {
    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 ImplementWarnings
