import Title from "@/pages/homepage/compontent/title";
import {Button, Col, Row, Space, Switch, Tag} from "antd";
import styles from './ListOfStrategies.less'
import {EditOutlined, FileTextOutlined, PlusOutlined, StopOutlined} from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
const ListOfStrategies = ()=>{
    const dataSource = [
        {
            key: '1',
            strategyId: 'STR-001',
            strategyName: '设备故障紧急通知',
            scenario: '设备故障场景',
            contactGroup: '运维组(系统失效)',
            notificationMethod: '短信 + APP 推送',
            status: '启用',
        },
        {
            key: '2',
            strategyId: 'STR-002',
            strategyName: '系统性能异常通知',
            scenario: '系统性能场景',
            contactGroup: '系统管理员组',
            notificationMethod: '邮件(每 30 分钟重复)',
            status: '启用',
        },
        {
            key: '3',
            strategyId: 'STR-003',
            strategyName: '安全漏洞报警通知',
            scenario: '安全漏洞场景',
            contactGroup: '研发组 + 运维组',
            notificationMethod: '短信 + 邮件 + 电话',
            status: '启用',
        },
        {
            key: '4',
            strategyId: 'STR-004',
            strategyName: '设备监控异常通知',
            scenario: '设备监控场景',
            contactGroup: '运维组(中优先级)',
            notificationMethod: 'APP 推送',
            status: '启用',
        },
        {
            key: '5',
            strategyId: 'STR-005',
            strategyName: '环境监测异常通知',
            scenario: '环境监测场景',
            contactGroup: '运维组(低优先级)',
            notificationMethod: '邮件',
            status: '启用',
        },
        {
            key: '6',
            strategyId: 'STR-006',
            strategyName: '月度监控总站通知',
            scenario: '周期性场景',
            contactGroup: '管理层组',
            notificationMethod: '邮件(空对发送)',
            status: '启用',
        },
        {
            key: '7',
            strategyId: 'STR-007',
            strategyName: '紧急安全事件通知',
            scenario: '重大安全场景',
            contactGroup: '高管组 + 技术专家组',
            notificationMethod: '电话 + 短信 + APP 推送',
            status: '启用',
        },
    ];
    const columns = [
        {
            title: '策略 ID',
            dataIndex: 'strategyId',
            key: 'strategyId',
            width: 120,
            fixed: 'left',
            sorter: (a, b) => a.strategyId.localeCompare(b.strategyId),
        },
        {
            title: '策略名称',
            dataIndex: 'strategyName',
            key: 'strategyName',
            width: 180,
            ellipsis: true,
        },
        {
            title: '适用场景',
            dataIndex: 'scenario',
            key: 'scenario',
            width: 150,
            filters: [
                { text: '设备故障场景', value: '设备故障场景' },
                { text: '系统性能场景', value: '系统性能场景' },
                { text: '安全漏洞场景', value: '安全漏洞场景' },
                { text: '设备监控场景', value: '设备监控场景' },
                { text: '环境监测场景', value: '环境监测场景' },
                { text: '周期性场景', value: '周期性场景' },
                { text: '重大安全场景', value: '重大安全场景' },
            ],
            onFilter: (value, record) => record.scenario === value,
        },
        {
            title: '联系人组',
            dataIndex: 'contactGroup',
            key: 'contactGroup',
            width: 200,
            ellipsis: true,
            render: (text) => {
                const groups = text.split(' + ');
                return groups.map((group, index) => (
                    <Tag key={index} color="blue" style={{ margin: '2px' }}>
                        {group}
                    </Tag>
                ));
            },
        },
        {
            title: '通知方式组合',
            dataIndex: 'notificationMethod',
            key: 'notificationMethod',
            width: 200,
            render: (text) => {
                const methods = text.split(' + ');
                const colors = {
                    '短信': 'green',
                    '邮件': 'orange',
                    '电话': 'red',
                    'APP 推送': 'purple',
                };
                return methods.map((method, index) => {
                    let methodText = method;
                    let color = 'default';

                    // 提取基础方法名称
                    for (const key in colors) {
                        if (method.includes(key)) {
                            methodText = key;
                            color = colors[key];
                            break;
                        }
                    }

                    return (
                        <Tag key={index} color={color} style={{ margin: '2px' }}>
                            {method}
                        </Tag>
                    );
                });
            },
        },
        {
            title: '启用状态',
            dataIndex: 'status',
            key: 'status',
            width: 120,
            render: (text, record) => (
                <Space>
                    <Tag color={text === '启用' ? 'success' : 'default'}>
                        {text}
                    </Tag>
                    <Switch
                        checked={text === '启用'}
                        onChange={(checked) => {
                            // 这里处理状态切换逻辑
                            console.log(`切换策略 ${record.strategyId} 状态为: ${checked ? '启用' : '禁用'}`);
                        }}
                        size="small"
                    />
                </Space>
            ),
        },
        {
            title: '操作',
            key: 'action',
            width: 240,
            fixed: 'right',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <Button
                        type="link"
                        style={{color:'#2C9E9D'}}
                        icon={<EditOutlined />}
                        // onClick={() => handleEdit(record)}
                    >
                        编辑
                    </Button>
                    <Button
                        type="link"
                        style={{color:'#FF826D'}}
                        icon={<StopOutlined />}
                        // onClick={() => handleDisable(record)}
                        // danger
                    >
                        禁用
                    </Button>
                    <Button
                        type="link"
                        style={{color:'#FF8800'}}
                        icon={<FileTextOutlined />}
                        // onClick={() => handleTemplate(record)}
                    >
                        模板化
                    </Button>
                </Space>
            ),
        },
    ];
    return(
        <div style={{padding:'0 20px'}}>
            <Title title={'策略列表'}/>
            <Row style={{marginTop:'20px'}} justify={'space-between'}>
                <Col>
                    <Button className={styles['search-button']} style={{marginRight:'30px'}}>导入策略</Button>
                    <Button className={styles['reset-button']}>导出策略</Button>
                </Col>
                <Col>
                    <Button className={styles['reset-button' ]} style={{marginRight:'30px'}}>模板管理</Button>
                    <Button icon={<PlusOutlined />} className={styles['search-button']}>新增策略</Button>
                </Col>
            </Row>
            <Row style={{marginTop:'20px'}} >
                <TableWithPagination rowSelection={true} dataSource={dataSource} columns={columns}></TableWithPagination>
            </Row>
        </div>
    )
}
export default ListOfStrategies
