
import React, { useState } from 'react';
import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd';
import QRCodeScanning from '../../../../assets/img/QRCodeScanning.svg';
import scanningProcessDemonstration from '../../../../assets/img/scanningProcessDemonstration.svg';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import btnImg3 from '@/assets/img/planBtn3.png'

const { Option } = Select;
import styles from './inspectionRecords.less';
import progress1 from '@/assets/img/progress1.svg';
import progress2 from '@/assets/img/progress2.svg';
import progress3 from '@/assets/img/progress3.svg';

import btnImg1 from '@/assets/img/planBtn1.png';
import btnImg2 from '@/assets/img/planBtn2.png';
import {
    DeleteOutlined,
    DownOutlined,
    EditOutlined,
    ExportOutlined,
    EyeOutlined,
    RedoOutlined,
} from "@ant-design/icons";
// 巡检点管理组件
const InspectionRecords = () => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(85);
    const [currentPageSection, setCurrentPageSection] = useState(1); // 总条数
    const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单

    // 处理新增巡检点按钮点击
    const handleAddInspectionPoint = () => {
        setShowAddInspectionPoint(true);
    };

    // 处理返回按钮点击
    const handleBack = () => {
        setShowAddInspectionPoint(false);
    };

    // 树形结构数据 - 隐患排查项
    const treeData = [
        {
            title: '储罐储存区',
            key: '储罐储存区',
            children: [
                {
                    title: '储油设备',
                    key: '储油设备',
                    children: [
                        {
                            title: '罐体隐患',
                            key: '罐体隐患',
                            children: [
                                {
                                    title: '罐体温度是否正常',
                                    key: '罐体温度是否正常',
                                    checkable: true,
                                },
                                {
                                    title: '罐体是否有锈蚀渗漏',
                                    key: '罐体是否有锈蚀渗漏',
                                    checkable: true,
                                },
                                {
                                    title: '罐体压力是否在规定范围',
                                    key: '罐体压力是否在规定范围',
                                    checkable: true,
                                },
                            ],
                        },
                    ],
                },
                {
                    title: '附件隐患',
                    key: '附件隐患',
                    children: [
                        {
                            title: '呼吸阀是否通畅',
                            key: '呼吸阀是否通畅',
                            checkable: true,
                        },
                        {
                            title: '阻火器是否完好',
                            key: '阻火器是否完好',
                            checkable: true,
                        },
                        {
                            title: '液位计显示是否准确',
                            key: '液位计显示是否准确',
                            checkable: true,
                        },
                    ],
                },
            ],
        },
        {
            title: '输油管道设备',
            key: '输油管道设备',
            children: [
                {
                    title: '管道压力是否稳定',
                    key: '管道压力是否稳定',
                    checkable: true,
                },
                {
                    title: '管道是否存在泄漏',
                    key: '管道是否存在泄漏',
                    checkable: true,
                },
            ],
        },
        {
            title: '消防设备',
            key: '消防设备',
            children: [
                {
                    title: '灭火器压力是否正常',
                    key: '灭火器压力是否正常',
                    checkable: true,
                },
                {
                    title: '消防水带是否破损',
                    key: '消防水带是否破损',
                    checkable: true,
                },
            ],
        },
        {
            title: '油品装卸区',
            key: '油品装卸区',
            children: [
                {
                    title: '装卸设备',
                    key: '装卸设备',
                    children: [
                        {
                            title: '泵体设备是否稳定',
                            key: '泵体设备是否稳定',
                            checkable: true,
                        },
                        {
                            title: '泵体温度是否超限',
                            key: '泵体温度是否超限',
                            checkable: true,
                        },
                        {
                            title: '泵体振动是否异常',
                            key: '泵体振动是否异常',
                            checkable: true,
                        },
                    ],
                },
            ],
        },
    ];

    // 表格数据
    const tableData = [
        {
            key: '1',
            serialNumber: '1',
            riskClassification: '储罐储存区',
            riskName: '罐体温度是否正常',
            requiredTools: '<70℃、天然气探测、接地电阻≤4Ω',
            riskModule: '存储风险管控',
            relatedPoints: '',
        },
        {
            key: '2',
            serialNumber: '2',
            riskClassification: '储罐储存区',
            riskName: '罐体是否有锈蚀渗漏',
            requiredTools: '<70℃、天然气探测、接地电阻≤4Ω',
            riskModule: '存储风险管控',
            relatedPoints: '',
        },
        {
            key: '3',
            serialNumber: '3',
            riskClassification: '储罐储存区',
            riskName: '罐体压力是否在规定范围',
            requiredTools: '<70℃、天然气探测、接地电阻≤4Ω',
            riskModule: '存储风险管控',
            relatedPoints: '',
        },
    ];

    // 表格列配置
    const columns = [
        {
            title: (
                <Checkbox>
                    <span style={{ fontSize: '14px', fontWeight: 'normal' }}>序号</span>
                </Checkbox>
            ),
            dataIndex: 'serialNumber',
            key: 'serialNumber',
            render: (text) => <Checkbox>{text}</Checkbox>,
        },
        {
            title: '隐患分类',
            dataIndex: 'riskClassification',
            key: 'riskClassification',
        },
        {
            title: '隐患名称',
            dataIndex: 'riskName',
            key: 'riskName',
        },
        {
            title: '排查检测器具',
            dataIndex: 'requiredTools',
            key: 'requiredTools',
        },
        {
            title: '所属风险模块',
            dataIndex: 'riskModule',
            key: 'riskModule',
        },
        {
            title: '已关联巡检点',
            dataIndex: 'relatedPoints',
            key: 'relatedPoints',
        },
        {
            title: '操作',
            key: 'action',
            render: () => (
                <>
                    <Button type="text" style={{ color: '#006665', marginRight: '8px' }}>查看详情</Button>
                    <Button type="text" style={{ color: '#ff4d4f', marginRight: '8px' }}>删除</Button>
                    <Button type="text" style={{ color: '#1890ff' }}>关联到巡检点</Button>
                </>
            ),
        },
    ];

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

    return (
        <div className={styles.container}>
            {/* 顶部进度条 - 根据状态切换图片 */}
            <div
                className={styles.progressContainer}
                // style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
                // style={{ backgroundImage: `url(${currentPageSection === 3 ? progress3 : currentPageSection === 2 ? progress2 : progress1})` }}
                style={{ backgroundImage: `url(${!showAddInspectionPoint ? progress1 : currentPageSection === 1 ? progress2 : progress3})` }}
            ></div>

            {/* 主体内容区域 */}
            <div className={styles.contentContainer}>
                {/* 左侧树形结构 - 根据状态决定是否显示 */}
                {!showAddInspectionPoint && (
                    <div className={styles.leftSide}>
                        <div className={styles.treeTitle}>隐患排查项</div>
                        <Tree
                            // className={`${styles.tree} leftSide test`}
                            className={styles['tree']}
                            defaultExpandAll
                            treeData={treeData}
                            checkable
                        />
                    </div>
                )}

                {/* 右侧表格和操作区域 */}
                <div className={styles.rightSide}>
                    {/* 根据状态渲染不同内容 */}
                    {!showAddInspectionPoint ? (
                        <>
                            {/* 顶部按钮区域 */}
                            <div className={styles.topButtons}>
                                <Button className={styles['button']} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '50px' }}>重新选择</Button>
                                <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>删除</Button>
                            </div>

                            {/* 搜索区域 */}
                            <div className={styles.searchContainer}>
                                <div className={styles.searchBox}>
                                    <SearchOutlined />
                                    <input
                                        type="text"
                                        placeholder="请输入搜索内容"
                                        className={styles.searchInput}
                                    />
                                </div>
                                <Button type="primary" className={styles.addButton} onClick={handleAddInspectionPoint}>新增巡检点</Button>
                            </div>

                            {/* 表格 */}
                            <Table
                                columns={columns}
                                dataSource={tableData}
                                pagination={false}
                                className={styles.table}
                                rowKey="key"
                            />

                            {/* 分页 */}
                            <div className={styles.pagination}>
                                <span>共 {total} 条</span>
                                <Pagination
                                    current={currentPage}
                                    pageSize={pageSize}
                                    total={total}
                                    onChange={handlePageChange}
                                    showSizeChanger
                                    showQuickJumper
                                    showTotal={(total) => `共 ${total} 条`}
                                />
                            </div>
                        </>
                    ) : (
                        currentPageSection === 1 ? (
                            <div className={styles.addInspectionPointForm}>
                                <div className={styles.formHeader}>
                                    <Button onClick={handleBack}>上一页</Button>
                                    <Button onClick={() => setCurrentPageSection(2)}>下一页</Button>
                                    {/* <h3>新增巡检点</h3> */}
                                </div>
                                <div className={styles.formContent}>
                                    {/* 查询条件区域 - 使用antd组件 */}
                                    <div className={styles.queryConditionContainer}>
                                        <div className={styles.queryConditionHeader}>
                                            <span className={styles.queryConditionIcon}>| 查询条件</span>
                                            <div>
                                                <Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
                                                <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
                                            </div>
                                        </div>

                                        <div className={styles.queryRow}>
                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>名称</div>
                                                <Input className={styles.queryInput} placeholder="请输入名称" />
                                            </div>

                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>所属区域</div>
                                                <Select className={styles.querySelect} placeholder="全部">
                                                    <Option value="">全部</Option>
                                                    <Option value="area1">储罐储存区</Option>
                                                    <Option value="area2">泵房区域</Option>
                                                    <Option value="area3">装卸区域</Option>
                                                    <Option value="area4">办公区域</Option>
                                                </Select>
                                            </div>

                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>巡检时间范围</div>
                                                <DatePicker.RangePicker className={styles.queryDateRange} />
                                            </div>

                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>关联设备</div>
                                                <div className={styles.deviceTags}>
                                                    <Tag color="blue">设备1</Tag>
                                                    <Tag color="blue">设备2</Tag>
                                                </div>
                                            </div>
                                        </div>

                                        <div className={styles.queryRow}>
                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>位置</div>
                                                <Input className={styles.queryInput} placeholder="请输入位置" />
                                            </div>

                                            <div className={styles.queryCol}>
                                                <div className={styles.queryColLabel}>巡检频率</div>
                                                <Select className={styles.querySelect} placeholder="全部">
                                                    <Option value="">全部</Option>
                                                    <Option value="daily">每日</Option>
                                                    <Option value="weekly">每周</Option>
                                                    <Option value="monthly">每月</Option>
                                                    <Option value="other">其他</Option>
                                                </Select>
                                            </div>
                                        </div>

                                        {/* <div className={styles.queryActions}>

                                        </div> */}
                                    </div>

                                    {/* 巡检点列表 - 使用antd组件 */}
                                    <div>
                                        <div style={{ marginBottom: '20px', fontSize: '16px', fontWeight: '500' }}>| 巡检点列表</div>

                                        {/* 顶部按钮组 */}
                                        <div className={styles.tableButtons} style={{ marginBottom: '20px' }}>
                                            <Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>
                                                批量导入
                                            </Button>
                                            <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
                                                批量导出
                                            </Button>
                                            <Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>
                                                删除
                                            </Button>
                                            <Button icon={<PlusOutlined />} type="primary" style={{ backgroundImage: `url(${btnImg1})`, float: 'right' }} className={styles.button}>
                                                新增巡检点
                                            </Button>
                                        </div>

                                        {/* 巡检点表格 - 使用antd Table组件 */}
                                        <Table
                                            className={styles.table}
                                            rowSelection={{
                                                type: 'checkbox',
                                                onChange: (selectedRowKeys, selectedRows) => {
                                                    console.log('选中的行:', selectedRowKeys, selectedRows);
                                                },
                                            }}
                                            columns={[
                                                {
                                                    title: '序号',
                                                    key: 'serialNumber',
                                                    width: 80,
                                                    render: (_, __, index) => (currentPage - 1) * pageSize + index + 1,
                                                },
                                                {
                                                    title: '名称',
                                                    dataIndex: 'name',
                                                    key: 'name',
                                                },
                                                {
                                                    title: '位置',
                                                    dataIndex: 'location',
                                                    key: 'location',
                                                },
                                                {
                                                    title: '关联设备',
                                                    dataIndex: 'relatedDevices',
                                                    key: 'relatedDevices',
                                                },
                                                {
                                                    title: '状态',
                                                    dataIndex: 'status',
                                                    key: 'status',
                                                    render: (text) => {
                                                        let color = '#52c41a'; // 默认正常绿色
                                                        if (text === '待巡检') color = '#faad14';
                                                        else if (text === '异常待处理') color = '#ff4d4f';
                                                        return <span style={{ color }}>{text}</span>;
                                                    },
                                                },
                                                {
                                                    title: '巡检频率',
                                                    dataIndex: 'frequency',
                                                    key: 'frequency',
                                                },
                                                {
                                                    title: '操作',
                                                    key: 'action',
                                                    width: 200,
                                                    render: (_, record) => (
                                                        <Space size="middle">
                                                            <Button
                                                                type="text"
                                                                style={{ color: '#006665' }}
                                                                onClick={() => console.log('查看详情:', record)}
                                                            >
                                                                查看详情
                                                            </Button>
                                                            <Button
                                                                type="text"
                                                                style={{ color: '#1890ff' }}
                                                                onClick={() => console.log('编辑:', record)}
                                                            >
                                                                编辑
                                                            </Button>
                                                            <Button
                                                                type="text"
                                                                style={{ color: '#52c41a' }}
                                                                onClick={() => console.log('巡检:', record)}
                                                            >
                                                                巡检
                                                            </Button>
                                                        </Space>
                                                    ),
                                                },
                                            ]}
                                            dataSource={[
                                                {
                                                    key: '1',
                                                    name: '一号储罐',
                                                    location: '储罐储存区 A区1号罐',
                                                    relatedDevices: '一号储罐本体、罐区消防栓组',
                                                    status: '正常',
                                                    frequency: '每日',
                                                },
                                                {
                                                    key: '2',
                                                    name: '原油输送泵组',
                                                    location: '泵房 B区',
                                                    relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组',
                                                    status: '正常',
                                                    frequency: '每2小时',
                                                },
                                                {
                                                    key: '3',
                                                    name: '油品装车站台',
                                                    location: '装卸区北侧站台',
                                                    relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器',
                                                    status: '待巡检',
                                                    frequency: '每次装卸前',
                                                },
                                                {
                                                    key: '4',
                                                    name: '办公区消防通道',
                                                    location: '办公楼1楼东侧通道',
                                                    relatedDevices: '通道应急灯、通道灭火器、疏散标示',
                                                    status: '正常',
                                                    frequency: '每周',
                                                },
                                                {
                                                    key: '5',
                                                    name: '输油管道段 A',
                                                    location: '库区东侧输油管道0-500米段',
                                                    relatedDevices: '管道压力传感器、管道监测点',
                                                    status: '异常待处理',
                                                    frequency: '每月',
                                                },
                                                {
                                                    key: '6',
                                                    name: '调和工艺罐区',
                                                    location: '生产工艺区调和罐群前',
                                                    relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置',
                                                    status: '正常',
                                                    frequency: '每小时',
                                                },
                                            ]}
                                            pagination={{
                                                current: currentPage,
                                                pageSize: pageSize,
                                                total: total,
                                                onChange: (page, size) => {
                                                    setCurrentPage(page);
                                                    setPageSize(size);
                                                },
                                                showSizeChanger: true,
                                                showTotal: (total) => `共 ${total} 条`,
                                                style: {
                                                    textAlign: 'right',
                                                    marginTop: '20px',
                                                },
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        ) : (
                            <div className={styles.addInspectionPointForm}>
                                <div className={styles.formHeader}>
                                    <Button onClick={() => setCurrentPageSection(1)}>上一页</Button>
                                </div>
                                <div className={styles.formContent}>
                                    {/* 三栏布局 */}
                                    <div style={{ display: 'flex', gap: '10px', height: '100%' }}>
                                        {/* 第一栏：二维码生成 */}
                                        <div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '10px', backgroundColor: '#fff' }}>
                                            <h3 style={{ marginBottom: '20px', color: '#333' }}>二维码生成</h3>
                                            <div style={{ marginBottom: '20px' }}>
                                                <label style={{ marginRight: '5px' }}>选择巡检点：</label>
                                                <Select style={{ width: 130 }} placeholder="请选择">
                                                    <Option value="1">车辆二维扫码</Option>
                                                </Select>
                                                <Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>生成二维码</Button>
                                            </div>
                                            <div style={{ width: '200px', height: '200px', border: '1px dashed #d9d9d9', margin: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                                                {/* 二维码SVG */}
                                                <img
                                                    src={QRCodeScanning}
                                                    alt="二维码"
                                                    style={{ width: '150px', height: '150px', objectFit: 'contain' }}
                                                />
                                            </div>
                                            <div style={{ display: 'flex', gap: '10px' }}>
                                                <Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>下载</Button>
                                                <Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
                                                    打印
                                                </Button>
                                            </div>
                                        </div>

                                        {/* 第二栏：扫码流程 */}
                                        <div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
                                            <h3 style={{ marginBottom: '20px', color: '#333' }}>扫码流程演示</h3>
                                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
                                                {/* Step 1 */}
                                                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '400px' }}>
                                                    {/* 扫码流程演示SVG */}
                                                    <img
                                                        src={scanningProcessDemonstration}
                                                        alt="扫码流程演示"
                                                        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
                                                    />
                                                </div>
                                            </div>
                                        </div>

                                        {/* 第三栏：历史记录 */}
                                        <div style={{ flex: 2, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
                                            <h3 style={{ marginBottom: '20px', color: '#333' }}>历史记录</h3>
                                            <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
                                                <div>
                                                    <label style={{ marginRight: '5px' }}>人员：</label>
                                                    <Input placeholder="请输入人员名称" style={{ width: 150 }} />
                                                </div>
                                                <div>
                                                    <label style={{ marginRight: '5px' }}>巡检点：</label>
                                                    <Select style={{ width: 120 }} placeholder="全部">
                                                        <Option value="all">全部</Option>
                                                    </Select>
                                                </div>
                                                <Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
                                                <Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
                                            </div>

                                            {/* 历史记录表格 */}
                                            <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
                                                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                                    <thead>
                                                        <tr style={{ backgroundColor: '#fafafa' }}>
                                                            <th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>序号</th>
                                                            <th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检点</th>
                                                            <th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>人员</th>
                                                            <th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>时间</th>
                                                            <th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检结果</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {/* 模拟数据 */}
                                                        <tr>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>1</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>一号储罐消防</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>赵翔</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-16 08:07</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
                                                                <Tag color="green">已完成(无隐患)</Tag>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>油品装卸站台</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>钱新</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-04 14:38</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
                                                                <Tag color="orange">已完成(有隐患)</Tag>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>3</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>办公区消防通道</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>孙引琪</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-28 11:02</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
                                                                <Tag color="green">已完成(无隐患)</Tag>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>4</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>输油管廊间A</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>李婧静</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-20 08:14</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
                                                                <Tag color="orange">已完成(有隐患)</Tag>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>5</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>消防水泵房</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>冯冯</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-16 02:44</td>
                                                            <td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
                                                                <Tag color="green">已完成(无隐患)</Tag>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            {/* 分页 */}
                                            <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <div>共 85 条</div>
                                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                                                    <span>10 / page</span>
                                                    <Select style={{ width: 60 }} defaultValue="10">
                                                        <Option value="10">10</Option>
                                                        <Option value="20">20</Option>
                                                    </Select>
                                                    <div style={{ display: 'flex', gap: '5px' }}>
                                                        <Button disabled>←</Button>
                                                        <Button type="primary" style={{ backgroundColor: '#006665' }}>1</Button>
                                                        <span>...</span>
                                                        <Button>4</Button>
                                                        <Button>5</Button>
                                                        <Button>6</Button>
                                                        <Button>7</Button>
                                                        <Button>8</Button>
                                                        <span>...</span>
                                                        <Button>50</Button>
                                                        <Button>→</Button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                    )}
                </div>
            </div>
        </div>
    );
};

export default InspectionRecords;