<template>
    <div class="pro-table-editable-example" :class="{ 'is-readonly': readonly }">
        <div class="table-actions">
            <el-button type="primary" @click="handleAdd">添加行</el-button>
            <el-button type="primary" @click="handleValidate">校验表格</el-button>
            <el-button type="primary" @click="handleGetAllData">获取表格所有数据</el-button>
            <el-button :type="readonly ? 'success' : 'default'" @click="toggleReadonly">
                {{ readonly ? '取消只读' : '设置为只读' }}
            </el-button>
        </div>
        <pro-table
            ref="tableRef"
            :data-source="tableData"
            :columns="columns"
            :show-header="false"
            :show-toolbar="false"
            :show-pagination="false"
            :editable="true"
            :readonly="readonly"
            :field-size="'small'"
            :on-after-add-range="handleAfterAddRange"
            @add="handleAdd"
            @delete="handleDelete"
            @update="handleUpdate"
            @validation-change="handleValidationChange"
        >
            <template #action="{ row, index }">
                <el-button type="danger" :size="'small'" :disabled="readonly" @click="handleDelete(row, index)">
                    删除
                </el-button>
            </template>
            <template #empty>
                <div class="pro-table-empty-text" style="height: auto !important">暂无数据</div>
            </template>
        </pro-table>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElButton, ElInput } from '@deppon/deppon-ui';
import { ProTable } from '@deppon/deppon-template';

// 只读模式
const readonly = ref(false);

// 控制是否显示范围操作列（添加/删除按钮列）
const showRangeActionColumn = ref(true);

// 表格引用
const tableRef = ref(null);

// 动态计算表格高度
const tableHeight = computed(() => {
    const length = tableData.value.length;
    console.log('length', length);
    if (length === 0) {
        return '100px';
    }
    return length > 8 ? '800px' : 'auto';
});

// 处理校验状态变化
const handleValidationChange = (rowIndex, hasError) => {
    // 校验状态变化时的处理逻辑（已移除分页相关逻辑）
};

// 检查是否存在 priority 为"低"的值
const hasLowPriority = computed(() => {
    return tableData.value.some(row => {
        if (!row || !row.priority) {
            return false;
        }
        // priority 是范围列，可能是数组格式
        if (Array.isArray(row.priority)) {
            return row.priority.some(p => p === 'low');
        }
        return row.priority === 'low';
    });
});

