import {Button, Col, Pagination, Progress, Row, Table, Tabs, Tag} from "antd";
import Title from '../homepage/compontent/title'
import styles from './Maintenance.less'
import svg1 from '../../assets/img/asset-main1.svg'
import {DownloadOutlined, PlusOutlined, UploadOutlined} from "@ant-design/icons";
import TabPane from "antd/es/tabs/TabPane";
import TableWithPagination from "@/components/assetmangement/table";
const Maintenance = ()=>{
    const progressStyle = [
        {title:'即将到期',num:'12',percent:24,color:'#6E5612',strokeColor:'#FFE666'},
        {title:'已逾期',num:'5',percent:10,color:'#6E1212',strokeColor:'#FF8966'},
        {title:'正常',num:'33',percent:66,color:'#12386E',strokeColor:'#66C9FF'},
    ]
    // 维保计划数据
    const maintenancePlanData = [
        {key: '1', assetName: '核心服务器A', assetType: '硬件-服务器', maintenanceType: '年度硬件维保', nextMaintenanceDate: '2025-10-28', lastMaintenanceDate: '2024-10-28', status: '即将到期', notificationMethod: '短信+平台通知', importance: '核心'},
        {key: '2', assetName: '工业传感器B', assetType: '硬件-传感器', maintenanceType: '故障维保', nextMaintenanceDate: '--', lastMaintenanceDate: '2025-10-20', status: '已逾期', notificationMethod: '邮件+平台通知', importance: '重要'},
        {key: '3', assetName: '网关C', assetType: '硬件-网关', maintenanceType: '季度软件维保', nextMaintenanceDate: '2025-11-15', lastMaintenanceDate: '2025-08-15', status: '正常', notificationMethod: '平台通知', importance: '普通'},
        {key: '4', assetName: '数据库集群D', assetType: '硬件-服务器', maintenanceType: '月度巡检维保', nextMaintenanceDate: '2025-10-30', lastMaintenanceDate: '2025-09-30', status: '即将到期', notificationMethod: '短信+邮件', importance: '核心'},
        {key: '5', assetName: '边缘计算节点E', assetType: '硬件-网关', maintenanceType: '固件升级维保', nextMaintenanceDate: '2025-12-01', lastMaintenanceDate: '2025-09-01', status: '正常', notificationMethod: '平台通知', importance: '重要'},
        {key: '6', assetName: '温湿度传感器F', assetType: '硬件-传感器', maintenanceType: '年度校准维保', nextMaintenanceDate: '2025-11-05', lastMaintenanceDate: '2024-11-05', status: '正常', notificationMethod: '邮件通知', importance: '普通'},
    ];
    // 状态标签颜色
    const getStatusColor = (status) => {
        switch(status) {
            case '正常': return '#52c41a';
            case '即将到期': return '#faad14';
            case '已逾期': return '#ff4d4f';
            default: return '#1890ff';
        }
    };
    // 维保计划列表列定义
    const planColumns = [
        {title: '序号', dataIndex: 'key', key: 'key', width: 60},
        {title: '资产名称', dataIndex: 'assetName', key: 'assetName'},
        {title: '资产类型', dataIndex: 'assetType', key: 'assetType'},
        {title: '维保类型', dataIndex: 'maintenanceType', key: 'maintenanceType'},
        {title: '下次维保时间', dataIndex: 'nextMaintenanceDate', key: 'nextMaintenanceDate'},
        {title: '上次维保时间', dataIndex: 'lastMaintenanceDate', key: 'lastMaintenanceDate'},
        {title: '维保状态', dataIndex: 'status', key: 'status',
            render: (status) => <span style={{color: getStatusColor(status)}}>{status}</span>
        },
        {title: '提醒方式', dataIndex: 'notificationMethod', key: 'notificationMethod'},
        {title: '资产重要程度', dataIndex: 'importance', key: 'importance',
            render: (importance) => <span>{importance}</span>
        },
        {title: '操作', key: 'action',align:'center',
            render: () => (
                <span>
                    <a style={{color:'#2C9E9D',marginRight:'10px'}} href="#">编辑</a>
                    <a style={{color:'#2C9E9D',marginRight:'10px'}} href="#">执行</a>
                    <a style={{color:'#006665'}} href="#">记录</a>
                </span>
            )
        },
    ];
    const items = [
        {key: '1', label: <Title title={'维保计划列表'}/>,children:<TableWithPagination columns={planColumns} dataSource={maintenancePlanData} rowSelection={false}/>},
        {key: '2', label: <span style={{fontSize:'20px'}}>维保记录列表</span>,children:<TableWithPagination columns={planColumns} dataSource={maintenancePlanData} rowSelection={false}/>},
    ];
    const operations = <div style={{marginLeft: 20, display: 'flex'}}>
        <Button className={styles['reset-button']} type="default"  style={{marginRight: 30}}>导入维保计划</Button>
        <Button className={styles['reset-button']} type="default"  style={{marginRight: 30}}>导出维保数据</Button>
        <Button className={styles['search-button']} type="primary" icon={<PlusOutlined/>}>新增维保计划</Button>
    </div>;


    // 自定义提醒规则数据
    const reminderRuleData = [
        {key: '1', ruleId: '1', maintenanceType: '年度硬件维保', importance: '核心', advanceNoticeDays: '7', notificationMethod: '短信+邮件+平台通知', repeatInterval: '24', status: '启用'},
        {key: '2', ruleId: '2', maintenanceType: '故障维保', importance: '重要', advanceNoticeDays: '0(立即提醒)', notificationMethod: '短信+平台通知', repeatInterval: '12', status: '启用'},
        {key: '3', ruleId: '3', maintenanceType: '软件版本迭代', importance: '普通', advanceNoticeDays: '3', notificationMethod: '平台通知', repeatInterval: '--(仅一次)', status: '启用'},
    ];
    // 自定义提醒规则列定义
    const ruleColumns = [
        {
            title: '',
            dataIndex: 'select',
            key: 'select',
            width: 40,
            render: () => <input type="checkbox" />
        },
        {title: '序号', dataIndex: 'ruleId', key: 'ruleId', width: 60},
        {title: '维保类型', dataIndex: 'maintenanceType', key: 'maintenanceType'},
        {title: '资产重要程度', dataIndex: 'importance', key: 'importance'},
        {title: '提前提醒时间(天)', dataIndex: 'advanceNoticeDays', key: 'advanceNoticeDays'},
        {title: '提醒方式(可多选)', dataIndex: 'notificationMethod', key: 'notificationMethod'},
        {title: '重复提醒间隔(小时)', dataIndex: 'repeatInterval', key: 'repeatInterval'},
        {title: '启用状态', dataIndex: 'status', key: 'status',
            render: (status) => <Tag color="green">{status}</Tag>
        },
        {title: '操作', key: 'action', align: 'center',
            render: () => (
                <span>
                    <a style={{color:'#2C9E9D',marginRight:'10px'}} href="#">编辑</a>
                    <a style={{color:'#ff4d4f'}} href="#">删除</a>
                </span>
            )
        },
    ];
    return (
        <div>
        <div style={{backgroundColor: '#f0f7f7', overflow: 'hidden'}}>
            <Row gutter={20} style={{height: '100%'}}>
                <Col span={4}>
                    <div style={{padding: '20px', backgroundColor: '#fff', height: '100%'}}>
                        <Title title={'维保任务总览'}></Title>
                        <div style={{
                            display: 'flex',
                            flexDirection: 'column',
                           marginTop: '20px',
                       }}>
                           <div className={styles['item']}>
                               <Row wrap={false}>
                                   <Col span={12}>
                                       <div className={styles['item-num']}>50</div>
                                       <div className={styles['item-title']}>总计划数</div>
                                   </Col>
                                   <Col span={12} style={{textAlign:'right'}}>
                                       <img src={svg1} alt=""/>
                                   </Col>
                               </Row>
                           </div>
                           {
                               progressStyle.map((item)=>{
                                   return (
                                       <div className={styles['item']}>
                                           <Row wrap={false}>
                                               <Col span={12}>
                                                   <div className={styles['item-num']} style={{color: item.color}}>{item.num}
                                                   </div>
                                                   <div className={styles['item-title']}>{item.title}</div>
                                               </Col>
                                               <Col span={12} style={{textAlign: 'right'}}>
                                                   <Progress type={'circle'} percent={item.percent} size={[76, 76]}
                                                             strokeColor={item.strokeColor}/>
                                               </Col>
                                           </Row>
                                       </div>
                                   )
                               })
                           }
                       </div>
                   </div>
               </Col>
               
               <Col span={20}>
                   <Row style={{backgroundColor: '#fff',padding:'20px'}}>
                       <Tabs tabBarExtraContent={operations} items={items} style={{flex:'1'}}/>
                   </Row>
                   <Row style={{marginTop:'20px',backgroundColor:'#fff',padding:'20px'}}>
                        <Title title={'自定义提醒规则配置'}></Title>
                        <Row style={{width:'100%',marginTop:'20px'}}>
                            <Col span={12}>
                                <Button className={styles['search-button']} type="default" style={{marginRight: 30}}>导入规则模板</Button>
                                <Button className={styles['reset-button']} type="default"  style={{marginRight: 30}}>导出规则模板</Button>
                                <Button className={styles['search-button']} type="primary" style={{marginRight: 30}}>启用</Button>
                                <Button className={styles['del-button']} type="primary" >禁用</Button>
                            </Col>
                            <Col span={12} style={{textAlign:'right'}}>
                                <Button className={styles['search-button']} type="default"  icon={<PlusOutlined></PlusOutlined>} >新增规则</Button>

                            </Col>
                        </Row>
                       <Row style={{width:'100%',marginTop:'20px',marginBottom:'50px'}}>
                           <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination>
                       </Row>
                   </Row>
               </Col>
           </Row>
        </div>
        </div>
    )
}
export default Maintenance;
