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

const OptimizationTable=()=>{
    const columns=[
        {
            title: '现有规则 ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '优化建议',
            dataIndex: 'suggest',
            key: 'suggest',
        },
        {
            title: '预期效果',
            dataIndex: 'effect',
            key: 'effect',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            fixed:'right',
            render:(_,record)=>{
                return(
                    <Space>
                        <Button type={"link"} style={{color:'#2C9E9D'}} size="small">确认优化</Button>
                        <Button type={'link'} style={{color:'#999999'}}  size="small">忽略</Button>
                    </Space>
                )
            }
        }
    ]
    const dataSource = [
        {
            id: 'ALM-RO02',
            suggest: '建议将温度阈值从 40℃调整为 42℃',
            effect: '减少 15% 误报',
        },
        {
            id: 'ALM-RO04',
            suggest: '建议增加磁盘>90%的持续时间为2分钟',
            effect: '减少临时波动误报',
        },
    ];
    return(
        <>
            <TableWithPagination
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    total: dataSource.length,
                    pageSize: 5,
                }}
                isPagination={false}
            />
        </>
    )
}
const HistoryTable=()=>{
    const columns=[
        {
            title:'优化时间',
            dataIndex:'optimizationTime',
            key:'optimizationTime',
        },
        {
            title:'规则 ID',
            dataIndex:'ruleId',
            key:'ruleId',
        },
        {
            title:'原配置',
            dataIndex:'originalConfig',
            key:'originalConfig',
        },
        {
            title:'优化后配置',
            dataIndex:'optimizationConfig',
            key:'optimizationConfig',
        },
        {
            title:'优化效果',
            dataIndex:'optimizationEffect',
            key:'optimizationEffect',
        }
    ]
    const dataSource=[
        {
            optimizationTime:'2023-10-10 10:00:00',
            ruleId:'ALM-RO02',
            originalConfig:'CPU>95%5分钟',
            optimizationConfig:'温度阈值从 40℃调整为 42℃',
            optimizationEffect:'减少 15% 误报',
        },
        {
            optimizationTime:'2023-10-11 10:00:00',
            ruleId:'ALM-RO04',
            originalConfig:'离线3分钟',
            optimizationConfig:'增加磁盘>90%的持续时间为2分钟',
            optimizationEffect:'减少临时波动误报',
        },
    ]
    return (
        <>
            <TableWithPagination
                columns={columns}
                dataSource={dataSource}
                pagination={{
                    total: dataSource.length,
                    pageSize: 5,
                }}
                isPagination={false}
            />
        </>
    )
}