// 列配置
const columns = computed(() => [
    {
        prop: 'id',
        label: 'ID',
        width: 80,
        align: 'center',
        hideInSearch: true,
        hideInTable: false,
    },
    {
        prop: 'name',
        label: '姓名',
        width: 160,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请输入姓名',
        },
        warningText: '固定', // 显示在字段值后面的文本
        warningTooltip: '此字段为必填项，请谨慎填写', // 鼠标悬停时显示的提示
        rules: [
            { required: true, message: '姓名不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' },
        ],
    },

    {
        prop: 'leftRangeDp',
        label: '梯度最小值(不含)',
        width: 150,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        isRangeColumn: true, // 标识为范围列
        rangePairProp: 'rightRangeDp', // 关联的最大值列
        // maxRangeCount 示例：根据 singleTicketLadder 字段动态限制
        // 如果 singleTicketLadder 有值，最多可以添加 5 个范围项
        // 如果 singleTicketLadder 没有值，只能添加 1 个范围项
        maxRangeCount: row => {
            return row?.singleTicketLadder ? 5 : 1;
        },
        fieldProps: (row, index) => {
            // index 是 rangeIndex，如果不是第一项（index > 0），且上一项的最大值存在，则禁用
            const isDisabled =
                index > 0 &&
                (() => {
                    const maxValues = row?.rightRangeDp
                        ? Array.isArray(row.rightRangeDp)
                            ? row.rightRangeDp
                            : [row.rightRangeDp]
                        : [];
                    const prevMaxValue = maxValues[index - 1];
                    // 如果上一项的最大值存在且不是"99999999"，则禁用当前最小值输入框
                    return (
                        prevMaxValue !== undefined &&
                        prevMaxValue !== null &&
                        prevMaxValue !== '' &&
                        prevMaxValue !== '99999999' &&
                        prevMaxValue !== 99999999
                    );
                })();

            return {
                placeholder: `请输入最小值${index !== undefined ? `（第${index + 1}段）` : ''}`,
                disabled: isDisabled,
            };
        },
        rules: [
            {
                required: true,
                message: '最小值不能为空',
                trigger: 'blur',
            },
            {
                validator: (rule, value, callback, row, rowIndex, rangeIndex) => {
                    // 对于范围列，现在 value 是数组，rangeIndex 未定义（因为需要校验整个数组）
                    // 获取完整的最小值数组
                    const values = Array.isArray(row?.leftRangeDp)
                        ? row.leftRangeDp
                        : row?.leftRangeDp !== undefined
                        ? [row.leftRangeDp]
                        : [];

                    // 如果 rangeIndex 未定义，说明是在校验整个数组，需要收集所有错误
                    if (rangeIndex === undefined) {
                        // 获取对应的最大值数组
                        const maxValues = row?.rightRangeDp
                            ? Array.isArray(row.rightRangeDp)
                                ? row.rightRangeDp
                                : [row.rightRangeDp]
                            : [];

                        // 收集每个输入框的错误信息（对象格式，key 为数组索引）
                        const errors = {};

                        values.forEach((item, index) => {
                            // 跳过空值（必填规则会处理）
                            if (item === undefined || item === null || item === '') {
                                return;
                            }

                            // 如果是"99999999"，不允许作为最小值
                            if (item === '99999999' || item === 99999999) {
                                errors[index] = `第${index + 1}个最小值不能为"99999999"`;
                                return;
                            }

                            // 转换为数字进行校验
                            const numValue = Number(item);
                            if (isNaN(numValue)) {
                                errors[index] = `第${index + 1}个最小值必须是有效数字`;
                                return;
                            }

                            // 最小值必须大于等于0
                            if (numValue < 0) {
                                errors[index] = `第${index + 1}个最小值不能小于0`;
                                return;
                            }

                            // 最小值不能大于等于10000
                            if (numValue >= 10000) {
                                errors[index] = `第${index + 1}个最小值不能大于等于10000`;
                                return;
                            }

                            // 校验连续范围规则：如果不是第一行，当前行的最小值必须大于等于上一行的最大值
                            if (index > 0) {
                                const prevMaxValue = maxValues[index - 1];
                                if (prevMaxValue !== undefined && prevMaxValue !== null && prevMaxValue !== '') {
                                    // 如果上一行的最大值是"99999999"，则不能有下一行
                                    if (prevMaxValue === '99999999' || prevMaxValue === 99999999) {
                                        errors[index] = `第${
                                            index + 1
                                        }个最小值：上一行的最大值是"99999999"，不能添加下一行`;
                                        return;
                                    }
                                    const prevMaxNum = Number(prevMaxValue);
                                    if (!isNaN(prevMaxNum) && numValue < prevMaxNum) {
                                        errors[index] = `第${
                                            index + 1
                                        }个最小值必须大于等于上一行的最大值（${prevMaxValue}）`;
                                        return;
                                    }
                                }
                            }

                            // 校验最小值必须小于对应的最大值
                            const maxItem = maxValues[index];
                            if (maxItem !== undefined && maxItem !== null && maxItem !== '') {
                                // 如果最大值是"99999999"，则最小值可以小于它
                                if (maxItem === '99999999' || maxItem === 99999999) {
                                    return;
                                }

                                const maxNumValue = Number(maxItem);
                                if (!isNaN(maxNumValue) && numValue >= maxNumValue) {
                                    errors[index] = `第${index + 1}个最小值必须小于最大值`;
                                    return;
                                }
                            }
                        });

                        // 如果有错误，返回错误对象（通过 Error 对象传递对象格式的错误信息）
                        if (Object.keys(errors).length > 0) {
                            const error = new Error('leftRangeDp validation failed');
                            error.errors = errors;
                            callback(error);
                            return;
                        }

                        callback();
                    } else {
                        // 单个项的校验（用于实时校验，但这种情况不应该发生，因为我们现在总是传递整个数组）
                        // 跳过空值（必填规则会处理）
                        if (value === undefined || value === null || value === '') {
                            callback();
                            return;
                        }

                        // 如果是"99999999"，不允许作为最小值
                        if (value === '99999999' || value === 99999999) {
                            callback(new Error(`第${rangeIndex + 1}个最小值不能为"99999999"`));
                            return;
                        }

                        // 转换为数字进行校验
                        const numValue = Number(value);
                        if (isNaN(numValue)) {
                            callback(new Error(`第${rangeIndex + 1}个最小值必须是有效数字`));
                            return;
                        }

                        // 最小值必须大于等于0
                        if (numValue < 0) {
                            callback(new Error(`第${rangeIndex + 1}个最小值不能小于0`));
                            return;
                        }

                        // 最小值不能大于等于10000
                        if (numValue >= 10000) {
                            callback(new Error(`第${rangeIndex + 1}个最小值不能大于等于10000`));
                            return;
                        }

                        // 获取对应的最大值数组
                        const maxValues = row?.rightRangeDp
                            ? Array.isArray(row.rightRangeDp)
                                ? row.rightRangeDp
                                : [row.rightRangeDp]
                            : [];

                        // 校验连续范围规则：如果不是第一行，当前行的最小值必须大于等于上一行的最大值
                        if (rangeIndex > 0) {
                            const prevMaxValue = maxValues[rangeIndex - 1];
                            if (prevMaxValue !== undefined && prevMaxValue !== null && prevMaxValue !== '') {
                                // 如果上一行的最大值是"99999999"，则不能有下一行
                                if (prevMaxValue === '99999999' || prevMaxValue === 99999999) {
                                    callback(
                                        new Error(
                                            `第${rangeIndex + 1}个最小值：上一行的最大值是"99999999"，不能添加下一行`,
                                        ),
                                    );
                                    return;
                                }
                                const prevMaxNum = Number(prevMaxValue);
                                if (!isNaN(prevMaxNum) && numValue < prevMaxNum) {
                                    callback(
                                        new Error(
                                            `第${rangeIndex + 1}个最小值必须大于等于上一行的最大值（${prevMaxValue}）`,
                                        ),
                                    );
                                    return;
                                }
                            }
                        }

                        // 校验最小值必须小于对应的最大值
                        const maxItem = maxValues[rangeIndex];
                        if (maxItem !== undefined && maxItem !== null && maxItem !== '') {
                            // 如果最大值是"99999999"，则最小值可以小于它
                            if (maxItem === '99999999' || maxItem === 99999999) {
                                callback();
                                return;
                            }

                            const maxNumValue = Number(maxItem);
                            if (!isNaN(maxNumValue) && numValue >= maxNumValue) {
                                callback(new Error(`第${rangeIndex + 1}个最小值必须小于最大值`));
                                return;
                            }
                        }

                        callback();
                    }
                },
                trigger: 'blur',
            },
        ],
    },
    {
        prop: 'rightRangeDp',
        label: '梯度最大值(含)',
        width: 150,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        isRangeColumn: true, // 标识为范围列
        rangePairProp: 'leftRangeDp', // 关联的最小值列
        // maxRangeCount 示例：根据 singleTicketLadder 字段动态限制
        // 必须与 leftRangeDp 列的限制保持一致
        maxRangeCount: row => {
            return row?.singleTicketLadder ? 5 : 1;
        },
        fieldProps: {
            suffix: '元',
            placeholder: '请输入最大值',
        },
        rules: [
            {
                required: true,
                message: '最大值不能为空',
                trigger: 'blur',
            },
            {
                validator: (rule, value, callback, row, rowIndex, rangeIndex) => {
                    // 对于范围列，现在 value 是单个项的值，rangeIndex 是该项的索引
                    // 但我们需要校验整个数组，所以需要获取完整的数组值
                    const values = Array.isArray(row?.rightRangeDp)
                        ? row.rightRangeDp
                        : row?.rightRangeDp !== undefined
                        ? [row.rightRangeDp]
                        : [];

                    // 如果 rangeIndex 未定义，说明是在校验整个数组，需要收集所有错误
                    if (rangeIndex === undefined) {
                        // 获取对应的最小值
                        const minValues = row?.leftRangeDp
                            ? Array.isArray(row.leftRangeDp)
                                ? row.leftRangeDp
                                : [row.leftRangeDp]
                            : [];

                        // 收集每个输入框的错误信息（对象格式，key 为数组索引）
                        const errors = {};

                        values.forEach((item, index) => {
                            // 跳过空值（必填规则会处理）
                            if (item === undefined || item === null || item === '') {
                                return;
                            }

                            // 允许"99999999"
                            if (item === '99999999' || item === 99999999) {
                                // 如果当前行的最大值是"99999999"，则不能有下一行
                                if (index < values.length - 1) {
                                    const nextMinValue = minValues[index + 1];
                                    if (nextMinValue !== undefined && nextMinValue !== null && nextMinValue !== '') {
                                        errors[index] = `第${index + 1}个最大值是"99999999"，不能添加下一行`;
                                        return;
                                    }
                                }
                                return;
                            }

                            // 转换为数字进行校验
                            const numValue = Number(item);
                            if (isNaN(numValue)) {
                                errors[index] = `第${index + 1}个最大值必须是有效数字或"99999999"`;
                                return;
                            }

                            // 最大值必须大于0
                            if (numValue <= 0) {
                                errors[index] = `第${index + 1}个最大值必须大于0`;
                                return;
                            }

                            // 最大值不能大于99999999（允许等于99999999）
                            if (numValue > 99999999) {
                                errors[index] = `第${index + 1}个最大值不能大于99999999`;
                                return;
                            }

                            // 校验最大值必须大于对应的最小值
                            const minItem = minValues[index];
                            if (minItem !== undefined && minItem !== null && minItem !== '') {
                                // 最小值不能是"99999999"（在最小值校验中会处理）
                                if (minItem === '99999999' || minItem === 99999999) {
                                    return;
                                }

                                const minNumValue = Number(minItem);
                                if (!isNaN(minNumValue) && numValue <= minNumValue) {
                                    errors[index] = `第${index + 1}个最大值必须大于最小值`;
                                    return;
                                }
                            }

                            // 校验连续范围规则：如果不是最后一行，下一行的最小值必须大于等于当前行的最大值
                            if (index < values.length - 1) {
                                const nextMinValue = minValues[index + 1];
                                if (nextMinValue !== undefined && nextMinValue !== null && nextMinValue !== '') {
                                    // 如果下一行的最小值是"99999999"，则不符合规则
                                    if (nextMinValue === '99999999' || nextMinValue === 99999999) {
                                        errors[index] = `第${index + 1}个最大值：下一行的最小值不能是"99999999"`;
                                        return;
                                    }
                                    const nextMinNum = Number(nextMinValue);
                                    if (!isNaN(nextMinNum) && nextMinNum < numValue) {
                                        errors[index] = `第${
                                            index + 1
                                        }个最大值必须小于等于下一行的最小值（当前：${numValue}，下一行最小值：${nextMinValue}）`;
                                        return;
                                    }
                                }
                            }
                        });

                        // 如果有错误，返回错误对象（通过 Error 对象传递对象格式的错误信息）
                        if (Object.keys(errors).length > 0) {
                            const error = new Error('rightRangeDp validation failed');
                            error.errors = errors;
                            callback(error);
                            return;
                        }

                        callback();
                    } else {
                        // 单个项的校验（用于实时校验）
                        // 跳过空值（必填规则会处理）
                        if (value === undefined || value === null || value === '') {
                            callback();
                            return;
                        }

                        // 获取对应的最小值
                        const minValues = row?.leftRangeDp
                            ? Array.isArray(row.leftRangeDp)
                                ? row.leftRangeDp
                                : [row.leftRangeDp]
                            : [];

                        // 获取完整的最大值数组
                        const allMaxValues = Array.isArray(row?.rightRangeDp)
                            ? row.rightRangeDp
                            : row?.rightRangeDp !== undefined
                            ? [row.rightRangeDp]
                            : [];

                        // 允许"99999999"
                        if (value === '99999999' || value === 99999999) {
                            // 如果当前行的最大值是"99999999"，则不能有下一行
                            if (rangeIndex < allMaxValues.length - 1) {
                                const nextMinValue = minValues[rangeIndex + 1];
                                if (nextMinValue !== undefined && nextMinValue !== null && nextMinValue !== '') {
                                    callback(new Error(`第${rangeIndex + 1}个最大值是"99999999"，不能添加下一行`));
                                    return;
                                }
                            }
                            callback();
                            return;
                        }

                        // 转换为数字进行校验
                        const numValue = Number(value);
                        if (isNaN(numValue)) {
                            callback(new Error(`第${rangeIndex + 1}个最大值必须是有效数字或"99999999"`));
                            return;
                        }

                        // 最大值必须大于0
                        if (numValue <= 0) {
                            callback(new Error(`第${rangeIndex + 1}个最大值必须大于0`));
                            return;
                        }

                        // 最大值不能大于99999999（允许等于99999999）
                        if (numValue > 99999999) {
                            callback(new Error(`第${rangeIndex + 1}个最大值不能大于99999999`));
                            return;
                        }

                        // 校验最大值必须大于对应的最小值
                        const minItem = minValues[rangeIndex];
                        if (minItem !== undefined && minItem !== null && minItem !== '') {
                            // 最小值不能是"99999999"（在最小值校验中会处理）
                            if (minItem === '99999999' || minItem === 99999999) {
                                callback();
                                return;
                            }

                            const minNumValue = Number(minItem);
                            if (!isNaN(minNumValue) && numValue <= minNumValue) {
                                callback(new Error(`第${rangeIndex + 1}个最大值必须大于最小值`));
                                return;
                            }
                        }

                        // 校验连续范围规则：如果不是最后一行，下一行的最小值必须大于等于当前行的最大值
                        if (rangeIndex < allMaxValues.length - 1) {
                            const nextMinValue = minValues[rangeIndex + 1];
                            if (nextMinValue !== undefined && nextMinValue !== null && nextMinValue !== '') {
                                // 如果下一行的最小值是"99999999"，则不符合规则
                                if (nextMinValue === '99999999' || nextMinValue === 99999999) {
                                    callback(new Error(`第${rangeIndex + 1}个最大值：下一行的最小值不能是"99999999"`));
                                    return;
                                }
                                const nextMinNum = Number(nextMinValue);
                                if (!isNaN(nextMinNum) && nextMinNum < numValue) {
                                    callback(
                                        new Error(
                                            `第${
                                                rangeIndex + 1
                                            }个最大值必须小于等于下一行的最小值（当前：${numValue}，下一行最小值：${nextMinValue}）`,
                                        ),
                                    );
                                    return;
                                }
                            }
                        }

                        callback();
                    }
                },
                trigger: 'blur',
            },
        ],
    },
    // 范围操作列（添加/删除按钮）- 放在最大值列后面
    // 只有当 showRangeActionColumn 为 true 且 hasLowPriority 为 true 时才显示

    {
        prop: 'rangeActions',
        label: '',
        width: 130,
        hideInSearch: true,
        valueType: 'rangeActions', // 特殊类型：范围操作列
        // 配置关联的范围列属性
        fieldProps: {
            minProp: 'leftRangeDp', // 最小值列的属性名
            maxProp: 'rightRangeDp', // 最大值列的属性名
            relatedProps: ['leftRangeDp', 'rightRangeDp', 'valueInput', 'priority', 'feeRate'], // 所有关联的范围列
        },
        // 配置最大范围项数量限制（与 rightRangeDp 列保持一致）
        maxRangeCount: row => {
            return 5;
        },
    },
    {
        prop: 'valueInput',
        label: '值输入1',
        width: 150,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        isRangeColumn: true, // 标识为范围列
        rangePairProp: 'value', // 数量联动标记，随 leftRangeDp/rightRangeDp 的数量增减
        fieldProps: {
            suffix: '元',
        },
    },
    {
        prop: 'priority',
        label: '优先级',
        width: 150,
        align: 'center',
        valueType: 'select',
        hideInSearch: true,

        isRangeColumn: true, // 标识为范围列
        rangePairProp: 'value', // 与 valueInput 一起联动，随 leftRangeDp/rightRangeDp 的数量增减
        clearRelatedFields: 'feeRate', // 当该字段更新时，清空 feeRate 字段的值和校验错误（支持单个字段名或字段名数组，如 ['feeRate', 'otherField']）
        warningTooltip: (row, index) => {
            return `无 - 第${index + 1}段`;
        },
        fieldProps: {
            options: [
                { label: '低', value: 'low' },
                { label: '中', value: 'medium' },
                { label: '高', value: 'high' },
                { label: '紧急', value: 'urgent' },
            ],
            suffix: '元',
            placeholder: '请选择优先级',
        },
    },
    {
        prop: 'feeRate',
        label: '费率',
        isRangeColumn: true, // 标识为范围列
        rangePairProp: 'value', // 数量联动标记，只同步数量，不参与值联动
        warningTooltip: (row, index) => {
            const priorityValue = Array.isArray(row?.priority) ? row.priority[index] : row?.priority;
            // 如果优先级是 'low'，使用 textArray 类型
            if (priorityValue === 'low') {
                return '';
            }
            // 使用返回的 unitDescription，支持数组格式（根据索引取对应值）
            // 返回 null、undefined、false 或空字符串时不显示 tooltip
            const unitDescription = row?.unitDescription;
            if (Array.isArray(unitDescription)) {
                const value = unitDescription[index];
                // 如果没有值，返回 null 不显示 tooltip
                if (!value || value === '') {
                    return null;
                }
                return value;
            }
            // 如果没有值，返回 null 不显示 tooltip
            if (!unitDescription || unitDescription === '') {
                return null;
            }
            return unitDescription;
        },
        width: 400,
        align: 'center',
        valueType: (row, index) => {
            // 根据优先级动态确定类型
            // priority 是范围列，可能是数组格式
            const priorityValue = Array.isArray(row?.priority) ? row.priority[index] : row?.priority;

            // 如果优先级是 'low'，使用 textArray 类型
            if (priorityValue === 'low') {
                return 'textArray';
            }
            // 其他情况使用 text 类型
            return 'text';
        },
        hideInSearch: true,
        fieldProps: (row, index, readonly) => {
            // 先判断 valueType
            const priorityValue = Array.isArray(row?.priority) ? row.priority[index] : row?.priority;
            const isTextArray = priorityValue === 'low';

            if (isTextArray) {
                // textArray 类型的配置
                // 检查 type 是否为空（支持数组，根据索引判断对应位置的值）
                const hasType = Array.isArray(row?.type)
                    ? row.type[index] !== undefined && row.type[index] !== null && row.type[index] !== ''
                    : row?.type !== undefined && row?.type !== null && row?.type !== '';

                // 获取范围限制（使用现有的 leftRangeDp 和 rightRangeDp）
                const minValues = Array.isArray(row?.leftRangeDp) ? row.leftRangeDp : [row?.leftRangeDp];
                const maxValues = Array.isArray(row?.rightRangeDp) ? row.rightRangeDp : [row?.rightRangeDp];
                const currentMinValue = minValues[index] !== undefined ? minValues[index] : minValues[0];
                const currentMaxValue = maxValues[index] !== undefined ? maxValues[index] : maxValues[0];

                // 获取 warningTooltip 函数（从列配置中获取，但 textArray 模式下不使用列配置的 warningTooltip）
                // 对于 textArray 模式，warningTooltip 通过 arrayItemProps 传递
                // 获取 unitDescription（用于 warningTooltip）
                const unitDescription = row?.unitDescription;

                // arrayItemProps 函数：为每个输入框返回配置
                const arrayItemProps = arrayIndex => {
                    // 动态生成 placeholder
                    let placeholder = '请输入';
                    if (
                        currentMinValue !== undefined &&
                        currentMinValue !== null &&
                        currentMinValue !== '' &&
                        currentMaxValue !== undefined &&
                        currentMaxValue !== null &&
                        currentMaxValue !== ''
                    ) {
                        placeholder = `范围：${currentMinValue} - ${currentMaxValue}`;
                    } else if (currentMinValue !== undefined && currentMinValue !== null && currentMinValue !== '') {
                        placeholder = `范围：≥${currentMinValue}`;
                    } else if (currentMaxValue !== undefined && currentMaxValue !== null && currentMaxValue !== '') {
                        placeholder = `范围：≤${currentMaxValue}`;
                    }

                    // 获取 warningTooltip（从 unitDescription 获取，支持数组格式）
                    let warningTooltipValue = null;
                    if (Array.isArray(unitDescription)) {
                        // 如果是数组，使用 arrayIndex 获取对应的值
                        const value = unitDescription[arrayIndex];
                        if (value && value !== '') {
                            warningTooltipValue = value;
                        }
                    } else if (unitDescription && unitDescription !== '') {
                        // 如果不是数组，直接使用
                        warningTooltipValue = unitDescription;
                    }

                    const result = {
                        placeholder,
                        type: 'number',
                    };

                    // 传递 warningTooltip 到 arrayItemProps（需要 FieldText 组件支持）
                    if (warningTooltipValue) {
                        result.warningTooltip = '11111';
                    }

                    return result;
                };

                const result = {
                    placeholder: '请输入费率',
                    // 为每个输入框提供配置的函数
                    arrayItemProps,
                };

                // 只读模式下不返回 options
                if (!readonly) {
                    result.options = [
                        { label: '预约排队', subType: 'yuyuepaidui', subName: '预约排队', suffix: '元/票' },
                        { label: '开箱点数', subType: 'kaixiangdianshu', subName: '开箱点数', suffix: '元/票' },
                        { label: '上架', subType: 'shangjia', subName: '上架', suffix: '元/票' },
                        { label: '清货', subType: 'qinghuo', subName: '清货', suffix: '元/票' },
                    ];
                }

                return result;
            } else {
                // text 类型的配置
                return {
                    placeholder: '请输入费率',
                };
            }
        },
        rules: [
            {
                validator: (rule, value, callback, row, rowIndex, rangeIndex) => {
                    // 对于 rangeColumn，当 rangeIndex 是 undefined 时（整体校验），需要遍历所有 rangeIndex
                    // 因为可能存在混合类型（textArray 和 text）
                    if (rangeIndex === undefined && Array.isArray(value) && Array.isArray(row?.priority)) {
                        // 整体校验：遍历所有 rangeIndex，收集错误信息
                        const allErrors = {};
                        let hasError = false;

                        for (let idx = 0; idx < value.length; idx++) {
                            const rangeValue = value[idx];
                            const priorityValue = row.priority[idx];
                            const isTextArray = priorityValue === 'low';

                            if (isTextArray) {
                                // textArray 类型的校验
                                // 只有当 rangeValue 确实为空数组或不是数组时，才设置所有输入框的错误
                                // 需要检查 rangeValue 是否真的为空：不是数组，或者是空数组，或者数组中所有项的 value 都为空
                                const isEmpty =
                                    !Array.isArray(rangeValue) ||
                                    rangeValue.length === 0 ||
                                    rangeValue.every(
                                        item => item?.value === undefined || item?.value === null || item?.value === '',
                                    );

                                if (isEmpty) {
                                    // textArray 类型但值为空，必须输入
                                    // 对于 textArray 类型，错误应该是对象格式 {arrayIndex: '错误'}
                                    // 当数组为空时，需要在所有输入框上显示错误
                                    // 根据配置，textArray 有 4 个选项：预约排队、开箱点数、上架、清货
                                    const options = [
                                        {
                                            label: '预约排队',
                                            subType: 'yuyuepaidui',
                                            subName: '预约排队',
                                            suffix: '元/票',
                                        },
                                        {
                                            label: '开箱点数',
                                            subType: 'kaixiangdianshu',
                                            subName: '开箱点数',
                                            suffix: '元/票',
                                        },
                                        { label: '上架', subType: 'shangjia', subName: '上架', suffix: '元/票' },
                                        { label: '清货', subType: 'qinghuo', subName: '清货', suffix: '元/票' },
                                    ];
                                    const errors = {};
                                    for (let i = 0; i < options.length; i++) {
                                        const label = options[i]?.label || `第${i + 1}项`;
                                        errors[i] = `${label}不能为空`;
                                    }
                                    allErrors[idx] = errors;
                                    hasError = true;
                                    continue;
                                }

                                // 获取范围限制
                                const minValues = Array.isArray(row?.leftRangeDp)
                                    ? row.leftRangeDp
                                    : [row?.leftRangeDp];
                                const maxValues = Array.isArray(row?.rightRangeDp)
                                    ? row.rightRangeDp
                                    : [row?.rightRangeDp];
                                const currentMinValue = minValues[idx] !== undefined ? minValues[idx] : minValues[0];
                                const currentMaxValue = maxValues[idx] !== undefined ? maxValues[idx] : maxValues[0];

                                // 收集每个输入框的错误信息（对象格式，key 为数组索引）
                                const errors = {};

                                // 校验每个输入框的值
                                for (let arrayIndex = 0; arrayIndex < rangeValue.length; arrayIndex++) {
                                    const item = rangeValue[arrayIndex];
                                    const currentValue = item?.value;

                                    // 获取标签名称（优先使用 label，如果没有则使用默认格式）
                                    const label = item?.label || `第${arrayIndex + 1}项`;

                                    // 如果当前输入框的值为空，必须输入
                                    if (currentValue === undefined || currentValue === null || currentValue === '') {
                                        errors[arrayIndex] = `${label}不能为空`;
                                        hasError = true;
                                        continue;
                                    }

                                    // 只允许输入数字
                                    const numValue = Number(currentValue);
                                    if (isNaN(numValue)) {
                                        errors[arrayIndex] = `${label}必须是数字`;
                                        hasError = true;
                                        continue;
                                    }

                                    // 范围校验
                                    if (
                                        currentMinValue !== undefined &&
                                        currentMinValue !== null &&
                                        currentMinValue !== ''
                                    ) {
                                        const minNum = Number(currentMinValue);
                                        if (!isNaN(minNum) && numValue < minNum) {
                                            errors[arrayIndex] = `${label}不能小于 ${currentMinValue}`;
                                            hasError = true;
                                            continue;
                                        }
                                    }

                                    if (
                                        currentMaxValue !== undefined &&
                                        currentMaxValue !== null &&
                                        currentMaxValue !== ''
                                    ) {
                                        if (currentMaxValue === '99999999' || currentMaxValue === 99999999) {
                                            continue;
                                        }
                                        const maxNum = Number(currentMaxValue);
                                        if (!isNaN(maxNum) && numValue > maxNum) {
                                            errors[arrayIndex] = `${label}不能大于 ${currentMaxValue}`;
                                            hasError = true;
                                            continue;
                                        }
                                    }
                                }

                                // 如果有错误，存储到 allErrors 中（嵌套结构：{rangeIndex: {arrayIndex: '错误'}}）
                                if (Object.keys(errors).length > 0) {
                                    allErrors[idx] = errors;
                                }
                            } else {
                                // text 类型的校验
                                if (rangeValue === undefined || rangeValue === null || rangeValue === '') {
                                    allErrors[idx] = '费率不能为空';
                                    hasError = true;
                                    continue;
                                }

                                // 只允许输入数字
                                const numValue = Number(rangeValue);
                                if (isNaN(numValue)) {
                                    allErrors[idx] = '费率必须是数字';
                                    hasError = true;
                                    continue;
                                }

                                // 获取范围限制
                                const minValues = Array.isArray(row?.leftRangeDp)
                                    ? row.leftRangeDp
                                    : [row?.leftRangeDp];
                                const maxValues = Array.isArray(row?.rightRangeDp)
                                    ? row.rightRangeDp
                                    : [row?.rightRangeDp];
                                const currentMinValue = minValues[idx] !== undefined ? minValues[idx] : minValues[0];
                                const currentMaxValue = maxValues[idx] !== undefined ? maxValues[idx] : maxValues[0];

                                // 范围校验
                                if (
                                    currentMinValue !== undefined &&
                                    currentMinValue !== null &&
                                    currentMinValue !== ''
                                ) {
                                    const minNum = Number(currentMinValue);
                                    if (!isNaN(minNum) && numValue < minNum) {
                                        allErrors[idx] = `费率不能小于 ${currentMinValue}`;
                                        hasError = true;
                                        continue;
                                    }
                                }

                                if (
                                    currentMaxValue !== undefined &&
                                    currentMaxValue !== null &&
                                    currentMaxValue !== ''
                                ) {
                                    if (currentMaxValue === '99999999' || currentMaxValue === 99999999) {
                                        continue;
                                    }
                                    const maxNum = Number(currentMaxValue);
                                    if (!isNaN(maxNum) && numValue > maxNum) {
                                        allErrors[idx] = `费率不能大于 ${currentMaxValue}`;
                                        hasError = true;
                                        continue;
                                    }
                                }
                            }
                        }

                        // 如果有错误，返回错误对象
                        if (hasError) {
                            const error = new Error('validation failed');
                            error.errors = allErrors;
                            callback(error);
                            return;
                        }

                        callback();
                        return;
                    }

                    // 实时校验：根据 rangeIndex 判断类型
                    let priorityValue;
                    if (Array.isArray(row?.priority)) {
                        priorityValue = row.priority[rangeIndex !== undefined ? rangeIndex : 0];
                    } else {
                        priorityValue = row?.priority;
                    }
                    const isTextArray = priorityValue === 'low';

                    if (isTextArray) {
                        // textArray 类型的校验
                        // 对于 textArray 类型，value 是对象数组格式：[{label, value, suffix}, ...]
                        if (!Array.isArray(value) || value.length === 0) {
                            callback(new Error('费率不能为空'));
                            return;
                        }

                        // 获取范围限制（使用现有的 leftRangeDp 和 rightRangeDp）
                        // 对于 rangeColumn，当 rangeIndex 是 undefined 时（整体校验），使用第一个 rangeIndex
                        const effectiveRangeIndex = rangeIndex !== undefined ? rangeIndex : 0;
                        const minValues = Array.isArray(row?.leftRangeDp) ? row.leftRangeDp : [row?.leftRangeDp];
                        const maxValues = Array.isArray(row?.rightRangeDp) ? row.rightRangeDp : [row?.rightRangeDp];
                        const currentMinValue =
                            minValues[effectiveRangeIndex] !== undefined
                                ? minValues[effectiveRangeIndex]
                                : minValues[0];
                        const currentMaxValue =
                            maxValues[effectiveRangeIndex] !== undefined
                                ? maxValues[effectiveRangeIndex]
                                : maxValues[0];

                        // 收集每个输入框的错误信息（对象格式，key 为数组索引）
                        const errors = {};

                        // 校验每个输入框的值
                        for (let arrayIndex = 0; arrayIndex < value.length; arrayIndex++) {
                            const item = value[arrayIndex];
                            const currentValue = item?.value;

                            // 获取标签名称（优先使用 label，如果没有则使用默认格式）
                            const label = item?.label || `第${arrayIndex + 1}项`;

                            // 如果当前输入框的值为空，必须输入
                            if (currentValue === undefined || currentValue === null || currentValue === '') {
                                errors[arrayIndex] = `${label}不能为空`;
                                continue;
                            }

                            // 只允许输入数字
                            const numValue = Number(currentValue);
                            if (isNaN(numValue)) {
                                errors[arrayIndex] = `${label}必须是数字`;
                                continue;
                            }

                            // 范围校验（使用 leftRangeDp 和 rightRangeDp）
                            if (currentMinValue !== undefined && currentMinValue !== null && currentMinValue !== '') {
                                const minNum = Number(currentMinValue);
                                if (!isNaN(minNum) && numValue < minNum) {
                                    errors[arrayIndex] = `${label}不能小于 ${currentMinValue}`;
                                    continue;
                                }
                            }

                            if (currentMaxValue !== undefined && currentMaxValue !== null && currentMaxValue !== '') {
                                // 如果最大值是 "99999999"，允许任何值
                                if (currentMaxValue === '99999999' || currentMaxValue === 99999999) {
                                    continue;
                                }
                                const maxNum = Number(currentMaxValue);
                                if (!isNaN(maxNum) && numValue > maxNum) {
                                    errors[arrayIndex] = `${label}不能大于 ${currentMaxValue}`;
                                    continue;
                                }
                            }
                        }

                        // 如果有错误，返回错误对象（通过 Error 对象传递对象格式的错误信息）
                        if (Object.keys(errors).length > 0) {
                            const error = new Error('textArray validation failed');
                            error.errors = errors;
                            callback(error);
                            return;
                        }

                        callback();
                    } else {
                        // text 类型的校验
                        // 如果值为空，必须输入
                        if (value === undefined || value === null || value === '') {
                            callback(new Error('费率不能为空'));
                            return;
                        }

                        // 只允许输入数字
                        const numValue = Number(value);
                        if (isNaN(numValue)) {
                            callback(new Error('费率必须是数字'));
                            return;
                        }

                        // 获取范围限制（使用现有的 leftRangeDp 和 rightRangeDp）
                        const minValues = Array.isArray(row?.leftRangeDp) ? row.leftRangeDp : [row?.leftRangeDp];
                        const maxValues = Array.isArray(row?.rightRangeDp) ? row.rightRangeDp : [row?.rightRangeDp];
                        const currentMinValue =
                            minValues[rangeIndex] !== undefined ? minValues[rangeIndex] : minValues[0];
                        const currentMaxValue =
                            maxValues[rangeIndex] !== undefined ? maxValues[rangeIndex] : maxValues[0];

                        // 范围校验
                        if (currentMinValue !== undefined && currentMinValue !== null && currentMinValue !== '') {
                            const minNum = Number(currentMinValue);
                            if (!isNaN(minNum) && numValue < minNum) {
                                callback(new Error(`费率不能小于 ${currentMinValue}`));
                                return;
                            }
                        }

                        if (currentMaxValue !== undefined && currentMaxValue !== null && currentMaxValue !== '') {
                            // 如果最大值是 "99999999"，允许任何值
                            if (currentMaxValue === '99999999' || currentMaxValue === 99999999) {
                                callback();
                                return;
                            }
                            const maxNum = Number(currentMaxValue);
                            if (!isNaN(maxNum) && numValue > maxNum) {
                                callback(new Error(`费率不能大于 ${currentMaxValue}`));
                                return;
                            }
                        }

                        callback();
                    }
                },
                trigger: 'change',
            },
        ],
    },
    {
        prop: 'age',
        label: '年龄',
        width: 100,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请输入年龄',
        },
    },
    {
        prop: 'email',
        label: '邮箱',
        minWidth: 200,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请输入邮箱',
        },
        rules: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
        ],
    },
    {
        prop: 'category',
        label: '性别',
        width: 120,
        align: 'center',
        valueType: 'select',
        hideInSearch: true,
        valueEnum: {
            male: '男',
            female: '女',
        },
        fieldProps: {
            options: [
                { label: '男', value: 'male' },
                { label: '女', value: 'female' },
            ],
            placeholder: '请选择性别',
        },
    },
    {
        prop: 'singleTicketLadder',
        label: '单票阶梯模式',
        width: 150,
        align: 'center',
        valueType: 'text',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请输入单票阶梯模式（有值时最多可添加5个范围项，无值时只能添加1个）',
        },
    },
    {
        prop: 'birthDate',
        label: '出生日期',
        width: 140,
        align: 'center',
        valueType: 'date',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请选择出生日期',
        },
    },
    {
        prop: 'createTime',
        label: '创建时间',
        width: 180,
        align: 'center',
        valueType: 'dateTime',
        hideInSearch: true,
        fieldProps: {
            placeholder: '请选择创建时间',
        },
    },
    {
        prop: 'action',
        label: '操作',
        width: 100,
        align: 'center',
        fixed: 'right',
        hideInSearch: true,
        slots: {
            default: 'action',
        },
    },
]);

