/**
 * 数据字典管理页面
 * 功能：管理系统中的元数据域和属性配置
 * 包含：元数据域树形结构、属性列表、新增属性等功能
 */
import React, { PureComponent } from 'react';
import {
    Card,
    Tree,
    Button,
    Select,
    Space,
    Row,
    Col,
    Pagination,
    Modal,
    message,
    Input
} from 'antd';
import { history } from 'umi';
import {
    ExpandOutlined,
    UserOutlined,
    TeamOutlined,
    ApartmentOutlined,
    SyncOutlined,
    SettingOutlined,
    UserAddOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
    FolderOutlined,
    FileTextOutlined,
    IdcardOutlined,
    PhoneOutlined,
    MailOutlined,
    CalendarOutlined,
    HomeOutlined,
    PlusOutlined,
    DownloadOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import styles from './PerformanceRuleset.less';
import StandardTable from '@/components/StandardTable';
import PerformanceRulesetAdd from './form/PerformanceRulesetAdd';

const { Option } = Select;

/**
 * 数据字典管理组件
 * 左侧显示元数据域树形结构，右侧显示选中域的属性列表
 */
class PerformanceRuleset extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            searchForm: {},
            selectedKeys: ['performance_params'],
            expandedKeys: ['basic_info', 'performance_params'],
            searchValue: '',           // 搜索关键词
            filteredTreeData: [],      // 过滤后的树数据
            addModalVisible: false,  // 新增弹窗显示状态
            addLoading: false,       // 新增loading状态
            organizationData: [
                {
                    title: '基础信息',
                    key: 'basic_info',
                    code: 'EMP_BASIC_INFO',
                    description: '员工基础信息数据域，包含员工的基本身份信息和个人资料',
                    children: [
                        { title: '员工编号', key: 'employee_id', isLeaf: true },
                        { title: '姓名', key: 'name', isLeaf: true },
                        { title: '性别', key: 'gender', isLeaf: true }
                    ],
                },
                {
                    title: '技术职务',
                    key: 'tech_position',
                    code: 'EMP_TECH_POSITION',
                    description: '员工技术职务信息数据域，包含技术等级、职务级别等信息',
                    children: [],
                },
                {
                    title: '绩效参数',
                    key: 'performance_params',
                    code: 'EMP_PERFORMANCE',
                    description: '用于记录员工各项绩效指标的参数集合',
                    children: [
                        { title: '代码量', key: 'code_amount', isLeaf: true },
                        { title: '文档字数', key: 'doc_words', isLeaf: true },
                        { title: '出勤时长', key: 'attendance_hours', isLeaf: true },
                        { title: '项目金额', key: 'project_amount', isLeaf: true },
                        { title: '培训时长', key: 'training_hours', isLeaf: true },
                        { title: '会议次数', key: 'meeting_count', isLeaf: true },
                        { title: '会议时长', key: 'meeting_hours', isLeaf: true },
                        { title: '千行 bug 数', key: 'bug_count', isLeaf: true },
                        { title: '运维响应时间', key: 'response_time', isLeaf: true },
                        { title: '员工满意度', key: 'satisfaction', isLeaf: true }
                    ],
                },
                {
                    title: '联系方式',
                    key: 'contact_info',
                    code: 'EMP_CONTACT',
                    description: '员工联系方式信息数据域，包含电话、邮箱、地址等联系信息',
                    children: [],
                },
                {
                    title: '其他信息',
                    key: 'other_info',
                    code: 'EMP_OTHER',
                    description: '员工其他补充信息数据域，包含备注、特殊说明等信息',
                    children: [],
                },
            ],
            tableData: [
                {
                    key: '1',
                    id: 1,
                    fieldName: 'code_amount',
                    displayName: '代码量',
                    dataType: '数字',
                    unit: '行',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '2',
                    id: 2,
                    fieldName: 'doc_words',
                    displayName: '文档字数',
                    dataType: '数字',
                    unit: '字',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '3',
                    id: 3,
                    fieldName: 'attendance_hours',
                    displayName: '出勤时长',
                    dataType: '数字',
                    unit: '小时',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '4',
                    id: 4,
                    fieldName: 'project_amount',
                    displayName: '项目金额',
                    dataType: '数字',
                    unit: '元',
                    required: false,
                    defaultValue: '-'
                },
                {
                    key: '5',
                    id: 5,
                    fieldName: 'training_hours',
                    displayName: '培训时长',
                    dataType: '数字',
                    unit: '小时',
                    required: false,
                    defaultValue: '-'
                },
                {
                    key: '6',
                    id: 6,
                    fieldName: 'meeting_count',
                    displayName: '会议次数',
                    dataType: '数字',
                    unit: '次',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '7',
                    id: 7,
                    fieldName: 'meeting_hours',
                    displayName: '会议时长',
                    dataType: '数字',
                    unit: '分钟',
                    required: false,
                    defaultValue: '-'
                },
                {
                    key: '8',
                    id: 8,
                    fieldName: 'bug_count',
                    displayName: '千行 bug 数',
                    dataType: '数字',
                    unit: '个/千行',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '9',
                    id: 9,
                    fieldName: 'response_time',
                    displayName: '运维响应时间',
                    dataType: '数字',
                    unit: '分钟',
                    required: true,
                    defaultValue: '-'
                },
                {
                    key: '10',
                    id: 10,
                    fieldName: 'satisfaction',
                    displayName: '员工满意度',
                    dataType: '数字',
                    unit: '分',
                    required: false,
                    defaultValue: '-'
                }
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 10,
            },
            selectedRecord: null,  // 选中的记录，用于编辑
            selectedMetadata: null, // 选中的元数据域信息
        };
        
        // 更新列配置 - 绩效参数管理
        this.defaultColumns = [
            {
                title: '属性名称',
                dataIndex: 'displayName',
                key: 'displayName',
                width: 120,
                align: 'left',
            },
            {
                title: '编码',
                dataIndex: 'fieldName',
                key: 'fieldName',
                width: 150,
                align: 'left',
                render: (text) => (
                    <code style={{ 
                        backgroundColor: '#f0f0f0', 
                        padding: '2px 6px', 
                        borderRadius: '4px',
                        fontSize: '12px',
                        color: '#d4380d'
                    }}>
                        {text}
                    </code>
                ),
            },
            {
                title: '数据类型',
                dataIndex: 'dataType',
                key: 'dataType',
                width: 120,
                align: 'center',
                render: (type) => {
                    const typeConfig = {
                        '文本': { color: '#722ed1', bgColor: '#f9f0ff', borderColor: '#d3adf7' },
                        '数字': { color: '#52c41a', bgColor: '#f6ffed', borderColor: '#b7eb8f' },
                        '列表': { color: '#1890ff', bgColor: '#e6f7ff', borderColor: '#91d5ff' },
                        '日期': { color: '#722ed1', bgColor: '#f9f0ff', borderColor: '#d3adf7' },
                        '布尔': { color: '#eb2f96', bgColor: '#fff0f6', borderColor: '#ffadd2' }
                    };
                    const config = typeConfig[type] || typeConfig['文本'];
                    
                    return (
                        <span style={{
                            color: config.color,
                            backgroundColor: config.bgColor,
                            border: `1px solid ${config.borderColor}`,
                            borderRadius: '12px',
                            padding: '2px 8px',
                            fontSize: '12px',
                            fontWeight: '500'
                        }}>
                            {type}
                        </span>
                    );
                }
            },
            {
                title: '单位',
                dataIndex: 'unit',
                key: 'unit',
                width: 80,
                align: 'center',
                render: (unit) => unit || '-'
            },
            {
                title: '必填',
                dataIndex: 'required',
                key: 'required',
                width: 80,
                align: 'center',
                render: (required) => (
                    <span style={{
                        color: required ? '#52c41a' : '#666',
                        backgroundColor: required ? '#f6ffed' : '#f5f5f5',
                        border: `1px solid ${required ? '#b7eb8f' : '#d9d9d9'}`,
                        borderRadius: '12px',
                        padding: '2px 8px',
                        fontSize: '12px',
                        fontWeight: '500'
                    }}>
                        {required ? '是' : '否'}
                    </span>
                )
            },
            {
                title: '操作',
                key: 'action',
                width: 120,
                align: 'center',
                render: (_, record) => (
                    <Space size="small">
                        <Button
                            type="link"
                            size="small"
                            icon={<EditOutlined />}
                            onClick={() => this.handleEdit(record)}
                        >
                            {/* 编辑 */}
                        </Button>
                        <Button
                            type="link"
                            size="small"
                            danger
                            icon={<DeleteOutlined />}
                            onClick={() => this.handleDelete(record)}
                        >
                            {/* 删除 */}
                        </Button>
                    </Space>
                ),
            },
        ];
    }

    // 获取处理后的树形数据
    getTreeData = () => {
        const { organizationData, filteredTreeData, searchValue } = this.state;
        
        // 如果有搜索条件，使用过滤后的数据，否则使用原始数据
        const dataSource = searchValue ? filteredTreeData : organizationData;

        const processNode = (node) => ({
            key: node.key,
            title: (
                <span className={styles['tree-node-title']}>
                    {this.getNodeIcon(node.title)}
                    <span className={styles['node-title']}>{node.title}</span>
                    {node.isLeaf ? null : <span className={styles['node-count']}>({node.children ? node.children.length : 0})</span>}
                </span>
            ),
            children: node.children ? node.children.map(processNode) : undefined
        });

        return dataSource.map(processNode);
    };

    // 获取节点图标
    getNodeIcon = (title) => {
        // 主分类图标 - 使用文件夹风格
        if (title.includes('基础信息')) return <FolderOutlined style={{ color: '#52c41a', fontSize: '16px' }} />;
        if (title.includes('技术职务')) return <FolderOutlined style={{ color: '#fa8c16', fontSize: '16px' }} />;
        if (title.includes('绩效参数')) return <FolderOutlined style={{ color: '#2d5cf6', fontSize: '16px' }} />;
        if (title.includes('联系方式')) return <FolderOutlined style={{ color: '#722ed1', fontSize: '16px' }} />;
        if (title.includes('其他信息')) return <FolderOutlined style={{ color: '#13c2c2', fontSize: '16px' }} />;
        
        // 绩效参数属性图标
        if (title.includes('代码量')) return <FileTextOutlined style={{ color: '#1890ff', fontSize: '14px' }} />;
        if (title.includes('文档字数')) return <FileTextOutlined style={{ color: '#52c41a', fontSize: '14px' }} />;
        if (title.includes('出勤时长')) return <CalendarOutlined style={{ color: '#fa8c16', fontSize: '14px' }} />;
        if (title.includes('项目金额')) return <SettingOutlined style={{ color: '#eb2f96', fontSize: '14px' }} />;
        if (title.includes('培训时长')) return <CalendarOutlined style={{ color: '#722ed1', fontSize: '14px' }} />;
        if (title.includes('会议次数')) return <TeamOutlined style={{ color: '#13c2c2', fontSize: '14px' }} />;
        if (title.includes('会议时长')) return <CalendarOutlined style={{ color: '#13c2c2', fontSize: '14px' }} />;
        if (title.includes('bug')) return <ExclamationCircleOutlined style={{ color: '#ff4d4f', fontSize: '14px' }} />;
        if (title.includes('响应时间')) return <SettingOutlined style={{ color: '#fa8c16', fontSize: '14px' }} />;
        if (title.includes('满意度')) return <UserOutlined style={{ color: '#52c41a', fontSize: '14px' }} />;
        
        // 基础信息属性图标
        if (title.includes('员工编号') || title.includes('编号')) return <IdcardOutlined style={{ color: '#1890ff', fontSize: '14px' }} />;
        if (title.includes('姓名') || title.includes('名称')) return <UserOutlined style={{ color: '#52c41a', fontSize: '14px' }} />;
        if (title.includes('性别')) return <TeamOutlined style={{ color: '#fa8c16', fontSize: '14px' }} />;
        
        // 默认图标
        return <FileTextOutlined style={{ color: '#666', fontSize: '14px' }} />;
    };

    // 搜索处理
    handleSearch = (values) => {
        console.log('搜索参数:', values);
        this.setState({ searchForm: values });
    };

    // 重置搜索
    handleReset = () => {
        this.formRef?.resetFields();
        this.setState({ searchForm: {} });
    };

    // 树节点选择
    onTreeSelect = (selectedKeys, info) => {
        console.log('选中节点:', selectedKeys, info);
        this.setState({ selectedKeys });

        // 如果选中的是父节点（元数据域），显示元数据域信息
        if (selectedKeys.length > 0 && info.selectedNodes.length > 0) {
            const selectedNode = info.selectedNodes[0];
            const nodeKey = selectedKeys[0];
            
            // 查找对应的元数据域信息
            const metadataInfo = this.findMetadataByKey(nodeKey);
            
            if (metadataInfo && !metadataInfo.isLeaf) {
                // 只有父节点才显示元数据域信息
                this.setState({
                    selectedMetadata: {
                        name: metadataInfo.title,
                        code: metadataInfo.code,
                        description: metadataInfo.description,
                        key: metadataInfo.key
                    }
                });
            } else {
                // 选中子节点时清空元数据域信息
                this.setState({ selectedMetadata: null });
            }
        } else {
            this.setState({ selectedMetadata: null });
        }
    };

    // 树节点展开
    onTreeExpand = (expandedKeys) => {
        this.setState({ expandedKeys });
    };

    // 刷新树数据
    handleTreeRefresh = () => {
        // console.log('刷新组织架构');
        // 这里可以添加刷新树数据的逻辑
    };

    // 展开/收缩所有节点
    handleTreeToggle = () => {
        const { expandedKeys, organizationData } = this.state;
        if (expandedKeys.length > 0) {
            // 收缩所有节点
            this.setState({ expandedKeys: [] });
        } else {
            // 展开所有节点
            const getAllKeys = (nodes) => {
                let keys = [];
                nodes.forEach(node => {
                    keys.push(node.key);
                    if (node.children) {
                        keys = keys.concat(getAllKeys(node.children));
                    }
                });
                return keys;
            };
            this.setState({ expandedKeys: getAllKeys(organizationData) });
        }
    };

    // 搜索树节点
    onTreeSearch = (value) => {
        const { organizationData } = this.state;
        this.setState({ searchValue: value });
        
        if (!value) {
            // 搜索为空时，显示所有数据并恢复默认展开状态
            this.setState({ 
                filteredTreeData: [],
                expandedKeys: ['basic_info', 'admin_position']
            });
            return;
        }

        // 过滤树数据
        const filterTree = (data) => {
            return data.map(item => {
                const match = item.title.toLowerCase().includes(value.toLowerCase());
                let children = [];
                
                if (item.children) {
                    children = filterTree(item.children).filter(child => child);
                }
                
                if (match || children.length > 0) {
                    return {
                        ...item,
                        children: children.length > 0 ? children : undefined
                    };
                }
                return null;
            }).filter(item => item);
        };

        const filtered = filterTree(organizationData);
        
        // 搜索时自动展开所有匹配的节点
        const getAllKeys = (data) => {
            let keys = [];
            data.forEach(item => {
                keys.push(item.key);
                if (item.children) {
                    keys = keys.concat(getAllKeys(item.children));
                }
            });
            return keys;
        };
        
        this.setState({ 
            filteredTreeData: filtered,
            expandedKeys: getAllKeys(filtered)
        });
    };

    // 根据key查找元数据域信息
    findMetadataByKey = (key) => {
        const { organizationData } = this.state;
        
        const findInData = (data) => {
            for (let item of data) {
                if (item.key === key) {
                    return item;
                }
                if (item.children) {
                    const found = findInData(item.children);
                    if (found) return found;
                }
            }
            return null;
        };
        
        return findInData(organizationData);
    };

    // 渲染元数据域信息区域
    renderMetadataInfo = () => {
        const { selectedMetadata } = this.state;
        
        if (!selectedMetadata) {
            return null;
        }

        return (
            <div className={styles.metadataInfoSection}>
                <Row gutter={16}>
                    <Col span={12}>
                        <div className={styles.metadataField}>
                            <label className={styles.metadataLabel}>元数据域名称</label>
                            <Input
                                value={selectedMetadata.name}
                                className={styles.metadataInput}
                                readOnly
                            />
                        </div>
                    </Col>
                    <Col span={12}>
                        <div className={styles.metadataField}>
                            <label className={styles.metadataLabel}>元数据域编码</label>
                            <Input
                                value={selectedMetadata.code}
                                className={styles.metadataInput}
                                readOnly
                            />
                        </div>
                    </Col>
                    <Col span={24}>
                        <div className={styles.metadataField}>
                            <label className={styles.metadataLabel}>描述</label>
                            <Input.TextArea
                                value={selectedMetadata.description}
                                className={styles.metadataTextarea}
                                rows={2}
                                readOnly
                            />
                        </div>
                    </Col>
                </Row>
            </div>
        );
    };

    renderForm() {
        // 数据字典页面暂不需要搜索表单
        return null;
    }

    // 分页处理
    onPaginationChange = (page, pageSize) => {
        this.setState({
            pagination: {
                ...this.state.pagination,
                current: page,
                pageSize,
            }
        });
    };

    // 显示新增弹窗
    showAddModal = () => {
        this.setState({ addModalVisible: true });
    };

    // 关闭新增/编辑弹窗
    hideAddModal = () => {
        this.setState({ 
            addModalVisible: false,
            selectedRecord: null  // 清空选中记录
        });
    };

    // 新增成功回调
    handleAddSuccess = (values) => {
        console.log('新增成功:', values);

        // 这里可以刷新列表数据
        // 模拟添加到表格数据中
        const newStaff = {
            key: String(Date.now()),
            id: this.state.tableData.length + 1,
            name: values.name,
            phone: values.age,  // 年龄
            idCard: values.department,  // 部门
            department: values.position,  // 岗位
            position: values.workType,  // 工作性质
            status: values.phone,  // 电话
            entryDate: new Date().toISOString().split('T')[0]
        };

        this.setState({
            tableData: [...this.state.tableData, newStaff],
            pagination: {
                ...this.state.pagination,
                total: this.state.pagination.total + 1
            }
        });
    };

    // 处理姓名点击事件
    handleNameClick = (record) => {
        console.log('查看员工绩效详情:', record);
        // 可以跳转到绩效详情页面或显示详情模态框
        Modal.info({
            title: `${record.name} - 绩效详情`,
            width: 600,
            content: (
                <div style={{ marginTop: 16 }}>
                    <p><strong>员工姓名：</strong>{record.name}</p>
                    <p><strong>性别：</strong>{record.gender}</p>
                    <p><strong>年龄：</strong>{record.age}岁</p>
                    <p><strong>部门：</strong>{record.department}</p>
                    <p><strong>职位：</strong>{record.position}</p>
                    <p><strong>绩效总分：</strong><span style={{ 
                        fontWeight: 'bold', 
                        color: record.totalScore >= 90 ? '#52c41a' : 
                               record.totalScore >= 80 ? '#1890ff' : 
                               record.totalScore >= 70 ? '#faad14' : '#ff4d4f'
                    }}>{record.totalScore}</span></p>
                    <p><strong>绩效状态：</strong>{record.performanceStatus}</p>
                </div>
            ),
            okText: '确定'
        });
    };

    // 处理编辑
    handleEdit = (record) => {
        console.log('编辑员工绩效:', record);
        this.setState({
            selectedRecord: record,
            showPerformanceAdd: true
        });
    };

    // 处理删除
    handleDelete = (record) => {
        Modal.confirm({
            title: '删除确认',
            content: `确定要删除员工 "${record.name}" 的绩效记录吗？`,
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                // 实际项目中这里应该调用删除接口
                console.log('删除绩效记录:', record.id);
                
                const newData = this.state.tableData.filter(item => item.id !== record.id);
                this.setState({ 
                    tableData: newData,
                    pagination: {
                        ...this.state.pagination,
                        total: newData.length
                    }
                });
                message.success('删除成功');
            }
        });
    };

    // 新增元数据域
    handleAddMetadataDomain = () => {
        console.log('新增元数据域');
        // 这里可以打开新增元数据域的弹窗
        message.info('新增元数据域功能开发中...');
    };

    // 导出配置
    handleExportConfig = () => {
        console.log('导出配置');
        // 这里可以调用导出配置的接口
        message.info('导出配置功能开发中...');
    };

    render() {
        const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;

        return (
            <div className={styles.dataDictContainer}>
                {/* 页面标题区域 */}
                <div style={{ 
                    display: 'flex', 
                    justifyContent: 'flex-end', 
                    alignItems: 'center', 
                    padding: '12px 24px',
                }}>
                    <Space size="middle">
                        <Button 
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={this.handleAddMetadataDomain}
                            style={{ 
                                backgroundColor: '#2D5CF6',
                                borderColor: '#2D5CF6',
                                borderRadius: '4px'
                            }}
                        >
                            新增元数据域
                        </Button>
                        <Button
                            icon={<DownloadOutlined />}
                            onClick={this.handleExportConfig}
                            style={{ 
                                borderColor: '#d9d9d9',
                                borderRadius: '4px'
                            }}
                        >
                            导出配置
                        </Button>
                    </Space>
                </div>

                {/* 主体内容 */}
                <div className={styles.mainContent}>
                    <Card className={styles.contentCard}>
                        <Row gutter={24}>
                            {/* 左侧元数据域树 */}
                            <Col span={5}>
                                <Card
                                    title={
                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <ApartmentOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                                                <span>员工模型</span>
                                            </div>
                                            <Space>
                                                <Button
                                                    type="text"
                                                    icon={<SyncOutlined />}
                                                    size="small"
                                                    style={{ color: '#1890ff' }}
                                                    onClick={this.handleTreeRefresh}
                                                    title="刷新"
                                                />
                                                <Button
                                                    type="text"
                                                    icon={<ExpandOutlined />}
                                                    size="small"
                                                    style={{ color: '#1890ff' }}
                                                    onClick={this.handleTreeToggle}
                                                    title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
                                                />
                                            </Space>
                                        </div>
                                    }
                                    className={styles.treeCard}
                                >
                                    {/* 搜索框 */}
                                    <div className={styles['tree-search']}>
                                        <Input
                                            placeholder="搜索元数据域..."
                                            prefix={<SearchOutlined />}
                                            value={this.state.searchValue}
                                            onChange={(e) => this.onTreeSearch(e.target.value)}
                                            allowClear
                                            size="middle"
                                        />
                                    </div>
                                    <div className={styles.treeContainer}>
                                        {this.state.searchValue && this.getTreeData().length === 0 ? (
                                            <div style={{ 
                                                textAlign: 'center', 
                                                padding: '40px 20px',
                                                color: '#999',
                                                fontSize: '14px'
                                            }}>
                                                <SearchOutlined style={{ fontSize: '24px', marginBottom: '8px', display: 'block' }} />
                                                未找到匹配的元数据域
                                                <div style={{ fontSize: '12px', marginTop: '4px' }}>
                                                    尝试使用其他关键词搜索
                                                </div>
                                            </div>
                                        ) : (
                                            <Tree
                                                showIcon
                                                expandedKeys={expandedKeys}
                                                selectedKeys={this.state.selectedKeys}
                                                onSelect={this.onTreeSelect}
                                                onExpand={this.onTreeExpand}
                                                treeData={this.getTreeData()}
                                                className={styles.orgTree}
                                            />
                                        )}
                                    </div>
                                </Card>
                            </Col>

                            {/* 右侧属性信息区 */}
                            <Col span={19}>
                                {/* 属性表格 */}
                                <Card 
                                    className={styles.tableCard}
                                    title={
                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                            <span>绩效参数属性配置</span>
                                            <Button
                                                type="primary"
                                                size="middle"
                                                icon={<PlusOutlined  />}
                                                onClick={this.showAddModal}
                                            >
                                                新增属性
                                            </Button>
                                        </div>
                                    }
                                >
                                    {/* 元数据域信息区域 */}
                                    {this.renderMetadataInfo()}

                                    <StandardTable
                                        columns={this.defaultColumns}
                                        dataSource={tableData}
                                        pagination={false}
                                        size="small"
                                        selectedRows={[]}
                                    />

                                    {/* 分页 */}
                                    <div className={styles.paginationWrapper}>
                                        <Pagination
                                            current={pagination.current}
                                            total={pagination.total}
                                            pageSize={pagination.pageSize}
                                            showSizeChanger
                                            showQuickJumper
                                            showTotal={(total, range) =>
                                                `显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
                                            }
                                            onChange={this.onPaginationChange}
                                            onShowSizeChange={this.onPaginationChange}
                                        />
                                    </div>
                                </Card>
                            </Col>
                        </Row>
                    </Card>
                </div>

                {/* 新增/编辑绩效弹窗 */}
                <PerformanceRulesetAdd
                    visible={addModalVisible}
                    loading={addLoading}
                    editData={this.state.selectedRecord}
                    onCancel={this.hideAddModal}
                    onSuccess={this.handleAddSuccess}
                />
            </div>
        );
    }
}

export default PerformanceRuleset;