const RuleConfiguration = ()=>{
    const [form] = Form.useForm();
    const columns = [
        {
            title: '告警 ID',
            dataIndex: 'id',
            key: 'id',
            fixed: 'left', // 固定在左侧
            width: 120,
        },
        {
            title: '规则名称',
            dataIndex: 'ruleName',
            key: 'ruleName',
        },
        {
            title: '设备类型',
            dataIndex: 'deviceType',
            key: 'deviceType',
        },
        {
            title: '告警类型',
            dataIndex: 'alarmType',
            key: 'alarmType',
        },
        {
            title: '触发条件简述',
            dataIndex: 'triggerCondition',
            key: 'triggerCondition',
            width: 200,
        },
        {
            title: '告警级别',
            dataIndex: 'level',
            key: 'level',
            render: (text) => {
                const colorMap = {
                    '紧急': 'red',
                    '严重': 'volcano',
                    '警告': 'orange',
                    '提示': 'green',
                };
                return <Tag color={colorMap[text] || 'default'}>{text}</Tag>;
            },
        },
        {
            title: '周期',
            dataIndex: 'cycle',
            key: 'cycle',
        },
        {
            title: '通知方式',
            dataIndex: 'notification',
            key: 'notification',
        },
        {
            title: '启用状态',
            dataIndex: 'status',
            key: 'status',
            render: (text) => (
                <Badge status={text === '启用' ? 'success' : 'default'} text={text} />
            ),
        },
        {
            title: 'AI优化标记',
            dataIndex: 'aiOptimized',
            key: 'aiOptimized',
            render: (text) => (
                <Tag color={text === '已优化' ? 'green' : text === '未优化' ? 'red' : 'default'}>
                    {text}
                </Tag>
            ),
        },
        {
            title: '操作',
            key: 'action',
            fixed: 'right', // 固定在右侧
            width: 180,
            align:'center',
            render: (_, record) => (
                <Space>
                    <Button style={{color:'#006665'}} type="link" size="small" onClick={() => handleEdit(record)}>
                        编辑
                    </Button>
                    <Button type="link" size="small" danger onClick={() => handleDelete(record)}>
                        删除
                    </Button>
                    <Button  style={{color:'#006665'}} type="link" size="small" onClick={() => handleCopy(record)}>
                        复制
                    </Button>
                </Space>
            ),
        },
    ];
    const dataSource = [
        {
            key: '1',
            id: 'ALM-H001',
            ruleName: '服务器 CPU 高负载',
            deviceType: '服务器',
            alarmType: '性能告警',
            triggerCondition: 'CPU>95% 持续5分钟',
            level: '紧急',
            cycle: '实时检测',
            notification: '短信 +平台',
            status: '启用',
            aiOptimized: '已优化',
        },
        {
            key: '2',
            id: 'ALM-H002',
            ruleName: '温度传感器超限',
            deviceType: '传感器',
            alarmType: '环境告警',
            triggerCondition: '温度>40℃ 或 <0℃',
            level: '严重',
            cycle: '5 分钟检测',
            notification: '邮件 +平台',
            status: '启用',
            aiOptimized: '未优化',
        },
        {
            key: '3',
            id: 'ALM-H003',
            ruleName: '网关离线告警',
            deviceType: '网关',
            alarmType: '连接告警',
            triggerCondition: '离线超过 3 分钟',
            level: '警告',
            cycle: '实时检测',
            notification: '短信 +平台',
            status: '禁用',
            aiOptimized: '已优化',
        },
        {
            key: '4',
            id: 'ALM-H004',
            ruleName: '磁盘使用率告警',
            deviceType: '服务器',
            alarmType: '存储告警',
            triggerCondition: '磁盘>90%',
            level: '提示',
            cycle: '10 分钟检测',
            notification: '平台通知',
            status: '启用',
            aiOptimized: '未优化',
        },
        {
            key: '5',
            id: 'ALM-H005',
            ruleName: '网络丢包率高',
            deviceType: '网关',
            alarmType: '网络告警',
            triggerCondition: '丢包率>30% 持续1分钟',
            level: '紧急',
            cycle: '实时检测',
            notification: '平台通知',
            status: '启用',
            aiOptimized: '已优化',
        },
        {
            key: '6',
            id: 'ALM-H006',
            ruleName: '摄像头画面异常',
            deviceType: '摄像头',
            alarmType: 'AI 识别告警',
            triggerCondition: '画面模糊/遮挡(A识别)',
            level: '严重',
            cycle: '实时检测',
            notification: '平台通知',
            status: '启用',
            aiOptimized: '已优化',
        },
        {
            key: '7',
            id: 'ALM-H007',
            ruleName: '湿度传感器超限',
            deviceType: '传感器',
            alarmType: '环境告警',
            triggerCondition: '湿度>85% 持续2分钟',
            level: '警告',
            cycle: '5 分钟检测',
            notification: '邮件',
            status: '启用',
            aiOptimized: '未优化',
        },
    ];


    // 重置
    const handleReset = () => {
        form.resetFields();
    };
    // 搜索
    const handleSearch = (values) => {
        console.log('搜索条件:', values);
        // 这里可以添加实际的搜索逻辑
    };
    const handleEdit = (record) => {
        console.log('编辑:', record);
        // 这里可以添加实际的编辑逻辑
    };
    // 删除
    const handleDelete = (record) => {
        console.log('删除:', record);
        // 这里可以添加实际的删除逻辑
    };
    // 复制
    const handleCopy = (record) => {
        console.log('复制:', record);
        // 这里可以添加实际的复制逻辑
    };
    return (
        <div style={{backgroundColor:'#f0f7f7',height:'100%',overflowX:'hidden'}}>
            <Row gutter={20} style={{height:'100%'}}>
                <Col span={16} style={{height:'100%'}}>
                    <div style={{width:'100%',height:'100%',backgroundColor:'#fff',padding:20,borderRadius:8}}>
                      <Row style={{marginBottom: 20}}>
                        <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} style={{borderBottom:'1px solid #eeeeee',paddingBottom:20}}>
                            <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="level" 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="是否AI优化">
                                <Radio.Group
                                    defaultValue={1}
                                    options={[
                                        { value: 1, label: '是' },
                                        { value: 2, label: '否' },
                                        { value: 3, label: '全部' },
                                    ]}
                                >
                                </Radio.Group>
                            </Form.Item>
                        </Form>
                        <Row>
                            <div style={{width:'100%',paddingTop:20}}>
                                <Title title="规则列表" />
                                <Row gutter={20} justify="space-between" style={{marginTop:20,}}>
                                    <Col>
                                        <Button className={styles['search-button']} style={{marginRight:30}}>导入规则</Button>
                                        <Button className={styles['reset-button']}>导出规则</Button>
                                    </Col>
                                    <Col>
                                        <Button className={styles['reset-button']} style={{marginRight:30}}>AI推荐模板</Button>
                                        <Button icon={<PlusOutlined/>} className={styles['search-button']}>新增规则</Button>
                                    </Col>
                                </Row>
                                <Row style={{marginTop:20}}>
                                    <TableWithPagination columns={columns} dataSource={dataSource} rowSelection={true}></TableWithPagination>
                                </Row>
                            </div>
                        </Row>
                    </div>
                </Col>
                <Col span={8} style={{height:'100%'}}>
                    <div style={{ backgroundColor: '#fff',padding:20 , borderRadius:8}}>
                        <Row justify="space-between">
                            <Col>
                                <Title title="AI推荐规则" />
                            </Col>
                            <Col>
                                <Button className={styles['search-button']} style={{marginRight:30}}>AI智能优化</Button>
                                <Button className={styles['reset-button']}>AI推荐规则</Button>
                            </Col>
                        </Row>
                        <Row style={{marginTop:20}} gutter={10} >
                            <Col span={12} >
                                <div className={styles['form-item']}>
                                    <Row gutter={[0,20]}>
                                        <Col className={styles['form-item-label']} span={10}>
                                            推荐规则ID：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={14}>
                                            REC-RO01
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            设备类型：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            传感器
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            告警类型：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            湿度告警
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            触发条件：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            湿度＞85% 持续3分钟
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            推荐理由：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            历史湿度≥85% 时设备故障概率提升 40%
                                        </Col>
                                    </Row>
                                    <Row style={{marginTop:20}}>
                                        <Col offset={9} span={15} style={{display:'flex',justifyContent:"space-around"}}>
                                            <Button className={styles['search-button']}>启用</Button>
                                            <Button className={styles['reset-button']}>忽略</Button>
                                        </Col>
                                    </Row>
                                </div>
                            </Col>
                            <Col span={12} >
                                <div className={styles['form-item']}>
                                    <Row gutter={[0,20]}>
                                        <Col className={styles['form-item-label']} span={10}>
                                            推荐规则ID：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={14}>
                                            REC-RO02
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            设备类型：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            服务器
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            告警类型：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            内存告警
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            触发条件：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            内存≥85% 持续 10 分钟
                                        </Col>
                                        <Col className={styles['form-item-label']} span={9}>
                                            推荐理由：
                                        </Col>
                                        <Col className={styles['form-item-content']} span={15}>
                                            原阈值 80% 误报率高，调整后精准度提升 25%
                                        </Col>
                                    </Row>
                                    <Row style={{marginTop:20}}>
                                        <Col offset={9} span={15} style={{display:'flex',justifyContent:"space-around"}}>
                                            <Button className={styles['search-button']}>启用</Button>
                                            <Button className={styles['reset-button']}>忽略</Button>
                                        </Col>
                                    </Row>
                                </div>
                            </Col>
                        </Row>
                        <Row style={{marginTop:20}}>
                            <Title title="优化建议" style={{marginBottom:20}} ></Title>
                            <OptimizationTable></OptimizationTable>
                        </Row>
                        <Row style={{marginTop:20}}>
                            <Title title="AI 优化历史" style={{marginBottom:20}} ></Title>
                            <HistoryTable></HistoryTable>
                        </Row>
                    </div>
                </Col>
            </Row>
        </div>
    )
}
export default RuleConfiguration