// 表格数据 - 初始化为空数组，可通过 handleAdd 动态添加行
const tableData = ref([]);

// 处理添加
const handleAdd = () => {
    // 生成随机 ID（使用时间戳 + 随机数确保唯一性）
    const newId = Date.now() + Math.floor(Math.random() * 1000000);
    const newRow = {
        id: newId,
        name: '',
        age: '',
        email: '',
        birthDate: '',
        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
        singleTicketLadder: '', // 默认无值，只能添加1个范围项
        leftRangeDp: 0, // 默认最小值
        rightRangeDp: '99999999', // 默认最大值
        valueInput: '', // 值输入1
        // 费率相关字段默认值
        unitDescription: '元/票',
        feeRate: [''], // 费率（范围列）
    };
    tableData.value.push(newRow);
    ElMessage.success('已添加新行');
    console.log('添加新行:', newRow);
};

// 处理删除
const handleDelete = (row, index) => {
    tableData.value.splice(index, 1);
    ElMessage.success(`已删除: ${row.name || '未命名'}`);
    console.log('删除行:', row, '索引:', index);
};

// 处理添加范围项后的自动填充逻辑
const handleAfterAddRange = ({ rowIndex, actualMinProp, actualMaxProp, row, editingData }) => {
    // 获取前一段的最大值（最后一个有效值）
    // 重要：必须从 actualMaxProp（最大值列）获取值，不是 actualMinProp
    // 注意：回调是在添加新项之后调用的，所以 editingData[actualMaxProp] 已经包含了新添加的空值
    // 例如：原来 [100, 200]，添加后变成 [100, 200, '']，我们需要取倒数第二个值（200）
    let lastMaxValueBeforeAdd = undefined;

    // 优先从 editingData 获取（已经添加了新项）
    let maxValueArray = editingData[actualMaxProp];
    if (Array.isArray(maxValueArray) && maxValueArray.length > 1) {
        // 如果数组长度大于1，取倒数第二个值（最后一个有效值，因为最后一个值是新添加的空值）
        lastMaxValueBeforeAdd = maxValueArray[maxValueArray.length - 2];
    } else {
        // 如果 editingData 中没有值或只有1个值（新添加的空值），从 row 获取
        const rowMaxValue = row[actualMaxProp];
        if (Array.isArray(rowMaxValue) && rowMaxValue.length > 0) {
            // 如果是数组，取最后一个值
            lastMaxValueBeforeAdd = rowMaxValue[rowMaxValue.length - 1];
        } else if (rowMaxValue !== undefined && rowMaxValue !== null && rowMaxValue !== '') {
            // 如果是单个值，直接使用
            lastMaxValueBeforeAdd = rowMaxValue;
        }
    }

    // 如果第一段的最大值存在且不是"99999999"，则自动填充到第二段的最小值
    if (
        lastMaxValueBeforeAdd !== undefined &&
        lastMaxValueBeforeAdd !== null &&
        lastMaxValueBeforeAdd !== '' &&
        lastMaxValueBeforeAdd !== '99999999' &&
        lastMaxValueBeforeAdd !== 99999999
    ) {
        // 获取 actualMinProp（最小值列）的数组（已经添加了新项）
        const newMinValues = editingData[actualMinProp];
        // 将第一段的最大值填充到第二段的最小值（最后一个位置）
        if (Array.isArray(newMinValues) && newMinValues.length > 0) {
            const newMinIndex = newMinValues.length - 1;
            // 只在新项为空时才填充
            if (
                newMinValues[newMinIndex] === '' ||
                newMinValues[newMinIndex] === undefined ||
                newMinValues[newMinIndex] === null
            ) {
                // 创建新数组并更新最后一个元素（填充到 actualMinProp，不是 actualMaxProp）
                const updatedMinValues = [...newMinValues];
                updatedMinValues[newMinIndex] = lastMaxValueBeforeAdd;
                editingData[actualMinProp] = updatedMinValues;
            }
        }
    }
};

