import styles from './InspectionTasks.less'
import {Button, Col, Form, Input, Row, Select, DatePicker} from "antd";
import Title from '../homepage/compontent/title'
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
const {Search}=Input
const {RangePicker}=DatePicker
const InspectionTasks = () => {
    const columns = [
        {
            title: '任务 ID',
            dataIndex: 'taskId',
            key: 'taskId',
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            key: 'taskName',
        },
        {
            title: '关联模板',
            dataIndex: 'template',
            key: 'template',
        },
        {
            title: '任务状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '启动时间',
            dataIndex: 'startTime',
            key: 'startTime',
        },
        {
            title: '进度',
            dataIndex: 'progress',
            key: 'progress',
            render: (text) => `${text}%`,
        },
        {
            title: '操作',
            key: 'actions',
            render: (_, record) => (
                // 这里根据状态显示不同按钮组合
                <div>
                    <Button type="link" size="small" style={{color:'#2C9E9D'}}>编辑</Button>
                    {record.status === '进行中' && <Button type="link" size="small" style={{color:'#006665'}}>暂停</Button>}
                    {record.status === '待启动' && <Button type="link" size="small" style={{color:'#006665'}}>启动</Button>}
                    {record.status === '已暂停' && <Button type="link" size="small" style={{color:'#006665'}}>恢复</Button>}
                    {(record.status === '已完成' || record.status === '待启动' || record.status === '已暂停') && <Button type="link" size="small" style={{color:'#FF4D4F'}}>删除</Button>}
                    {(record.status === '进行中' || record.status === '已完成') && <Button type="link" size="small" style={{color:'#006665'}}>进度查询</Button>}
                </div>
            ),
        },
    ];
    const dataSource = [
        {
            key: '1',
            taskId: 'TSK-001',
            taskName: '核心设备自检任务',
            template: '核心设备自检',
            status: '进行中',
            startTime: '2025-10-30',
            progress: 60,
        },
        {
            key: '2',
            taskId: 'TSK-002',
            taskName: '车间环境预检任务',
            template: '车间环境预检',
            status: '待启动',
            startTime: '---',
            progress: 0,
        },
        {
            key: '3',
            taskId: 'TSK-003',
            taskName: '传感器月检任务',
            template: '传感器月检',
            status: '已完成',
            startTime: '2025-10-29',
            progress: 100,
        },
        {
            key: '4',
            taskId: 'TSK-004',
            taskName: '网关异常预检任务',
            template: '网关异常预检',
            status: '进行中',
            startTime: '2025-10-28',
            progress: 80,
        },
        {
            key: '5',
            taskId: 'TSK-005',
            taskName: '仓库温度预检任务',
            template: '仓库温度预检',
            status: '已完成',
            startTime: '2025-10-27',
            progress: 100,
        },
        {
            key: '6',
            taskId: 'TSK-006',
            taskName: '综合设备监测任务',
            template: '综合设备监测',
            status: '待启动',
            startTime: '---',
            progress: 0,
        },
        {
            key: '7',
            taskId: 'TSK-007',
            taskName: '边缘节点预检任务',
            template: '边缘节点预检',
            status: '已暂停',
            startTime: '2025-10-28',
            progress: 30,
        },
    ];
  return (
    <div style={{ padding: '20px'}}>
        <div style={{paddingBottom:20,borderBottom:'1px solid #eeeeee'}}>
            <Row justify={'space-between'} align={'middle'}>
                <Col>
                    <Title 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>
            <Form layout={"inline"} style={{marginTop:'20px'}}>
                <Row gutter={24}>
                    <Col>
                        <Form.Item  name="taskName">
                            <Search placeholder="分组名称、分组ID" />
                        </Form.Item>
                    </Col>
                   <Col>
                       <Form.Item label={'巡检模板'}  name="taskStatus">
                           <Select style={{width:132}} placeholder="全部" options={[{
                               value: '1',
                               label: '待执行',
                           }, {
                               value: '2',
                               label: '执行中',
                           }, {
                               value: '3',
                               label: '已完成',
                           }]} />
                       </Form.Item>
                   </Col>
                    <Col>
                        <Form.Item label={'任务状态'}  name="inspectionStatus">
                            <Select style={{width:132}} placeholder="全部" options={[{
                                value: '1',
                                label: '待执行',
                            }, {
                                value: '2',
                                label: '执行中',
                            }, {
                                value: '3',
                                label: '已完成',
                            }]} />
                        </Form.Item>
                    </Col>
                    <Col>
                        <Form.Item label={'时间范围'}  name="executionTime">
                            <RangePicker />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </div>
        <div style={{marginTop:20}}>
            <Title title="任务列表"></Title>
            <Row style={{margin:'20px 0'}} justify={'space-between'} align={'middle'}>
                <Col>
                    <Button  className={styles['search-button']} style={{marginRight:'30px'}}>导入任务</Button>
                    <Button  className={styles['reset-button']} style={{marginRight:'30px'}}>导出任务</Button>
                    <Button  className={styles['del-button']} style={{marginRight:'30px'}}>删除</Button>
                    <Button  className={styles['reset-button']}>启动任务</Button>
                </Col>
                <Col>
                    <Button icon={<PlusOutlined/>} className={styles['search-button']}>新建任务</Button>
                </Col>
            </Row>
            <TableWithPagination dataSource={dataSource} columns={columns} rowSelection={true}></TableWithPagination>
        </div>
    </div>
  );
};
export default InspectionTasks;
