import {Button, Col, Row, Select, Space} from "antd";
import Title from '../homepage/compontent/title'
import styles from './InspectionTemplate.less'
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
const InspectionTemplate = () => {
    const columns = [
        {
            title: '模板 ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '模板名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            filters: [
                { text: '设备巡检', value: '设备巡检' },
                { text: '环境巡检', value: '环境巡检' },
                { text: '综合巡检', value: '综合巡检' },
            ],
            onFilter: (value, record) => record.type === value,
        },
        {
            title: '巡检周期',
            dataIndex: 'cycle',
            key: 'cycle',
            sorter: (a, b) => {
                const order = { '实时触发': 0, '天': 1, '周': 2, '月': 3 };
                return order[a.cycle] - order[b.cycle];
            },
        },
        {
            title: '触发逻辑',
            dataIndex: 'triggerLogic',
            key: 'triggerLogic',
            ellipsis: true,
        },
        {
            title: '地点范围',
            dataIndex: 'location',
            key: 'location',
        },
        {
            title: 'AI推荐度',
            dataIndex: 'aiRecommendation',
            key: 'aiRecommendation',
            render: (text) => {
                const colorMap = {
                    '高': 'red',
                    '中': 'orange',
                    '次': 'green'
                };
                return (
                    <span style={{ color: colorMap[text], fontWeight: 'bold' }}>
          {text}
        </span>
                );
            },
            // sorter: (a, b) => {
            //     const order = { '高': 0, '中': 1, '次': 2 };
            //     return order[a.aiRecommendation] - order[b.aiRecommendation];
            // },
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => handleEdit(record)} style={{color:'#2C9E9D'}}>编辑</a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>删除</a>
                    <a onClick={() => handleCopy(record)} style={{color: '#006665'}}>复制</a>
                </Space>
            ),
            align: 'center',
        },
    ];
    const dataSource = [
        {
            key: '1',
            id: 'TPL-001',
            name: '核心设备日检',
            type: '设备巡检',
            cycle: '天',
            triggerLogic: '设备在线时触发参数全检',
            location: '机房 A',
            aiRecommendation: '高',
        },
        {
            key: '2',
            id: 'TPL-002',
            name: '车间环境周检',
            type: '环境巡检',
            cycle: '周',
            triggerLogic: '温湿度超阈值时触发专项巡检',
            location: '车间 B',
            aiRecommendation: '次',
        },
        {
            key: '3',
            id: 'TPL-003',
            name: '传感器月检',
            type: '设备巡检',
            cycle: '月',
            triggerLogic: '设备离线时触发故障排查流程',
            location: '园区传感器组',
            aiRecommendation: '高',
        },
        {
            key: '4',
            id: 'TPL-004',
            name: '网关异常巡检',
            type: '设备巡检',
            cycle: '实时触发',
            triggerLogic: '网关离线时自动触发巡检',
            location: '全网关设备',
            aiRecommendation: '高',
        },
        {
            key: '5',
            id: 'TPL-005',
            name: '仓库温湿度检',
            type: '环境巡检',
            cycle: '天',
            triggerLogic: '温湿度波动>5% 时触发巡检',
            location: '仓库 C',
            aiRecommendation: '中',
        },
        {
            key: '6',
            id: 'TPL-006',
            name: '综合设备巡检',
            type: '综合巡检',
            cycle: '周',
            triggerLogic: '设备状态异常时触发分级巡检',
            location: '办公楼设备组',
            aiRecommendation: '中',
        },
        {
            key: '7',
            id: 'TPL-007',
            name: '边缘节点巡检',
            type: '设备巡检',
            cycle: '天',
            triggerLogic: '负载>80% 时触发性能巡检',
            location: '边缘计算区',
            aiRecommendation: '高',
        },
    ];