// 处理更新
const handleUpdate = (updatedRow, index) => {
    // 检查索引是否有效
    if (index < 0 || index >= tableData.value.length) {
        console.warn('更新索引超出范围:', { index, total: tableData.value.length });
        return;
    }

    // 更新数据
    tableData.value[index] = { ...updatedRow };
    ElMessage.success(`已更新: ${updatedRow.name || '未命名'}`);
    console.log('更新行:', updatedRow, '索引:', index);
    console.log('当前表格数据:', tableData.value);
};

// 切换只读状态
const toggleReadonly = () => {
    readonly.value = !readonly.value;
    ElMessage.success(readonly.value ? '已设置为只读模式' : '已取消只读模式');
};

// 获取范围项数量（用于费率输入）
const getRangeItemsForFeeRate = row => {
    // 根据 leftRangeDp 或 rightRangeDp 数组长度确定范围项数量
    const minValues = row?.leftRangeDp ? (Array.isArray(row.leftRangeDp) ? row.leftRangeDp : [row.leftRangeDp]) : [];
    const maxValues = row?.rightRangeDp
        ? Array.isArray(row.rightRangeDp)
            ? row.rightRangeDp
            : [row.rightRangeDp]
        : [];
    const rangeCount = Math.max(minValues.length, maxValues.length, 1);

    // 获取当前行的 feeRate 值（应该是数组）
    let currentValues = row?.feeRate;
    if (!currentValues) {
        currentValues = [];
    } else if (!Array.isArray(currentValues)) {
        // 如果是单个值，转换为数组
        currentValues = [currentValues];
    }

    // 确保数组长度与范围项数量一致
    while (currentValues.length < rangeCount) {
        currentValues.push('');
    }
    // 如果超出范围项数量，截取
    currentValues = currentValues.slice(0, rangeCount);

    // 为每个范围项生成一个输入框
    return Array.from({ length: rangeCount }, (_, rangeIndex) => {
        return {
            rangeIndex,
            value: currentValues[rangeIndex] || '',
            placeholder: `请输入费率（第${rangeIndex + 1}段）`,
        };
    });
};

