import {Button, Col, Drawer, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table, Tag, Tree} from "antd";
import {useEffect, useRef, useState} from "react";
import styles from './InspectionTaskPlan.less'
import {Title} from "@/pages/inspectiontasks/InspectionTasks";
import btnImg1 from '@/assets/img/planBtn1.png'
import btnImg2 from '@/assets/img/planBtn2.png'
import btnImg3 from '@/assets/img/planBtn3.png'
import paibanBg from '@/assets/img/paiban.png'
import {
    DeleteOutlined,
    DownOutlined,
    EditOutlined,
    ExportOutlined,
    EyeOutlined,
    PlusOutlined,
    RedoOutlined
} from "@ant-design/icons";
const {Search}=Input
export const MenuBg=(props)=>{
    return (
        <div className={styles["parallelogram-container"]}>
            <span className={styles["text-content"]}>{props.text}</span>
            <span className={styles["text-content"]} style={{margin:'0'}}>{props.icon}</span>

        </div>
    )
}
//抽屉
const Drawers=(props)=>{

    return  (
        <Drawer
            title='详情'
            closable={{'aria-label': 'Close Button'}}
            onClose={props.onClose}
            open={props.open}
            width={500}
            className={styles['customDrawer']}
        >
            <div style={{padding:'20px'}}>
                <Title title={'基本信息'} ></Title>
                <Row style={{margin:'20px 0'}}>
                    <Col span={12}>
                        <Row style={{marginBottom:'20px'}}>
                            <Col span={8} className={styles['font1']}>所属班次</Col>
                            <Col span={16}>{props.row?.shifts}</Col>
                        </Row>
                        <Row>
                            <Col span={8} className={styles['font1']}>路线名称</Col>
                            <Col span={16}>{props.row?.name}</Col>
                        </Row>
                    </Col>
                    <Col span={12}>
                        <Row style={{marginBottom:'20px'}}>
                            <Col span={8} className={styles['font1']}>所属专业</Col>
                            <Col span={16}>{props.row?.affiliation}</Col>
                        </Row>
                        <Row>
                            <Col span={8} className={styles['font1']}>创建时间</Col>
                            <Col span={16}>{props.row?.time}</Col>
                        </Row>

                    </Col>
                </Row>
                <Title title={'巡检设备范围'}></Title>
                <div className={styles['box']}>
                    <Tag className={styles['tag']} color="magenta">发电机</Tag>
                    <Tag className={styles['tag']} color="red">中水处区</Tag>
                    <Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
                    <Tag className={styles['tag']} color="orange">1#炉右上炉膛温度</Tag>
                    <Tag className={styles['tag']} color="gold">1#冷干机</Tag>
                </div>
                <Title title={'巡视项详情'}></Title>
                <Row style={{margin:'20px 0 10px 0'}}>
                    <Tag className={styles['tag']} color="magenta">发电机</Tag>
                </Row>
                <Row style={{margin:'0 0 20px 0'}}>
                    <ul className={styles['ul']}>
                        <li>外观检查：有无破损、油污 </li>
                        <li>温度检测：轴承温度≤70℃，定子温度≤105℃</li>
                    </ul>
                </Row>
                <Row style={{margin:'20px 0 10px 0'}}>
                    <Tag className={styles['tag']} color="volcano">1#增压风机变频器</Tag>
                </Row>
                <Row style={{margin:'0 0 20px 0'}}>
                    <ul className={styles['ul']}>
                        <li>运行指示灯：是否正常亮起 </li>
                        <li>散热风扇：是否正常转动</li>
                        <li>输出电压：380V±5%</li>
                    </ul>
                </Row>

            </div>
        </Drawer>

    )
}
// 员工表格组件
const EmployeeTable = () => {
    // 状态管理
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [loading, setLoading] = useState(false); // 加载状态
    const [total, setTotal] = useState(0); // 总条数
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页条数
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID

    // 表格列配置
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align:'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '工号',
            dataIndex: 'employeeId',
            key: 'employeeId',
            align:'center',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align:'center',
        },
        {
            title: '性别',
            dataIndex: 'gender',
            key: 'gender',
            align:'center',
        },
        {
            title: '所属部门',
            dataIndex: 'department',
            key: 'department',
            align:'center',
        },
        {
            title: '岗位',
            dataIndex: 'position',
            key: 'position',
            align:'center',
        },
        {
            title: '手机号码',
            dataIndex: 'phone',
            key: 'phone',
            align:'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align:'center',
            render: (status) => (
                <Switch checked={status}  />
            )
        },
        {
            title: '入职时间',
            dataIndex: 'hireDate',
            key: 'hireDate',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ];

    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };

    // 获取表格数据
    const fetchTableData = async () => {
        try {
            setLoading(true);
            // 这里是预留的接口调用位置
            // 实际项目中替换为真实接口请求
            // const response = await api.getEmployeeList({
            //   page: currentPage,
            //   pageSize: pageSize
            // });

            // 模拟数据 - 实际项目中删除
            const mockData = [
                {
                    key: '1',
                    employeeId: 'GH001',
                    name: '钱佳仪',
                    gender: '女',
                    department: '运行部',
                    position: '巡检员',
                    phone: '189 7731 3118',
                    status: true,
                    hireDate: '2025-09-13'
                },
                {
                    key: '2',
                    employeeId: 'GH002',
                    name: '孙兆洪',
                    gender: '女',
                    department: '安保部',
                    position: '安全员',
                    phone: '156 9747 2741',
                    status: true,
                    hireDate: '2025-09-12'
                },
                {
                    key: '3',
                    employeeId: 'GH003',
                    name: '季丹',
                    gender: '男',
                    department: '设备部',
                    position: '维修工',
                    phone: '151 4456 8916',
                    status: true,
                    hireDate: '2025-08-16'
                },
                {
                    key: '4',
                    employeeId: 'GH004',
                    name: '赵晓辉',
                    gender: '男',
                    department: '调度室',
                    position: '调度员',
                    phone: '181 8511 3486',
                    status: true,
                    hireDate: '2025-08-15'
                },
                {
                    key: '5',
                    employeeId: 'GH005',
                    name: '何扑金',
                    gender: '女',
                    department: '消防班',
                    position: '消防员',
                    phone: '183 3220 4078',
                    status: true,
                    hireDate: '2025-07-20'
                },
                {
                    key: '6',
                    employeeId: 'GH006',
                    name: '吴国立',
                    gender: '男',
                    department: '综合部',
                    position: '文员',
                    phone: '187 5703 5618',
                    status: false,
                    hireDate: '2025-07-17'
                }
            ];

            // 模拟接口返回 - 实际项目中使用接口数据
            setDataSource(mockData);
            setTotal(85); // 总条数，实际项目中从接口获取
        } catch (error) {
            console.error('获取员工数据失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);

    // 处理查看详情
    const handleView = (record) => {
        // 预留查看详情逻辑
        console.log('查看详情:', record);
    };

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };

    // 渲染表格
    return (
        <Table
            rowSelection={{
                type: 'checkbox',
                ...rowSelection,
            }}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{width:'100%',}}

        />
    );
};
const GroupTable=()=>{
    //状态管理
    const [dataSource,setDataSource]=useState([]) //表格数据
    const [loading,setLoading]=useState(false) //加载状态
    const [total,setTotal]=useState(0)
    const [currentPage,setCurrentPage]=useState(1)
    const [pageSize,setPageSize]=useState(10)
    const [selectedRowKeys,setSelectedRowKeys]=useState([])//选中行的id

    const columns=[
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align:'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '班组编号',
            dataIndex: 'groupId',
            key: 'groundId',
            align:'center',
        },
        {
            title: '班组姓名',
            dataIndex: 'groupName',
            key: 'groupName',
            align:'center',
        },
        {
            title: '班组长',
            dataIndex: 'groupHeader',
            key: 'groupHeader',
            align:'center',
        },
        {
            title: '成员数量',
            dataIndex: 'num',
            key: 'num',
            align:'center',
        },
        {
            title: '负责区域',
            dataIndex: 'position',
            key: 'position',
            align:'center',
        },
        {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
            align:'center',
        },
        {
            title: '班组状态',
            dataIndex: 'status',
            key: 'status',
            align:'center',
            render: (status) => (
                <Switch checked={status}  />
            )
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align:'center',
        },
        {
            title:'备注',
            dataIndex:'remarks',
            key:'remarks',
            align:'center'
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ]
    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };
    const fetchTableData=()=>{
        try{
            setLoading(true)
            const mockData=[
                {
                    key: '1',
                    groupId: 'GH001',
                    groupName: '输油运行一班',
                    groupHeader: '钱佳仪',
                    num: '8',
                    position: '油罐储存区 A、B 区',
                    phone: '189 7731 3118',
                    status: true,
                    createTime: '2025-09-13',
                    remarks:'负责日常输油设备巡检与操作',
                },
                {
                    key: '2',
                    groupId: 'GH002',
                    groupName: '消防应急班组',
                    groupHeader: '何颖颀',
                    num: '6',
                    position: '全厂区消防系统',
                    phone: '156 9747 2741',
                    status: true,
                    createTime: '2025-09-12',
                    remarks:'含2 名持证消防设施操作员',
                },
                {
                    key: '3',
                    groupId: 'GH003',
                    groupName: '设备维保班组',
                    groupHeader: '周遵武',
                    num: '10',
                    position: '泵房、工艺设备区',
                    phone: '151 4456 8916',
                    status: true,
                    createTime: '2025-08-16',
                    remarks:'擅长油泵、输油管道维护',
                },
                {
                    key: '4',
                    groupId: 'GH004',
                    groupName: '装卸作业班组',
                    groupHeader: '钱博西',
                    num: '7',
                    position: '油品装卸区站台',
                    phone: '181 8511 3486',
                    status: true,
                    createTime: '2025-08-15',
                    remarks:'专注装卸作业安全监护',
                },
                {
                    key: '5',
                    groupId: 'GH005',
                    groupName: '工艺调和班组',
                    groupHeader: '周缙绅',
                    num: '9',
                    position: '调和工艺区 1-3 号罐',
                    phone: '183 3220 4078',
                    status: true,
                    createTime: '2025-07-20',
                    remarks:'负责油品调和工艺参数管控',
                },
                {
                    key: '6',
                    groupId: 'GH006',
                    groupName: '临时支援班组',
                    groupHeader: '周江',
                    num: '4',
                    position: '全厂区(机动)',
                    phone: '187 5703 5618',
                    status: false,
                    createTime: '2025-07-17',
                    remarks:'项目结束，暂停用待复用',
                }
            ]
            setDataSource(mockData)
            setTotal(85)

        }catch(error){
            console.error(error)
        }finally{
            setLoading(false)
        }
    }
    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);
    // 处理查看详情
    const handleView = (record) => {
        // 预留查看详情逻辑
        console.log('查看详情:', record);
    };

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };
    return(
        <Table
            rowSelection={{
                type: 'checkbox',
                ...rowSelection,
            }}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{width:'100%',}}

        />
    )
}
const TimeTable=()=>{
    //状态管理
    const [dataSource,setDataSource]=useState([]) //表格数据
    const [loading,setLoading]=useState(false) //加载状态
    const [total,setTotal]=useState(0)
    const [currentPage,setCurrentPage]=useState(1)
    const [pageSize,setPageSize]=useState(10)
    const [selectedRowKeys,setSelectedRowKeys]=useState([])//选中行的id
    const [open,setOpen]=useState(false)
    const [row,setRow]=useState(null)
    const columns=[
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align:'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '线路ID',
            dataIndex: 'id',
            key: 'id',
            align:'center',
        },
        {
            title: '线路名称',
            dataIndex: 'name',
            key: 'name',
            align:'center',
        },
        {
            title: '所属班次',
            dataIndex: 'shifts',
            key: 'shifts',
            align:'center',
        },
        {
            title: '所属专业',
            dataIndex: 'affiliation',
            key: 'affiliation',
            align:'center',
        },
        {
            title: '涉及区域',
            dataIndex: 'position',
            key: 'position',
            align:'center',
        },
        {
            title: '设备数量',
            dataIndex: 'deviceNum',
            key: 'deviceNum',
            align:'center',
        },
        {
            title: '巡视项数量',
            dataIndex: 'lookNum',
            key: 'lookNum',
            align:'center',

        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align:'center',
            render: (status) => (
                <Switch checked={status}  />
            )
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                </Space>
            ),
        },
    ]
    const fetchTableData=()=>{
        try{
            setLoading(true)
            const mockData=[
                {
                    key: '1',
                    id: 'GH001',
                    name: '白班电气巡检线 1',
                    shifts: '白班',
                    affiliation: '电气专业',
                    position: '发电机、中水处区',
                    deviceNum: '22',
                    lookNum: 3,
                    status: 'true',
                    time:'2025-03-31'
                },
                {
                    key: '2',
                    id: 'GH001',
                    name: '白班电气巡检线 1',
                    shifts: '白班',
                    affiliation: '电气专业',
                    position: '发电机、中水处区',
                    deviceNum: '22',
                    lookNum: 3,
                    status: 'true',
                    time:'2025-05-31'
                },


            ]
            setDataSource(mockData)
            setTotal(85)

        }catch(error){
            console.error(error)
        }finally{
            setLoading(false)
        }
    }
    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);
    // 处理查看详情
    const handleView = (record) => {
        console.log('查看详情:', record);
        setRow(record)
        setOpen(true)
    };

    return(
        <>
            <Table
                columns={columns}
                dataSource={dataSource}
                loading={loading}
                pagination={false} // 关闭表格自带分页，使用外部分页组件
                rowKey="key"
                style={{width:'100%',}}
            />
            <Drawers
                open={open}
                onClose={()=>setOpen(false)}
                row={row}
            >

            </Drawers>
        </>

    )
}
const StandardTable=()=>{
    // 状态管理
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [loading, setLoading] = useState(false); // 加载状态
    const [total, setTotal] = useState(0); // 总条数
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页条数
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID

    // 表格列配置
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            width: 100,
            align:'center',
            render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
        },
        {
            title: '方案名称',
            dataIndex: 'name',
            key: 'name',
            align:'center',
        },
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
            align:'center',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align:'center',
            render: (status) => (
                <Switch checked={status}  />
            )
        },
        {
            title: '最后更新时间',
            dataIndex: 'time',
            key: 'time',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleView(record)} style={{ color: '#2C9E9D' }}>
                        <EyeOutlined /> 查看详情
                    </a>
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ];

    // 选择框配置
    const rowSelection = {
        selectedRowKeys,
        onChange: (newSelectedRowKeys) => {
            setSelectedRowKeys(newSelectedRowKeys);
        },
    };

    // 获取表格数据
    const fetchTableData = async () => {
        try {
            setLoading(true);
            // 这里是预留的接口调用位置
            // 实际项目中替换为真实接口请求
            // const response = await api.getEmployeeList({
            //   page: currentPage,
            //   pageSize: pageSize
            // });

            // 模拟数据 - 实际项目中删除
            const mockData = [
                {
                    key: '1',
                    name: '输油设备巡检标准',
                    version: 'V2.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '2',
                    name: '消防系统巡检标准',
                    version: 'V1.1',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '3',
                    name: '电气设备巡检标准',
                    version: 'V1.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '4',
                    name: '输油设备巡检标准',
                    version: 'V2.0',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '5',
                    name: '消防系统巡检标准',
                    version: 'V1.1',
                    status: true,
                    time: '2025-09-13'
                },
                {
                    key: '6',
                    name: '电气设备巡检标准',
                    version: 'V1.0',
                    status: true,
                    time: '2025-09-13'
                },


            ];

            // 模拟接口返回 - 实际项目中使用接口数据
            setDataSource(mockData);
            setTotal(85); // 总条数，实际项目中从接口获取
        } catch (error) {
            console.error('获取员工数据失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);

    // 处理查看详情
    const handleView = (record) => {
        // 预留查看详情逻辑
        console.log('查看详情:', record);
    };

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };

    // 渲染表格
    return (
        <Table
            rowSelection={{
                type: 'checkbox',
                ...rowSelection,
            }}
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{width:'100%',}}

        />
    );
}
const DeviceAttribute=()=>{
    // 状态管理
    const [dataSource, setDataSource] = useState([]); // 表格数据
    const [loading, setLoading] = useState(false); // 加载状态
    const [total, setTotal] = useState(0); // 总条数
    const [currentPage, setCurrentPage] = useState(1); // 当前页码
    const [pageSize, setPageSize] = useState(10); // 每页条数
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID

    // 表格列配置
    const columns = [
        {
            title: '属性名称',
            dataIndex: 'attribute',
            key: 'attribute',
            align:'center',
        },
        {
            title: '属性内容',
            dataIndex: 'content',
            key: 'content',
            align:'center',
        },
        {
            title: '属性分类',
            dataIndex: 'class',
            key: 'class',
            align:'center',
        },
        {
            title: '阈值内容',
            dataIndex: 'threshold',
            key: 'threshold',
            align:'center',
            render:(value)=>{
                return(
                    <div style={{textAlign:'left',width:'100px',margin:'auto'}}>
                        <div>上限：{value['上限']}</div>
                        <div>下限：{value['下限']}</div>
                        <div>单位：{value['单位']}</div>
                    </div>
                )
            }
        },
        {
            title: '测点名称',
            dataIndex: 'point',
            key: 'point',
            align:'center',
        },
        {
            title: '操作',
            key: 'action',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <a onClick={() => handleEdit(record)} style={{ color: '#2C9E9D' }}>
                        <EditOutlined /> 编辑
                    </a>
                    <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
                        <DeleteOutlined /> 删除
                    </a>
                </Space>
            ),
        },
    ]
    // 获取表格数据
    const fetchTableData = async () => {
        try {
            setLoading(true);
            // 这里是预留的接口调用位置
            // 实际项目中替换为真实接口请求
            // const response = await api.getEmployeeList({
            //   page: currentPage,
            //   pageSize: pageSize
            // });

            // 模拟数据 - 实际项目中删除
            const mockData = [
                {
                    key: '1',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: {'上限':4000 , '下限':0 ,'单位':'mm/s²'},
                    point:'测点2',
                },{
                    key: '2',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: {'上限':4000 , '下限':0 ,'单位':'mm/s²'},
                    point:'测点2',
                },{
                    key: '3',
                    attribute: '震动',
                    content: '加速度',
                    class: '阈值',
                    threshold: {'上限':'' , '下限':'' ,'单位':''},
                    point:'测点2',
                },

            ];

            // 模拟接口返回 - 实际项目中使用接口数据
            setDataSource(mockData);
            setTotal(85); // 总条数，实际项目中从接口获取
        } catch (error) {
            console.error('获取员工数据失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 初始加载和分页变化时重新获取数据
    useEffect(() => {
        fetchTableData();
    }, [currentPage, pageSize]);

    // 处理编辑
    const handleEdit = (record) => {
        // 预留编辑逻辑
        console.log('编辑:', record);
    };

    // 处理删除
    const handleDelete = (record) => {
        // 预留删除逻辑
        console.log('删除:', record);
    };

    // 渲染表格
    return (
        <Table
            columns={columns}
            dataSource={dataSource}
            loading={loading}
            pagination={false} // 关闭表格自带分页，使用外部分页组件
            rowKey="key"
            style={{width:'100%',}}

        />
    );
}
// 分页组件
export const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
    return (
        <div style={{ textAlign: 'right', marginTop: 16 ,width:'100%'}}>
            <Pagination
                current={currentPage}
                pageSize={pageSize}
                total={total}
                onChange={onPageChange}
                onShowSizeChange={onPageSizeChange}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `共 ${total} 条`}
                pageSizeOptions={['10', '20', '50', '100']}
            />
        </div>
    );
};
const PeopleMange=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取

    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return (
        <div style={{backgroundColor: '#fff', padding: '20px'}}>
            <Title title={'人员管理'}></Title>
            <Row style={{marginTop:'20px'}}>
                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <EmployeeTable
                    currentPage={currentPage}
                    pageSize={pageSize}
                    setTotal={setTotal}
                />
            </Row>
            <Row style={{marginTop:'20px'}}>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}

                />
            </Row>
        </div>
    )
}
const ClassMange=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取

    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Title title={'班组管理'}></Title>
            <Row style={{marginTop:'20px'}}>
                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <GroupTable></GroupTable>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}

                />
            </Row>
        </div>
    )
}
const TimeMange=()=>{
    const [viewState,setViewState]=useState('view0')
    const view0=useRef(null)
    const view1=useRef(null)
    const checkView=(viewState)=>{
        setViewState(viewState)
    }
    useEffect(()=>{
        view0.current.classList.remove('view-active')
        view1.current.classList.remove('view-active')
        if(viewState==='view0'){
            view0.current.style.backgroundColor='#045F5E80'
            view1.current.style.backgroundColor='#B7E5D533'
            view0.current.style.color='#fff'
            view1.current.style.color='#000'
        }else{
            view0.current.style.backgroundColor='#B7E5D533'
            view1.current.style.backgroundColor='#045F5E80'
            view0.current.style.color='#000'
            view1.current.style.color='#fff'
        }
    },[viewState])
    return (
        <div style={{backgroundColor: '#fff', padding: '20px'}}>
            <Title title={'排班管理'}></Title>
            <Row style={{marginTop:'20px'}}>
                <Col span={4}></Col>
                <Col span={16} style={{textAlign:'center'}}>
                    <div style={{color:'#006665',fontSize:'20px',fontWeight:'400'}}>
                        <span style={{cursor:'pointer'}}>&lt;</span>
                        <span style={{margin:'10px',}}>2025年8月</span>
                        <span style={{cursor:'pointer'}}>&gt;</span>
                    </div>
                    <div style={{color:'#999999',fontSize:'14px'}}>
                        <span>上次编辑：</span>
                        <span>李朔&nbsp;&nbsp;</span>
                        <span>2025-7-22 09:34</span>
                    </div>
                </Col>
                <Col span={4} style={{display:"flex",alignItems:'center',justifyContent:'end'}}>
                    <Button  icon={<ExportOutlined />} className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`}}>导出</Button>
                </Col>
            </Row>
            <Row style={{borderRadius:'4px',width:'100%',marginTop:'20px'}}>
                <Row style={{backgroundColor:'#F0F7F7',width:'100%',padding:'10px 30px'}}>
                    <Col span={18}>
                        <Row>
                            {/*<Button ref={view0} className={`${styles['view']} ${styles['view-active']}`} onClick={()=>checkView('view0')}>人员视角</Button>*/}
                            <Button ref={view0} className={styles['view']} onClick={()=>checkView('view0')}>人员视角</Button>
                            <Button ref={view1} className={styles['view']} onClick={()=>checkView('view1')}>班组视角</Button>
                            <Form
                                layout={'inline'}
                            >
                                <Form.Item
                                    label={<label>岗位类型</label>}
                                    name="type"
                                >
                                    <Select
                                        defaultValue={'全部'}
                                        style={{width:'132px',height: 40}}
                                    ></Select>
                                </Form.Item>
                                <Form.Item
                                    label={<label>姓名</label>}
                                    name="type1"

                                >
                                    <Input
                                        placeholder={'请输入姓名'}
                                        style={{width:'200px'}}
                                    ></Input>
                                </Form.Item>
                                <Form.Item
                                    label={<label>班组</label>}
                                    name="type2"

                                >
                                    <Select
                                        defaultValue={'全部'}
                                        style={{width:'132px'}}
                                    ></Select>
                                </Form.Item>
                            </Form>
                            <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
                        </Row>

                    </Col>
                    <Col span={6} style={{textAlign:'right'}}>
                        <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,}}>新增</Button>
                        <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`,margin:'0 20px'}}>编辑</Button>
                        <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
                    </Col>
                </Row>
                <div className={styles['paibanBg']} style={{backgroundImage:`url(${paibanBg})`}}>

                </div>
            </Row>
        </div>
    )
}
const PatrolRouteQuery=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取

    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    const treeData=[
        {
            title:'班次',
            key:'班次',
            children:[
                {title:'白班', key:'白班',},
                {title:'中班', key:'中班',},
                {title:'夜班', key:'夜班',},
                {title:'中班巡检', key:'中班巡检',},
                {title:'夜班二巡检', key:'夜班二巡检',},
            ]
        },
        {
            title:'专业',
            key:'专业',
            children:[
                {title:'电器专业', key:'电器专业',},
                {title:'水处理', key:'水处理',},
            ]
        },
        {
            title:'区域',
            key:'区域',
            children:[
                {title:'发电机区域', key:'发电机区域',},
                {title:'中水处区', key:'中水处区',},
                {title:'除盐水区域', key:'除盐水区域',},
            ]
        },
    ]


    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row>
                <Col span={3} style={{backgroundColor:'#E7F2ED',padding:'10px 20px'}}>

                        <Title title={'巡视线路'} ></Title>
                        <div style={{marginTop:'20px'}}>
                            <Tree
                                treeData={treeData}
                                checkable
                                showLine
                                defaultExpandParent={true}
                                defaultExpandedKeys={['班次', '专业', '区域']}
                                className={styles['tree']}
                            >
                            </Tree>
                        </div>


                </Col>
                <Col span={21} style={{padding:'0 20px'}}>
                    <Title title={'巡视线路'}></Title>
                    <Row style={{marginTop:'20px'}}>
                        <Button className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`}}>
                            重新选择
                        </Button>
                    </Row>
                    <Row style={{marginTop:'20px',minHeight:'550px'}}>
                        <TimeTable>

                        </TimeTable>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <TablePagination
                            currentPage={currentPage}
                            pageSize={pageSize}
                            total={total}
                            onPageChange={handlePageChange}
                            onPageSizeChange={handlePageSizeChange}

                        />
                    </Row>
                </Col>
            </Row>
        </div>
    )
}
const StandardManagement=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取

    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return(
        <div style={{backgroundColor:'#fff',padding:'20px',borderBottomLeftRadius:'10px',}}>
            <Title title={'巡检标准管理'}></Title>
            <Row style={{marginTop:'20px'}}>
                <Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'30px'}}>新建方案</Button>
                <Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
            </Row>
            <Row style={{marginTop:'20px',minHeight:'450px'}}>
                <StandardTable></StandardTable>
            </Row>
            <Row style={{marginTop:'20px'}}>
                <TablePagination
                    currentPage={currentPage}
                    pageSize={pageSize}
                    total={total}
                    onPageChange={handlePageChange}
                    onPageSizeChange={handlePageSizeChange}
                ></TablePagination>
            </Row>
        </div>
    )
}
const DeviceAttributeSettings=()=>{
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
    const treeData=[
        {
            title:'发电机区域',
            key:'发电机区域',
            children:[
                {title:'#1 发电机',key:'#1发电机',},
                {title:'#2 发电机',key:'#2发电机',},
                {title:'#3 发电机',key:'#3发电机',},
                {title:'#4 发电机',key:'#4发电机',},
                {title:'#5 发电机',key:'#5发电机',},
            ]
        },
        {
            title:'中水处理区',
            key:'中水处理区',
            children:[
                {title:'中水过滤装置A',key:'中水过滤装置A',},
                {title:'中水过滤装置B',key:'中水过滤装置B',},
            ]
        },
        {
            title:'除盐水区',
            key:'除盐水区',
            children:[
                {title:'除盐水泵1',key:'除盐水泵1',},
                {title:'除盐水泵2',key:'除盐水泵2',},
                {title:'除盐水泵3',key:'除盐水泵3',},
            ]
        }]
    // 处理页码变化
    const handlePageChange = (page, pageSize) => {
        setCurrentPage(page);
        setPageSize(pageSize);
    };

    // 处理每页条数变化
    const handlePageSizeChange = (current, size) => {
        setPageSize(size);
        setCurrentPage(1); // 重置到第一页
    };
    return(
        <div style={{backgroundColor:'#fff',padding:'20px'}}>
            <Row>
                <Col span={4} style={{backgroundColor:'rgb(231, 242, 237)',padding:'20px'}}>
                    <Title title={'巡检区域&设备'}></Title>
                    <Search style={{margin:'20px 0'}}
                        placeholder={'搜索节点'}
                    ></Search>
                    <Tree
                        treeData={treeData}
                        className={styles['tree']}
                        checkable
                        showLine
                        defaultExpandParent={true}
                        defaultExpandedKeys={['发电机区域','中水处理区','除盐水区',]}
                    >

                    </Tree>
                </Col>
                <Col span={20} style={{padding:'10px'}}>
                    <Row style={{marginBottom:'20px'}}>
                        <Button className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`}}>重新选择</Button>
                    </Row>
                    <Title title={'#1 发电机'}></Title>
                    <Row style={{marginTop:'20px',minHeight:'450px'}}>
                        <DeviceAttribute></DeviceAttribute>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                        <TablePagination
                            currentPage={currentPage}
                            pageSize={pageSize}
                            total={total}
                            onPageChange={handlePageChange}
                            onPageSizeChange={handlePageSizeChange}
                        ></TablePagination>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}