// 操作函数示例
    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%', width: '100%',overflowX: 'hidden' }}>
           <Row gutter={20} style={{height:'100%'}}>
               <Col span={15}>
                   <div style={{backgroundColor:'#fff',height:'100%',borderRadius:'6px',padding:'20px'}}>
                       <div style={{borderBottom:'1px solid #eeeeee',paddingBottom:'20px'}}>
                           <Row  style={{width:'100%'}} justify={"space-between"} align={"middle"}>
                           <Col>
                                <Title title='查询条件'/>
                           </Col>
                            <Col>
                                <Button icon={<SearchOutlined />} className={styles['search-button']} style={{marginRight:'30px'}}>查询</Button>
                                <Button icon={<SyncOutlined />} className={styles['reset-button']}>重置</Button>
                            </Col>
                            </Row>
                            <Row gutter={20} style={{marginTop:'20px'}}>
                           <Col>
                               <label htmlFor="">模板类型：</label>
                               <Select options={[{
                                   label:'全部',
                                   value:'1'
                               },{
                                   label:'巡检模板',
                                   value:'2'
                               }]}
                                style={{width:132}}
                               ></Select>
                           </Col>
                           <Col>
                               <label htmlFor="">AI推荐度：</label>
                               <Select
                                   options={
                                        [
                                            {label:'全部', value:'1'},
                                            {label:'高', value:'2'},
                                            {label:'中', value:'3'},
                                            {label:'低', value:'4'}
                                        ]
                                }
                               style={{width:132}}
                               ></Select>
                           </Col>
                       </Row>
                       </div>
                       <div style={{marginTop:'20px'}}>
                           <Title title='模板列表'/>
                           <Row  style={{margin:'20px 0'}} 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'}}>AI推荐模板</Button>
                                   <Button icon={<PlusOutlined/>} className={styles['search-button']}>新增模板</Button>
                               </Col>
                           </Row>
                           <TableWithPagination columns={columns} dataSource={dataSource} rowSelection={true}>
                           </TableWithPagination>
                       </div>
                   </div>
               </Col>
               <Col span={9}>
                   <div style={{backgroundColor:'#fff',borderRadius:'6px',padding:'20px'}}>
                        <Title title='逻辑配置面板'/>
                       <img src={require('@/assets/img/img.png')} alt="" style={{width:'100%',height:'100%'}}/>
                   </div>
                   <div style={{backgroundColor: '#fff', borderRadius: '6px', padding: 20, marginTop: 20 ,marginBottom:'50px'}}>
                       <Title title='AI 推荐辅助面板'/>
                       <div className={styles['ai-recommend-panel']}>
                           <div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}>
                               <span style={{
                                   width: 5,
                                   height: 5,
                                   backgroundColor: '#006665',
                                   borderRadius: '50%',
                                   marginRight: 10
                               }}></span><span>推荐项 1：</span>
                           </div>
                           <p>在‘核心设备日检’中增加‘硬盘使用率≥90% 时自动触发巡检’</p>
                           <p style={{color: '#006665'}}>理由 “历史数据中硬盘满导致的故障占比 15%”</p>
                           <div style={{textAlign:'right'}}>
                               <Button className={styles['search-button']} style={{marginRight:'30px'}}>采纳</Button>
                               <Button className={styles['reset-button']}>忽略</Button>
                           </div>
                       </div>
                       <div className={styles['ai-recommend-panel']}>
                           <div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}>
                               <span style={{
                                   width: 5,
                                   height: 5,
                                   backgroundColor: '#006665',
                                   borderRadius: '50%',
                                   marginRight: 10
                               }}></span><span>推荐项 2：</span>
                           </div>
                           <p>将‘车间环境周检’的触发条件调整为‘温湿度波动＞3% 时触发</p>
                           <p style={{color: '#006665'}}>理由 “该条件下环境异常的识别率提升 20%”</p>
                           <div style={{textAlign: 'right'}}>
                               <Button className={styles['search-button']} style={{marginRight: '30px'}}>采纳</Button>
                               <Button className={styles['reset-button']}>忽略</Button>
                           </div>
                       </div>
                   </div>
               </Col>
           </Row>
        </div>
    )
}
export default InspectionTemplate