// 处理费率输入框的值变化
const handleFeeRateChange = (row, prop, rangeIndex, value, rowIndex) => {
    handleFeeRateBlur(row, prop, rangeIndex, value, rowIndex);
};

// 处理费率输入框失焦事件
const handleFeeRateBlur = (row, prop, rangeIndex, value, rowIndex) => {
    // 获取当前行的 feeRate 值（应该是数组）
    let currentValue = row[prop];
    let newValue;

    // 获取范围项数量
    const minValues = row?.leftRangeDp ? (Array.isArray(row.leftRangeDp) ? row.leftRangeDp : [row.leftRangeDp]) : [];
    const maxValues = row?.rightRangeDp
        ? Array.isArray(row.rightRangeDp)
            ? row.rightRangeDp
            : [row.rightRangeDp]
        : [];
    const rangeCount = Math.max(minValues.length, maxValues.length, 1);

    // 初始化或转换 currentValue 为数组
    if (!currentValue) {
        newValue = Array(rangeCount).fill('');
    } else if (!Array.isArray(currentValue)) {
        // 如果是单个值，转换为数组
        newValue = Array(rangeCount).fill('');
        newValue[0] = currentValue || '';
    } else {
        // 已经是数组，复制一份
        newValue = [...currentValue];
    }

    // 确保数组长度与范围项数量一致
    while (newValue.length < rangeCount) {
        newValue.push('');
    }
    // 如果超出范围项数量，截取
    newValue = newValue.slice(0, rangeCount);

    // 更新对应位置的值
    if (newValue[rangeIndex] !== undefined) {
        newValue[rangeIndex] = value;
    }

    // 更新 row 数据（使用响应式方式）
    if (rowIndex >= 0 && tableData.value[rowIndex]) {
        // 更新表格数据
        tableData.value[rowIndex] = {
            ...tableData.value[rowIndex],
            [prop]: newValue,
        };
        // 同时更新 row 对象，确保视图更新
        row[prop] = newValue;
        // 触发更新事件
        handleUpdate(tableData.value[rowIndex], rowIndex);
    } else {
        // 如果 rowIndex 无效，直接更新 row
        row[prop] = newValue;
    }
};