const items = [
    {
        label: <MenuBg text={'人员管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
        key: '人员管理',

        children: [
            {label: '人员管理', key: '人员管理'},
            {label: '班组管理', key: '班组管理'},
        ],
    },
    {
        label: <MenuBg text={'排班管理'}></MenuBg>,
        key:'排班管理',
    },
    {
        label:<MenuBg text={'巡检路线管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
        key:'巡检路线管理',
        children: [
            {label:'巡视路线查询',key:'巡视路线查询'},
            {label:'巡检标准管理',key:'巡检标准管理'},
            {label:'设备属性设置',key:'设备属性设置'},
        ]
    }
]
const list={
    '人员管理':<PeopleMange/>,
    '班组管理':<ClassMange/>,
    '排班管理':<TimeMange/>,
    '巡视路线查询':<PatrolRouteQuery/>,
    '巡检标准管理':<StandardManagement/>,
    '设备属性设置':<DeviceAttributeSettings/>,
}
const InspectionTaskPlan=()=>{
    const [current,setCurrent]=useState('人员管理')
    const onclick=(e)=>{
        console.log(e.key)
        setCurrent(e.key)
    }
    return (
        <>
            <div className={styles['header']}>
                <div className={styles['logo']}>
                    <span style={{marginLeft:'-20px'}}> 当前:&nbsp;&nbsp;{current}</span>

                </div>
                <Menu
                    onClick={onclick}
                    items={items}
                    selectedKeys={[current]}
                    mode={'horizontal'}
                    style={{flex: '1'}}
                    className={styles['menu']}
                >
                </Menu>
            </div>
            {list[current]}

        </>
    )
}
export default InspectionTaskPlan