// 处理校验
const handleValidate = async () => {
    if (!tableRef.value) {
        ElMessage.warning('表格引用不存在');
        return;
    }

    try {
        console.log('开始校验，当前表格数据:', tableData.value);

        // 校验所有数据
        const result = await tableRef.value.validate();
        console.log('校验结果', result);

        if (result === true) {
            ElMessage.success('校验通过！');
            console.log('校验结果: 通过');
        } else {
            // 如果校验失败，result 应该是错误数组
            const errors = Array.isArray(result) ? result : [result];
            ElMessage.warning(`校验未通过，共发现 ${errors.length} 个错误`);
            console.log('校验未通过，错误列表:', errors);
            // 为每个错误单独显示消息
            errors.forEach(err => {
                if (err && err.message) {
                    const rowInfo = err.row !== undefined ? `第${err.row + 1}行` : '';
                    ElMessage.error(`${rowInfo} ${err.label || err.column}: ${err.message}`);
                }
            });
        }
    } catch (error) {
        console.error('校验错误:', error);
        // 如果 error 是数组（validation errors），为每个错误单独显示消息
        if (Array.isArray(error) && error.length > 0) {
            // 为每个错误单独显示消息，不合并
            error.forEach(err => {
                if (err && err.message) {
                    ElMessage.error(err.message);
                }
            });
        } else {
            ElMessage.error('校验失败：' + (error?.message || '请检查表单数据'));
        }
    }
};

// 获取表格所有数据
const handleGetAllData = () => {
    if (!tableRef.value) {
        ElMessage.warning('表格引用不存在');
        return;
    }

    // 获取当前表格的所有数据
    const allData = tableData.value;
    console.log('表格所有数据:', allData);
    console.log('数据总数:', allData.length);

    // 将数据转换为 JSON 字符串并显示
    const dataJson = JSON.stringify(allData, null, 2);
    console.log('表格数据（JSON格式）:', dataJson);

    ElMessage.success(`已获取表格数据，共 ${allData.length} 条，请查看控制台`);

    // 可选：如果需要复制到剪贴板，可以添加复制功能
    // navigator.clipboard.writeText(dataJson).then(() => {
    //     ElMessage.success('数据已复制到剪贴板');
    // });
};

// 生成假数据
const generateMockData = () => {
    const mockData = [];
    const names = ['张三xxxxxxx', '李四', '王五', '赵六', '钱七'];
    const emails = [
        'zhangsan@example.com',
        'lisi@example.com',
        'wangwu@example.com',
        'zhaoliu@example.com',
        'qianqi@example.com',
    ];
    const categories = ['male', 'female'];
    const priorities = ['low', 'medium', 'high', 'urgent'];

    // 生成50条假数据
    for (let i = 0; i < 1; i++) {
        const id = i + 1;
        // 每5条数据中有1条有多个范围项
        const hasMultiRange = i % 5 === 1;
        const singleTicketLadder = hasMultiRange ? '阶梯模式' : '';
        const rangeCount = hasMultiRange ? 3 : 1; // 多范围项时生成3个

        // 生成范围值数组
        const minValues = [];
        const maxValues = [];
        const valueInputs = [];
        const priorityValues = [];
        const feeRates = [];

        for (let j = 0; j < rangeCount; j++) {
            const baseMin = j === 0 ? 0 : j * 1000;
            const baseMax =
                j === 0 ? (rangeCount === 1 ? 99999999 : 999) : j === rangeCount - 1 ? 99999999 : (j + 1) * 1000 - 1;

            minValues.push(baseMin);
            maxValues.push(baseMax === 99999999 ? '99999999' : baseMax);
            valueInputs.push(`值${j + 1}`);
            priorityValues.push(priorities[j % priorities.length]);
            feeRates.push(String(10 + j * 5)); // 费率值
        }

        // 生成出生日期（20-60岁之间）
        const age = 20 + Math.floor(Math.random() * 40);
        const birthYear = new Date().getFullYear() - age;
        const birthMonth = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
        const birthDay = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
        const birthDate = `${birthYear}-${birthMonth}-${birthDay}`;

        // 生成创建时间（最近30天内）
        const createTime = new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000);
        const createTimeStr = createTime.toISOString().slice(0, 19).replace('T', ' ');

        // 生成 unitDescription（可能是数组）
        // 为了测试 warningTooltip，在 textArray 模式下生成不同的 warningTooltip 内容
        let unitDescription;
        if (hasMultiRange) {
            // 多范围项时，根据 priority 是否为 'low' 来决定是否为数组格式
            unitDescription = Array(rangeCount)
                .fill(null)
                .map((_, j) => {
                    const priority = priorityValues[j];
                    // 如果优先级是 'low'（textArray 模式），为每个输入框生成不同的 warningTooltip
                    if (priority === 'low') {
                        const tooltips = ['预约排队费率说明', '开箱点数费率说明', '上架费率说明', '清货费率说明'];
                        return tooltips[j % tooltips.length] || '元/票';
                    }
                    return '元/票';
                });
        } else {
            // 单范围项时
            const priority = priorityValues[0];
            if (priority === 'low') {
                // textArray 模式，生成数组格式的 warningTooltip
                unitDescription = ['预约排队费率说明', '开箱点数费率说明', '上架费率说明', '清货费率说明'];
            } else {
                unitDescription = '元/票';
            }
        }

        const row = {
            id,
            name: names[i],
            age: String(age),
            email: emails[i],
            category: categories[i % categories.length],
            birthDate,
            createTime: createTimeStr,
            singleTicketLadder,
            leftRangeDp: rangeCount === 1 ? minValues[0] : minValues,
            rightRangeDp: rangeCount === 1 ? maxValues[0] : maxValues,
            valueInput: rangeCount === 1 ? valueInputs[0] : valueInputs,
            priority: rangeCount === 1 ? priorityValues[0] : priorityValues,
            feeRate: rangeCount === 1 ? [feeRates[0]] : feeRates,
            unitDescription,
        };

        mockData.push(row);
    }

    return mockData;
};

onMounted(() => {
    console.log('ProTable 编辑示例已加载');
    // 自动填充假数据
    const mockData = generateMockData();
    tableData.value = mockData;
    console.log('已自动填充假数据:', mockData);
    ElMessage.success('已自动填充示例数据');
});
</script>

<style scoped lang="less">
.pro-table-editable-example {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .table-actions {
        margin-bottom: 15px;
    }

    /* 空数据时移除固定高度，避免滚动 */
    /* 使用属性选择器匹配包含 height: 100px 的表格 */
    :deep(.el-table[style*='height: 100px']),
    :deep(.el-table[style*='height:100px']) {
        /* 限制滚动条容器 */
        .el-scrollbar {
            height: auto !important;
            max-height: 100px !important;
            overflow: hidden !important;
        }

        /* 限制滚动视图 */
        .el-scrollbar__view {
            height: auto !important;
            max-height: 100px !important;
        }

        /* 限制滚动包装器 */
        .el-scrollbar__wrap {
            height: auto !important;
            max-height: 100px !important;
            overflow: hidden !important;
        }

        /* 限制表格体包装器 */
        .el-table__body-wrapper {
            height: auto !important;
            max-height: 100px !important;
            overflow: hidden !important;
        }

        /* 移除空数据块的固定高度 */
        .el-table__empty-block {
            height: auto !important;
            min-height: auto !important;
            max-height: 100px !important;
        }

        /* 空数据文本 */
        .el-table__empty-text {
            height: auto !important;
        }
    }

    /* 通用规则：所有包含 height 属性的空数据块 */
    :deep(.el-table__empty-block[style*='height']) {
        height: auto !important;
        min-height: auto !important;
        max-height: 100px !important;
    }

    /* 只读状态下，范围列内容居中显示 */
    &.is-readonly :deep(.el-table td .el-table__cell .cell:has(.pro-table-range-item)) {
        align-items: center !important;
    }

    /* 只读状态下，范围项内容居中 */
    &.is-readonly :deep(.pro-table-range-item) {
        justify-content: center !important;
    }

    /* 只读状态下，所有单元格的内容居中显示 */
    &.is-readonly {
        :deep(.el-table td .el-table__cell) {
            text-align: center !important;

            .cell {
                text-align: center !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
            }

            /* 直接针对 el-form-item__content 下的所有元素 */
            .el-form-item__content {
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;

                > span,
                :deep(> span) {
                    display: block !important;
                    width: 100% !important;
                    flex: 1 1 100% !important;
                    max-width: 100% !important;
                    text-align: center !important;
                }

                span[data-v-bbbcd1ac],
                :deep(span[data-v-bbbcd1ac]) {
                    display: block !important;
                    width: 100% !important;
                    flex: 1 1 100% !important;
                    max-width: 100% !important;
                    text-align: center !important;
                }
            }

            /* 普通列的包装器居中 */
            .pro-table-cell-wrapper {
                align-items: center !important;
                width: 100% !important;
                justify-content: center !important;
            }

            /* 单元格行内容居中 */
            .pro-table-cell-row {
                justify-content: center !important;
                align-items: center !important;
                width: 100% !important;
                display: flex !important;
            }

            /* form-item 内容居中 */
            .pro-table-form-item {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                flex: 1 !important; /* 只读模式下占满宽度 */
                width: 100% !important;
                margin: 0 !important;

                .el-form-item__content {
                    text-align: center !important;
                    display: flex !important;
                    justify-content: center !important;
                    align-items: center !important;
                    width: 100% !important; /* 占满100%宽度 */
                    margin-left: 0 !important;
                    flex: 1 !important;

                    /* 确保所有子元素居中并占满宽度 */
                    > * {
                        text-align: center !important;
                        width: 100% !important;
                        flex: 1 !important;
                    }

                    /* span 元素占满宽度并居中 - 使用 :deep() 穿透作用域样式 */
                    span,
                    :deep(span) {
                        text-align: center !important;
                        display: block !important;
                        width: 100% !important;
                        flex: 1 1 100% !important;
                        max-width: 100% !important;
                    }

                    /* 确保所有带 data-v- 属性的 span 也占满 */
                    span[data-v-bbbcd1ac],
                    :deep(span[data-v-bbbcd1ac]) {
                        text-align: center !important;
                        display: block !important;
                        width: 100% !important;
                        flex: 1 1 100% !important;
                        max-width: 100% !important;
                    }
                }
            }

            /* pro-field 组件及其内部元素居中 */
            .pro-field,
            :deep(.pro-field) {
                text-align: center !important;
                display: inline-flex !important;
                justify-content: center !important;
                align-items: center !important;
                width: auto !important;

                > * {
                    text-align: center !important;
                }

                span {
                    text-align: center !important;
                    display: inline-block !important;
                    width: auto !important;
                }
            }
        }

        /* 针对 el-table 的 align 属性，确保单元格对齐 */
        :deep(.el-table__cell) {
            text-align: center !important;
        }
    }
}

/* 范围项分隔线样式（用于费率输入等） */
.range-group-divider {
    height: 1px;
    background-color: var(--el-border-color, #dcdfe6);
    margin: 12px 0;
    width: 100%;
}

/* 自定义费率输入框样式 */
.custom-fee-rate-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 4px 0;
}

.fee-rate-item {
    display: flex;
    width: 100%;
    margin-bottom: 8px;

    &:last-child {
        margin-bottom: 0;
    }

    .fee-rate-input {
        flex: 1;
        width: 100%;

        :deep(.el-input__wrapper) {
            border-radius: 4px;
        }
    }
}

/* 只读模式下的样式 */
.pro-table-editable-example.is-readonly {
    .fee-rate-item {
        .fee-rate-input {
            :deep(.el-input__wrapper) {
                background-color: transparent;
                border: none;
                box-shadow: none;
            }

            :deep(.el-input__inner) {
                text-align: center;
                color: var(--el-text-color-primary, #303133);
            }
        }
    }
}
</style>
