<template>
    <div class="pro-dialog-example">
        <el-card class="example-card">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 基础对话框 -->
                <el-tab-pane label="基础对话框" name="basic">
                    <div class="dialog-section">
                        <h3>基础对话框示例</h3>
                        <el-button type="primary" @click="basicDialogVisible = true">打开基础对话框</el-button>

                        <pro-dialog v-model="basicDialogVisible" draggable title="基础对话框" width="500px">
                            <p>这是一个基础对话框示例。</p>
                            <p>你可以在这里放置任何内容。</p>
                            <template #footer>
                                <el-button @click="basicDialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="handleBasicConfirm">确定</el-button>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="边框缩放" name="resizable">
                    <div class="dialog-section">
                        <h3>边框拖拽缩放</h3>
                        <p class="dialog-hint">拖动对话框四边或四角边框可调整宽高（含上、左、左上角等）。</p>
                        <el-button type="primary" @click="resizableDialogVisible = true">打开可缩放对话框</el-button>

                        <pro-dialog
                            v-model="resizableDialogVisible"
                            title="可缩放对话框"
                            width="720px"
                            resizable
                            draggable
                            :resize-min-width="480"
                            :resize-min-height="320"
                        >
                            <template #body-content>
                                <div style="min-height: 200px">
                                    <p>开启 <code>resizable</code> 后，可通过边框拖拽放大或缩小弹窗。</p>
                                    <p>可与 <code>draggable</code> 同时使用。</p>
                                </div>
                            </template>
                            <template #footer>
                                <el-button @click="resizableDialogVisible = false">关闭</el-button>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 表单对话框 -->
                <el-tab-pane label="表单对话框" name="form">
                    <div class="dialog-section">
                        <h3>表单对话框示例</h3>
                        <el-button type="primary" @click="formDialogVisible = true">打开表单对话框</el-button>

                        <pro-dialog
                            v-model="formDialogVisible"
                            title="用户信息"
                            width="600px"
                            :close-on-click-modal="false"
                            @closed="handleFormDialogClosed"
                        >
                            <pro-form
                                ref="dialogFormRef"
                                :columns="dialogFormColumns"
                                :initial-values="dialogFormValues"
                                :rules="dialogFormRules"
                                :label-width="'100px'"
                                :cols="1"
                            >
                            </pro-form>
                            <template #footer>
                                <div class="dialog-form-actions">
                                    <el-button @click="formDialogVisible = false">取消</el-button>
                                    <el-button type="primary" @click="handleFormSubmit(dialogFormRef)">确定</el-button>
                                </div>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 自定义内容对话框 -->
                <el-tab-pane label="自定义内容" name="custom">
                    <div class="dialog-section">
                        <h3>自定义内容对话框示例</h3>
                        <el-button type="primary" @click="customDialogVisible = true">打开自定义对话框</el-button>

                        <pro-dialog
                            v-model="customDialogVisible"
                            title="自定义内容"
                            width="800px"
                            :show-close="true"
                            :close-on-click-modal="true"
                            :close-on-press-escape="true"
                        >
                            <template #body-content>
                                <div class="custom-dialog-content">
                                    <el-descriptions title="用户信息" :column="2" border>
                                        <el-descriptions-item label="用户名">张三</el-descriptions-item>
                                        <el-descriptions-item label="手机号">13800138000</el-descriptions-item>
                                        <el-descriptions-item label="居住地">北京市</el-descriptions-item>
                                        <el-descriptions-item label="备注">
                                            <el-tag size="small">学校</el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item label="联系地址"
                                            >北京市朝阳区xxx街道</el-descriptions-item
                                        >
                                    </el-descriptions>

                                    <div style="margin-top: 20px">
                                        <h4>操作记录</h4>
                                        <el-timeline>
                                            <el-timeline-item timestamp="2024-01-01 10:00" placement="top">
                                                <el-card>
                                                    <h4>创建用户</h4>
                                                    <p>系统管理员创建了该用户</p>
                                                </el-card>
                                            </el-timeline-item>
                                            <el-timeline-item timestamp="2024-01-02 14:00" placement="top">
                                                <el-card>
                                                    <h4>更新信息</h4>
                                                    <p>用户更新了个人信息</p>
                                                </el-card>
                                            </el-timeline-item>
                                        </el-timeline>
                                    </div>
                                </div>
                            </template>
                            <template #footer>
                                <el-button @click="customDialogVisible = false">关闭</el-button>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 自定义标题对话框 -->
                <el-tab-pane label="自定义标题" name="custom-title">
                    <div class="dialog-section">
                        <h3>自定义标题对话框示例</h3>
                        <el-button type="primary" @click="customTitleDialogVisible = true"
                            >打开自定义标题对话框</el-button
                        >

                        <pro-dialog
                            v-model="customTitleDialogVisible"
                            :show-close="false"
                            :close-on-click-modal="false"
                            :fixed-header-content="true"
                            width="600px"
                        >
                            <template #title>
                                <div style="display: flex; align-items: center; gap: 8px">
                                    <el-icon style="color: var(--el-color-warning, #e6a23c)">
                                        <component :is="WarningIcon" />
                                    </el-icon>
                                    <span>重要提示</span>
                                    <el-tag type="warning" size="small">新</el-tag>
                                </div>
                            </template>
                            <template #header-content>
                                <div class="custom-title-dialog-header">
                                    <p>
                                        这是上部分内容区域，可以通过 <code>fixed-header-content</code> 属性设置为固定。
                                    </p>
                                </div>
                            </template>
                            <template #body-content>
                                <div class="custom-title-dialog-content">
                                    <p>这是一个使用自定义标题的对话框示例。</p>
                                    <p>你可以通过 <code>#title</code> slot 来自定义标题内容，包括图标、标签等元素。</p>
                                    <p>如果不使用 title slot，则会显示默认的 title 属性值。</p>
                                    <p>这是下部分内容区域，使用 el-scrollbar 包装，支持滚动。</p>
                                    <p v-for="i in 20" :key="i">这是第 {{ i }} 行内容，用于测试滚动功能。</p>
                                </div>
                            </template>
                            <template #footer>
                                <el-button @click="customTitleDialogVisible = false">我知道了</el-button>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 编辑表格校验示例 -->
                <el-tab-pane label="编辑表格校验" name="editable-table-validation">
                    <div class="dialog-section">
                        <h3>编辑表格校验示例</h3>
                        <p style="margin-bottom: 20px; color: var(--el-text-color-regular, #606266)">
                            此示例展示可编辑表格的验证功能。表格中包含一些不符合验证规则的数据，点击"确定"按钮时会触发验证，错误信息会显示在对应字段下方。
                        </p>
                        <el-button type="primary" @click="validationTableDialogVisible = true"
                            >打开编辑表格校验对话框</el-button
                        >

                        <pro-dialog
                            v-model="validationTableDialogVisible"
                            title="编辑表格校验示例"
                            width="1200px"
                            :close-on-click-modal="false"
                            class="editable-table-dialog"
                            @closed="handleValidationTableDialogClosed"
                        >
                            <template #body-content>
                                <div ref="tableGroupsContainerRef" class="table-groups-container">
                                    <el-card
                                        v-for="(group, groupIndex) in validationTableGroups"
                                        :key="group.id"
                                        v-model:collapsed="group.collapsed"
                                        collapsible
                                        class="table-group-card"
                                        shadow="hover"
                                    >
                                        <template #header>
                                            <div class="table-group-header">
                                                <div class="table-group-header-left">
                                                    <span class="table-group-title">表格组 {{ groupIndex + 1 }}</span>
                                                </div>
                                                <div class="table-group-header-right">
                                                    <el-button
                                                        v-if="validationTableGroups.length > 1"
                                                        type="danger"
                                                        size="small"
                                                        text
                                                        @click.stop="handleTableGroupDelete(groupIndex)"
                                                    >
                                                        <el-icon><Delete /></el-icon>
                                                        删除表格组
                                                    </el-button>
                                                </div>
                                            </div>
                                        </template>
                                        <pro-table
                                            :ref="el => setTableRef(el, groupIndex)"
                                            :data-source="group.data"
                                            :columns="validationTableColumns"
                                            :show-toolbar="false"
                                            :show-header="false"
                                            :fixed-table="false"
                                            :editable="true"
                                            :readonly="false"
                                            @update="
                                                (row, index) => handleValidationTableUpdate(row, index, groupIndex)
                                            "
                                        >
                                            <template #operation="{ row, index }">
                                                <el-button
                                                    type="text"
                                                    @click="handleValidationTableAdd(index, groupIndex)"
                                                >
                                                    <el-icon><Plus /></el-icon>
                                                    添加
                                                </el-button>
                                                <el-button
                                                    v-if="group.data.length > 1"
                                                    type="text"
                                                    @click="handleValidationTableDelete(row, index, groupIndex)"
                                                    >删除</el-button
                                                >
                                            </template>
                                        </pro-table>
                                    </el-card>
                                </div>
                            </template>
                            <template #footer>
                                <div class="footer-content-wrapper">
                                    <el-button
                                        class="add-table-group-btn"
                                        type="primary"
                                        text
                                        @click="handleTableGroupAdd"
                                    >
                                        <el-icon><Plus /></el-icon>
                                        添加表格组
                                    </el-button>
                                    <div class="footer-actions">
                                        <el-button @click="validationTableDialogVisible = false">取消</el-button>
                                        <el-button type="primary" @click="handleValidationTableConfirm">确定</el-button>
                                    </div>
                                </div>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 表单+表格对话框 -->
                <el-tab-pane label="表单+表格对话框" name="form-table">
                    <div class="dialog-section">
                        <h3>表单+表格对话框示例</h3>
                        <p style="margin-bottom: 20px; color: var(--el-text-color-regular, #606266)">
                            此示例展示在对话框中同时包含表单和可编辑表格的场景。顶部是表单，下方是可编辑表格，支持添加、删除行。
                        </p>
                        <el-button type="primary" @click="formTableDialogVisible = true">打开表单+表格对话框</el-button>

                        <pro-dialog
                            v-model="formTableDialogVisible"
                            :title="formTableDialogTitle"
                            width="1116px"
                            :close-on-click-modal="false"
                            body-content-height="40vh"
                            class="dialog"
                            @closed="handleFormTableDialogClosed"
                        >
                            <!-- 顶部表单 -->
                            <pro-form
                                ref="productFormRef"
                                :columns="productFormColumns"
                                :initial-values="productFormData"
                                :label-width="'110px'"
                                :cols="3"
                                class="dialog-form"
                                @values-change="handleProductFormValuesChange"
                            />

                            <div ref="productTableGroupsContainerRef" class="table-groups-container">
                                <pro-table
                                    ref="productTableRef"
                                    :data-source="productTableData"
                                    :columns="productTableColumns"
                                    :show-toolbar="false"
                                    :show-header="false"
                                    :fixed-table="false"
                                    :editable="true"
                                    :readonly="false"
                                    height="40vh"
                                    @update="handleProductTableUpdate"
                                >
                                    <template #code="{ index }">
                                        <!-- 显示序号，从1开始，不可修改 -->
                                        <span>{{ index + 1 }}</span>
                                    </template>
                                    <template #operation="{ row, index }">
                                        <el-button type="text" @click="handleProductAddRow(index)">
                                            <el-icon><Plus /></el-icon>
                                            添加
                                        </el-button>
                                        <el-button
                                            v-if="productTableData.length > 1"
                                            type="text"
                                            @click="handleProductDeleteRow(row, index)"
                                            >删除</el-button
                                        >
                                    </template>
                                </pro-table>
                            </div>

                            <template #footer>
                                <div class="footer-content-wrapper">
                                    <div class="footer-actions">
                                        <el-button @click="handleProductReset">重置</el-button>
                                        <el-button @click="handleProductCancel">取消</el-button>
                                        <el-button type="primary" @click="handleProductConfirm">确定</el-button>
                                    </div>
                                </div>
                            </template>
                        </pro-dialog>
                    </div>
                </el-tab-pane>

                <!-- 全屏对话框 -->
                <el-tab-pane label="全屏对话框" name="fullscreen">
                    <div class="dialog-section">
                        <h3>全屏对话框示例</h3>
                        <el-button type="primary" @click="fullscreenDialogVisible = true">打开全屏对话框</el-button>

                        <pro-dialog v-model="fullscreenDialogVisible" title="全屏对话框" fullscreen :show-close="true">
                            <div class="fullscreen-dialog-content">
                                <p>这是一个全屏对话框示例。</p>
                                <p>全屏对话框会占据整个屏幕。</p>
                                <el-button type="primary" @click="fullscreenDialogVisible = false">关闭</el-button>
                            </div>
                        </pro-dialog>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup>
import { ref, markRaw, nextTick, computed, onMounted } from 'vue';
import {
    ElCard,
    ElTabs,
    ElTabPane,
    ElButton,
    ElMessage,
    ElDescriptions,
    ElDescriptionsItem,
    ElTag,
    ElTimeline,
    ElTimelineItem,
    ElIcon,
    ElInput,
} from '@deppon/deppon-ui';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - icons-vue 类型定义问题
import { Delete, Warning, Plus } from '@deppon/deppon-ui/icons-vue';
import { ProDialog, ProForm, ProTable } from '@deppon/deppon-template';

const WarningIcon = markRaw(Warning);

const activeTab = ref('basic');

// 基础对话框
const basicDialogVisible = ref(false);

const handleBasicConfirm = () => {
    ElMessage.success('操作成功');
    basicDialogVisible.value = false;
};

// 可缩放对话框
const resizableDialogVisible = ref(false);

// 表单对话框
const formDialogVisible = ref(false);
const dialogFormRef = ref(null);
const dialogFormValues = ref({
    name: '',
    email: '',
    phone: '',
    address: '',
});

const dialogFormColumns = ref([
    {
        name: 'name',
        label: '姓名',
        valueType: 'text',
        required: true,
        fieldProps: {
            placeholder: '请输入姓名',
        },
    },
    {
        name: 'email',
        label: '邮箱',
        valueType: 'text',
        required: true,
        fieldProps: {
            placeholder: '请输入邮箱',
        },
    },
    {
        name: 'phone',
        label: '手机号',
        valueType: 'text',
        required: true,
        fieldProps: {
            placeholder: '请输入手机号',
        },
    },
    {
        name: 'address',
        label: '地址',
        valueType: 'textarea',
        fieldProps: {
            placeholder: '请输入地址',
            rows: 3,
        },
    },
]);

const dialogFormRules = ref({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
    ],
});

const handleFormSubmit = async form => {
    if (!form) {
        ElMessage.error('表单实例不存在');
        return;
    }
    try {
        await form.validate();
        ElMessage.success('表单验证通过');
        console.log('表单数据:', form.getFieldsValue());
        formDialogVisible.value = false;
    } catch (error) {
        ElMessage.error('表单验证失败');
    }
};

const handleFormDialogClosed = () => {
    if (dialogFormRef.value) {
        dialogFormRef.value.reset();
    }
    dialogFormValues.value = {
        name: '',
        email: '',
        phone: '',
        address: '',
    };
};

// 自定义内容对话框
const customDialogVisible = ref(false);

// 自定义标题对话框
const customTitleDialogVisible = ref(false);

// 编辑表格校验对话框
const validationTableDialogVisible = ref(false);
const validationTableRefs = ref([]);
const tableGroupsContainerRef = ref(null);
const validationTableGroups = ref([
    {
        id: 1,
        collapsed: false,
        data: [
            {
                id: 1,
                name: 'A', // 长度不符合要求（少于2个字符）
                price: 'abc', // 格式不符合要求（不是数字）
                quantity: '0', // 数量必须大于0
                total: 0,
            },
            {
                id: 2,
                name: '', // 必填字段为空
                price: '100.123', // 小数位数过多（超过2位）
                quantity: '5',
                total: 500,
            },
            {
                id: 3,
                name: '产品C',
                price: '200',
                quantity: '', // 必填字段为空
                total: '', // 格式不符合要求（空字符串会被验证）
            },
        ],
    },
]);

// 设置表格 ref
const setTableRef = (el, index) => {
    if (el) {
        validationTableRefs.value[index] = el;
    }
};

const validationTableColumns = ref([
    {
        prop: 'name',
        label: '产品名称',
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [
            { required: true, message: '请输入产品名称', trigger: 'blur' },
            { min: 2, max: 50, message: '产品名称长度在 2 到 50 个字符', trigger: 'blur' },
        ],
        fieldProps: {
            placeholder: '请输入产品名称（2-50个字符）',
        },
    },
    {
        prop: 'price',
        label: '单价',
        width: 150,
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [
            { required: true, message: '请输入单价', trigger: 'blur' },
            {
                pattern: /^\d+(\.\d{1,2})?$/,
                message: '请输入有效的价格（支持两位小数）',
                trigger: 'blur',
            },
        ],
        fieldProps: {
            placeholder: '请输入单价（如：100.50）',
        },
    },
    {
        prop: 'quantity',
        label: '数量',
        width: 150,
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [
            { required: true, message: '请输入数量', trigger: 'blur' },
            { pattern: /^\d+$/, message: '请输入有效的数量（正整数）', trigger: 'blur' },
            { type: 'number', min: 1, message: '数量必须大于 0', trigger: 'blur' },
        ],
        fieldProps: {
            placeholder: '请输入数量（正整数，大于0）',
        },
    },
    {
        prop: 'total',
        label: '总价',
        minWidth: 3000,
        valueType: 'text',
        hideInSearch: true,
        rules: [
            {
                pattern: /^\d+(\.\d{1,2})?$/,
                message: '请输入有效的总价（支持两位小数）',
                trigger: 'blur',
            },
        ],
        fieldProps: {
            placeholder: '请输入总价（如：500.00）',
        },
    },
    {
        prop: 'operation',
        label: '操作',
        minWidth: 100,
        fixed: 'right',
        hideInSearch: true,
        slots: {
            default: 'operation',
        },
    },
]);

// 添加表格组
const handleTableGroupAdd = () => {
    const newGroup = {
        id: Date.now(), // 使用时间戳作为 ID
        collapsed: false,
        data: [
            {
                id: Math.random(),
                name: '',
                price: '',
                quantity: '',
                total: '',
            },
        ],
    };
    validationTableGroups.value = [...validationTableGroups.value, newGroup];
    const groupIndex = validationTableGroups.value.length - 1; // 新添加的表格组索引

    ElMessage.success('已添加新表格组');

    // 触发事件，通知 ProDialog 需要滚动到新添加的表格组
    nextTick(() => {
        // 在 table-groups-container 上触发事件
        if (tableGroupsContainerRef.value) {
            const event = new CustomEvent('pro-table-group-added', {
                bubbles: true,
                detail: {
                    groupIndex: groupIndex,
                },
            });
            tableGroupsContainerRef.value.dispatchEvent(event);
        }
    });
};

// 删除表格组
const handleTableGroupDelete = groupIndex => {
    if (validationTableGroups.value.length <= 1) {
        ElMessage.warning('至少需要保留一个表格组');
        return;
    }
    const newGroups = [...validationTableGroups.value];
    newGroups.splice(groupIndex, 1);
    validationTableGroups.value = newGroups;
    // 清理对应的 ref
    validationTableRefs.value.splice(groupIndex, 1);
    ElMessage.success('已删除表格组');
};

// 在指定表格组中添加行
const handleValidationTableAdd = (index, groupIndex) => {
    const group = validationTableGroups.value[groupIndex];
    if (!group) return;

    let insertIndex = -1;
    // 如果传入了 index，则在指定行的下一行（index + 1）插入；否则追加到最后
    if (typeof index === 'number' && index >= 0) {
        insertIndex = index + 1;
    } else {
        // 追加到最后
        insertIndex = group.data.length;
    }

    const newRow = {
        id: Math.random(), // 使用随机值作为 ID
        name: '',
        price: '',
        quantity: '',
        total: '',
        _insertIndex: insertIndex, // 标记插入位置，用于滚动定位
    };

    // 使用展开运算符创建新数组，然后插入新行
    if (typeof index === 'number' && index >= 0) {
        const newArray = [...group.data];
        newArray.splice(insertIndex, 0, newRow);
        group.data = newArray;
    } else {
        // 追加到最后
        group.data = [...group.data, newRow];
    }
    // 更新整个数组以触发响应式更新
    validationTableGroups.value = [...validationTableGroups.value];
    console.log('validationTableGroups.value', validationTableGroups.value);
    ElMessage.success('已添加新行');
    // 滚动逻辑已封装到 ProTable 组件中，会自动处理
};

// 在指定表格组中删除行
const handleValidationTableDelete = (row, index, groupIndex) => {
    const group = validationTableGroups.value[groupIndex];
    if (!group) return;

    if (group.data.length <= 1) {
        ElMessage.warning('至少需要保留一个数据');
        return;
    }
    // 使用展开运算符创建新数组，然后删除指定行
    const newArray = [...group.data];
    newArray.splice(index, 1);
    group.data = newArray;
    // 更新整个数组以触发响应式更新
    validationTableGroups.value = [...validationTableGroups.value];
    ElMessage.success('已删除');
};

// 更新指定表格组中的数据
const handleValidationTableUpdate = (updatedRow, index, groupIndex) => {
    const group = validationTableGroups.value[groupIndex];
    if (!group) return;

    // 使用展开运算符创建新数组，确保响应式更新
    const newArray = [...group.data];
    const updatedData = { ...updatedRow };

    // 自动计算总价
    if (updatedRow.price && updatedRow.quantity) {
        const price = parseFloat(updatedRow.price);
        const quantity = parseInt(updatedRow.quantity);
        if (!isNaN(price) && !isNaN(quantity)) {
            updatedData.total = (price * quantity).toFixed(2);
        }
    }

    newArray[index] = updatedData;
    group.data = newArray;
    // 更新整个数组以触发响应式更新
    validationTableGroups.value = [...validationTableGroups.value];
    console.log('更新数据:', updatedData, '索引:', index, '表格组:', groupIndex);
};

const handleValidationTableConfirm = async () => {
    // 验证所有表格组
    const allErrors = [];

    for (let i = 0; i < validationTableRefs.value.length; i++) {
        const tableRef = validationTableRefs.value[i];
        if (!tableRef || !tableRef.validate) {
            continue;
        }

        try {
            await tableRef.validate();
        } catch (errors) {
            if (Array.isArray(errors) && errors.length > 0) {
                // 为每个错误添加表格组信息
                errors.forEach(error => {
                    allErrors.push({
                        ...error,
                        groupIndex: i,
                        groupRow: error.row,
                    });
                });
            }
        }
    }

    if (allErrors.length > 0) {
        // 验证失败，显示第一个错误信息
        const firstError = allErrors[0];
        ElMessage.warning(
            `表格组 ${firstError.groupIndex + 1} 第 ${firstError.groupRow + 1} 行：${firstError.message}`,
        );
        console.error('验证失败:', allErrors);
        return;
    }

    // 验证通过，保存数据
    ElMessage.success('所有表格数据验证通过，已保存');
    console.log('表格数据:', validationTableGroups.value);
    validationTableDialogVisible.value = false;
};

const handleValidationTableDialogClosed = () => {
    // 对话框关闭时清除所有表格组的校验错误
    validationTableRefs.value.forEach(ref => {
        if (ref && ref.clearValidation) {
            ref.clearValidation();
        }
    });
    console.log('编辑表格校验对话框已关闭');
};

// 全屏对话框
const fullscreenDialogVisible = ref(false);

// 表单+表格对话框相关
const formTableDialogVisible = ref(false);
const formTableDialogTitle = ref('新增产品');
const productFormRef = ref(null);
const productTableRef = ref(null);
const productTableGroupsContainerRef = ref(null);

// 产品表单数据
const productFormData = ref({
    productName: '',
    productType: '',
    ladderMode: '',
});

// 产品选项数据（模拟数据）
const productOptions = ref([
    { label: '产品A', value: 'productA' },
    { label: '产品B', value: 'productB' },
    { label: '产品C', value: 'productC' },
]);

// 产品类型选项数据（从接口动态获取）
const productTypeOptions = ref([]);

// 模拟从接口获取产品类型选项
const fetchProductTypeOptions = async (productCode = '') => {
    try {
        // 模拟接口请求延迟
        await new Promise(resolve => setTimeout(resolve, 300));

        // 模拟接口返回数据（实际使用时替换为真实的接口调用）
        // const response = await api.getProductTypeOptions(productCode);

        // 根据产品代码返回不同的选项（模拟数据）
        const mockData = productCode
            ? [
                  { label: `${productCode}-类型1`, value: `${productCode}_type1` },
                  { label: `${productCode}-类型2`, value: `${productCode}_type2` },
                  { label: `${productCode}-类型3`, value: `${productCode}_type3` },
                  { label: `${productCode}-类型4`, value: `${productCode}_type4` },
              ]
            : [
                  { label: '类型1', value: 'type1' },
                  { label: '类型2', value: 'type2' },
                  { label: '类型3', value: 'type3' },
                  { label: '类型4', value: 'type4' },
                  { label: '类型5', value: 'type5' },
              ];

        productTypeOptions.value = mockData;
        console.log('产品类型选项已更新:', productTypeOptions.value);
    } catch (error) {
        console.error('获取产品类型选项失败:', error);
        ElMessage.error('获取产品类型选项失败');
    }
};

// 阶梯模式选项数据（模拟数据）
const ladderModeOptions = ref([
    { label: '模式1', value: 'mode1' },
    { label: '模式2', value: 'mode2' },
    { label: '模式3', value: 'mode3' },
]);

// 名称字段选项数据（模拟数据）
const nameFieldOptions = ref([
    { label: '固定一件', value: 'FIXED_PER_ITEM' },
    { label: '折扣费率', value: 'RATE' },
    { label: '固定金额', value: 'FIXED_AMOUNT' },
]);

// 当前选择的产品 code
const selectedProductCode = ref('');

// 产品表单列配置
const productFormColumns = computed(() => [
    {
        name: 'productName',
        label: '产品选择',
        valueType: 'select',
        required: true,
        rules: [
            {
                required: true,
                message: '请选择产品',
                trigger: 'change',
            },
        ],
        fieldProps: {
            placeholder: '请选择产品',
            options: productOptions.value,
            filterable: true,
        },
    },
    {
        name: 'productType',
        label: '产品类型',
        valueType: 'select',
        required: true,
        rules: [
            {
                required: true,
                message: '请选择产品类型',
                trigger: 'change',
            },
        ],
        fieldProps: {
            placeholder: '请选择产品类型',
            options: productTypeOptions.value,
            filterable: true,
            disabled: !selectedProductCode.value,
        },
    },
    {
        name: 'ladderMode',
        label: '阶梯模式',
        valueType: 'select',
        fieldProps: {
            placeholder: '请选择阶梯模式',
            options: ladderModeOptions.value,
            filterable: true,
        },
    },
]);

// 产品表格数据
const productTableData = ref([
    {
        id: Date.now() + Math.random(), // 生成唯一标识，用于匹配行数据，避免增删行时索引错位
        code: '',
        name: '',
        inputRange: ['', ''],
        feeRange: ['', ''],
        decimalPlaces: '',
        unitDescription: '',
        costBottomLine: '',
    },
]);

// 产品表格列配置
const productTableColumns = computed(() => [
    {
        prop: 'code',
        label: '序号',
        width: 120,
        valueType: 'text',
        hideInSearch: true,
        readonly: true,
        slots: {
            default: 'code',
        },
    },
    {
        prop: 'name',
        label: '折扣模式名称',
        width: 150,
        valueType: 'select',
        hideInSearch: true,
        required: true,
        rules: [{ required: true, message: '请选择名称', trigger: 'change' }],
        fieldProps: row => {
            return {
                placeholder: '请选择名称',
                options: nameFieldOptions.value,
                filterable: true,
                // 使用 onChange 事件处理器
                onChange: value => {
                    // 获取当前行的旧 name 值
                    const currentRow = productTableData.value.find(r => r === row);
                    const oldName = currentRow?.name;

                    // 当 name 从 RATE 变为非 RATE 时，清空 feeRange
                    if (oldName === 'RATE' && value !== 'RATE') {
                        // 找到对应的行索引
                        const rowIndex = productTableData.value.findIndex(r => r === row);
                        if (rowIndex !== -1) {
                            // 立即更新数据，通过修改整个数组来强制刷新
                            const updatedArray = productTableData.value.map((r, idx) => {
                                if (idx === rowIndex) {
                                    return { ...r, feeRange: ['', ''] };
                                }
                                return r;
                            });
                            // 使用展开运算符创建新数组，强制触发响应式更新
                            productTableData.value = [...updatedArray];

                            // key 会自动更新，因为 feeRange 已经改变，会触发表格重新渲染
                        }
                    }
                },
            };
        },
    },
    {
        prop: 'inputRange',
        label: '输入范围',
        width: 300,
        hideInSearch: true,
        valueType: 'textRange',
        required: true,
        rules: [
            { required: true, message: '请输入范围', trigger: 'change' },
            {
                validator: (rule, value, callback) => {
                    // value 是数组 [start, end]
                    const valueArray = Array.isArray(value) ? value : [];
                    const startValue = valueArray[0];
                    const endValue = valueArray[1];

                    // ========== 第一阶段：分别校验每个输入框 ==========

                    // 校验第一个值
                    if (!startValue || startValue === '') {
                        callback(new Error('请输入最小值'));
                        return;
                    }
                    const startNum = Number(startValue);
                    if (isNaN(startNum)) {
                        callback(new Error('最小值必须是数字'));
                        return;
                    }
                    // 校验第二个值
                    if (!endValue || endValue === '') {
                        callback(new Error('请输入最大值'));
                        return;
                    }
                    const endNum = Number(endValue);
                    if (isNaN(endNum)) {
                        callback(new Error('最大值必须是数字'));
                        return;
                    }

                    // ========== 第二阶段：校验两个值之间的关系 ==========

                    // 校验最低值必须小于最高值
                    if (startNum >= endNum) {
                        callback(new Error('最小值必须小于最大值'));
                        return;
                    }
                    callback();
                },
                trigger: 'change',
            },
        ],
        fieldProps: {
            placeholder: ['最小值', '最大值'],
            rangeFormat: 'array',
        },
    },
    {
        prop: 'decimalPlaces',
        label: '小数位数',
        width: 100,
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [{ required: true, message: '请输入小数位数', trigger: 'blur' }],
        fieldProps: {
            placeholder: '请输入小数位数',
        },
    },
    {
        prop: 'feeRange',
        label: '最低一票区间',
        width: 300,
        hideInSearch: true,
        valueType: 'textRange',
        rules: [
            {
                validator: (rule, value, callback, row, rowIndex) => {
                    // 如果 name 不是 RATE，不需要校验
                    // row 是第4个参数，包含当前行的完整数据
                    const currentRow = row || rule.row || {};
                    if (currentRow.name !== 'RATE') {
                        callback();
                        return;
                    }

                    // 只有当 name 为 RATE 时才需要校验
                    if (!value || !Array.isArray(value) || value.length === 0) {
                        callback(new Error('请输入区间范围'));
                        return;
                    }

                    // value 是数组 [start, end]
                    const valueArray = Array.isArray(value) ? value : [];
                    const startValue = valueArray[0];
                    const endValue = valueArray[1];

                    // ========== 第一阶段：分别校验每个输入框 ==========

                    // 校验第一个值
                    if (!startValue || startValue === '') {
                        callback(new Error('请输入最小票价'));
                        return;
                    }
                    const startNum = Number(startValue);
                    if (isNaN(startNum)) {
                        callback(new Error('最小票价必须是数字'));
                        return;
                    }
                    // 校验第二个值
                    if (!endValue || endValue === '') {
                        callback(new Error('请输入最大票价'));
                        return;
                    }
                    const endNum = Number(endValue);
                    if (isNaN(endNum)) {
                        callback(new Error('最大票价必须是数字'));
                        return;
                    }

                    // ========== 第二阶段：校验两个值之间的关系 ==========

                    // 校验最低值必须小于最高值
                    if (startNum >= endNum) {
                        callback(new Error('最小票价必须小于最大票价'));
                        return;
                    }
                    callback();
                },
                trigger: 'change',
            },
        ],
        fieldProps: row => {
            console.log('feeRange row', row);
            // 只有当 name 为 RATE 时才可编辑
            const isDisabled = row?.name !== 'RATE';
            return {
                placeholder: ['最小票价', '最大票价'],
                rangeFormat: 'array',
                disabled: isDisabled,
            };
        },
    },
    {
        prop: 'unitDescription',
        label: '填写单位说明',
        width: 200,
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [{ required: true, message: '请输入填写单位说明', trigger: 'blur' }],
        fieldProps: {
            placeholder: '请输入填写单位说明',
        },
    },
    {
        prop: 'costBottomLine',
        label: '成本底线',
        width: 300,
        valueType: 'text',
        hideInSearch: true,
        required: true,
        rules: [{ required: true, message: '请输入成本底线', trigger: 'blur' }],
        fieldProps: {
            placeholder: '请输入成本底线',
        },
    },
    {
        prop: 'operation',
        label: '操作',
        width: 150,
        fixed: 'right',
        hideInSearch: true,
        slots: {
            default: 'operation',
        },
    },
]);

// 处理表单值变化
const handleProductFormValuesChange = (values, name, value) => {
    if (name === 'productName') {
        // 当产品选择改变时，先清空产品类型
        const form = productFormRef.value;
        if (form && form.resetFields) {
            form.resetFields(['productType']);
        }
        selectedProductCode.value = value || '';
        // 当产品选择变化时，重新获取产品类型选项
        fetchProductTypeOptions(value || '');
    }
};

// 添加行
const handleProductAddRow = index => {
    let insertIndex = -1;
    // 如果传入了 index，则在指定行的下一行（index + 1）插入；否则追加到最后
    if (typeof index === 'number' && index >= 0) {
        insertIndex = index + 1;
    } else {
        // 追加到最后
        insertIndex = productTableData.value.length;
    }

    const newRow = {
        id: Date.now() + Math.random(), // 生成唯一标识，用于匹配行数据，避免增删行时索引错位
        code: '',
        name: '',
        inputRange: ['', ''],
        feeRange: ['', ''],
        decimalPlaces: '',
        unitDescription: '',
        costBottomLine: '',
        _insertIndex: insertIndex, // 标记插入位置，用于滚动定位
    };

    // 使用展开运算符创建新数组，然后插入新行
    if (typeof index === 'number' && index >= 0) {
        const newArray = [...productTableData.value];
        newArray.splice(insertIndex, 0, newRow);
        productTableData.value = newArray;
    } else {
        // 追加到最后
        productTableData.value = [...productTableData.value, newRow];
    }
    ElMessage.success('已添加新行');
};

// 删除行
const handleProductDeleteRow = (row, index) => {
    if (productTableData.value.length <= 1) {
        ElMessage.warning('至少需要保留一个数据');
        return;
    }

    // 找到在原始数据中的实际索引（通过 row 对象来匹配，而不是直接使用 index）
    // 这样可以避免在有编辑状态时索引错位的问题
    const actualIndex = productTableData.value.findIndex(item => {
        // 如果有唯一标识（如 id），使用它来匹配
        if (row.id && item.id) {
            return item.id === row.id;
        }
        // 如果没有 id，通过对象引用或关键字段来匹配
        // 使用对象引用比较（===）来找到相同的对象
        if (item === row) {
            return true;
        }
        // 如果对象引用不匹配，尝试通过关键字段匹配（作为后备方案）
        // 这里使用 code 字段作为唯一标识（如果存在）
        if (row.code && item.code && row.code === item.code) {
            return true;
        }
        return false;
    });

    if (actualIndex === -1) {
        // 如果找不到，回退到使用 index（兼容旧逻辑）
        console.warn('无法通过 row 对象找到数据，使用 index 删除');
        const newArray = [...productTableData.value];
        newArray.splice(index, 1);
        productTableData.value = newArray;
    } else {
        // 找到实际索引，删除对应的数据
        const newArray = [...productTableData.value];
        newArray.splice(actualIndex, 1);
        productTableData.value = newArray;
    }

    ElMessage.success('已删除');
};

// 更新行
const handleProductTableUpdate = (updatedRow, index) => {
    // 找到在原始数据中的实际索引（通过 updatedRow 对象来匹配，而不是直接使用 index）
    // 这样可以避免在有编辑状态时索引错位的问题
    let actualIndex = productTableData.value.findIndex(item => {
        // 如果有唯一标识（如 id），使用它来匹配
        if (updatedRow.id && item.id) {
            return item.id === updatedRow.id;
        }
        // 如果没有 id，通过对象引用或关键字段来匹配
        // 使用对象引用比较（===）来找到相同的对象
        if (item === updatedRow) {
            return true;
        }
        // 如果对象引用不匹配，尝试通过关键字段匹配（作为后备方案）
        // 这里使用 code 字段作为唯一标识（如果存在）
        if (updatedRow.code && item.code && updatedRow.code === item.code) {
            return true;
        }
        return false;
    });

    // 如果找不到，回退到使用 index（兼容旧逻辑）
    if (actualIndex === -1) {
        console.warn('无法通过 updatedRow 对象找到数据，使用 index 更新');
        actualIndex = index;
    }

    // 获取旧的行数据
    const oldRow = productTableData.value[actualIndex] || {};
    const oldName = oldRow.name;
    const newName = updatedRow.name;

    // 使用展开运算符创建新数组，确保响应式更新
    const newArray = [...productTableData.value];
    const updatedData = { ...updatedRow };

    // 如果折扣模式从 RATE 切换为非 RATE，清空 feeRange 字段
    if (oldName === 'RATE' && newName !== 'RATE') {
        updatedData.feeRange = ['', ''];
    }

    newArray[actualIndex] = updatedData;
    productTableData.value = newArray;

    // 如果清空了 feeRange，使用 nextTick 确保界面刷新
    if (oldName === 'RATE' && newName !== 'RATE') {
        console.log('清空 feeRange，oldName:', oldName, 'newName:', newName, 'actualIndex:', actualIndex);
        // 立即更新一次
        const updatedArray1 = [...productTableData.value];
        updatedArray1[actualIndex] = { ...updatedArray1[actualIndex], feeRange: ['', ''] };
        productTableData.value = updatedArray1;

        nextTick(() => {
            // 再次确保 feeRange 被清空（防止 editingData 中还有旧值）
            const currentRow = productTableData.value[actualIndex];
            console.log('nextTick 中的 currentRow.feeRange:', currentRow?.feeRange);
            if (currentRow && (currentRow.feeRange[0] || currentRow.feeRange[1])) {
                const updatedArray2 = [...productTableData.value];
                updatedArray2[actualIndex] = { ...currentRow, feeRange: ['', ''] };
                productTableData.value = updatedArray2;
            }

            // 清除验证错误
            if (productTableRef.value && productTableRef.value.clearValidation) {
                productTableRef.value.clearValidation();
            }
        });
    }
};

// 重置
const handleProductReset = () => {
    if (productFormRef.value) {
        productFormRef.value.reset();
    }
    productFormData.value = {
        productName: '',
        productType: '',
        ladderMode: '',
    };
    selectedProductCode.value = '';
    // 先清空表格数据，确保触发长度变化
    productTableData.value = [];
    // 使用 nextTick 确保清空后再设置初始数据，这样可以触发 ProTable 的 watch 清空编辑状态
    nextTick(() => {
        productTableData.value = [
            {
                id: Date.now() + Math.random(), // 生成唯一标识，用于匹配行数据，避免增删行时索引错位
                code: '',
                name: '',
                inputRange: ['', ''],
                feeRange: ['', ''],
                decimalPlaces: '',
                unitDescription: '',
                costBottomLine: '',
            },
        ];
        // 清除验证错误
        if (productTableRef.value && productTableRef.value.clearValidation) {
            productTableRef.value.clearValidation();
        }
    });
    ElMessage.success('已重置');
};

// 取消
const handleProductCancel = () => {
    formTableDialogVisible.value = false;
};

// 确定
const handleProductConfirm = async () => {
    try {
        // 验证表单
        if (productFormRef.value && productFormRef.value.validate) {
            await productFormRef.value.validate();
        }

        // 验证表格
        if (productTableRef.value && productTableRef.value.validate) {
            try {
                await productTableRef.value.validate();
            } catch (errors) {
                if (Array.isArray(errors) && errors.length > 0) {
                    const firstError = errors[0];
                    ElMessage.error(`第 ${firstError.row + 1} 行：${firstError.message}`);
                    console.error('验证失败:', errors);
                    return;
                }
            }
        }

        // 验证通过，保存数据
        ElMessage.success('所有数据验证通过');
        const submitData = {
            ...productFormData.value,
            tableData: productTableData.value,
        };
        console.log('提交数据:', submitData);
        // formTableDialogVisible.value = false;
    } catch (errors) {
        if (Array.isArray(errors) && errors.length > 0) {
            const firstError = errors[0];
            ElMessage.error(`表单验证失败：${firstError.message || firstError}`);
        } else {
            ElMessage.error('数据验证失败，请检查错误提示');
        }
        console.error('验证失败:', errors);
    }
};

// 对话框关闭
const handleFormTableDialogClosed = () => {
    // 清除校验错误
    if (productFormRef.value && productFormRef.value.reset) {
        productFormRef.value.reset();
    }
    if (productTableRef.value && productTableRef.value.clearValidation) {
        productTableRef.value.clearValidation();
    }

    // 清空数据
    productFormData.value = {
        productName: '',
        productType: '',
        ladderMode: '',
    };
    selectedProductCode.value = '';
    productTableData.value = [
        {
            id: Date.now() + Math.random(), // 生成唯一标识，用于匹配行数据，避免增删行时索引错位
            code: '',
            name: '',
            inputRange: ['', ''],
            feeRange: ['', ''],
            decimalPlaces: '',
            unitDescription: '',
            costBottomLine: '',
        },
    ];
};

// 组件挂载时获取产品类型选项（可选，如果需要初始数据）
onMounted(() => {
    // 可以在这里获取初始的产品类型选项，或者留空等待产品选择后再获取
    // fetchProductTypeOptions();
});
</script>

<style scoped lang="less">
.pro-dialog-example {
    padding: 20px;

    .example-card {
        margin-bottom: 20px;
    }

    .dialog-section {
        padding: 20px;

        h3 {
            margin-bottom: 20px;
            font-size: 16px;
            font-weight: 500;
            color: var(--el-text-color-primary, #303133);
        }
    }

    .dialog-form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 20px;
    }

    .custom-dialog-content {
        padding: 10px 0;
    }

    .custom-title-dialog-header {
        p {
            margin: 0;
            line-height: 1.6;
            color: var(--el-text-color-regular, #606266);
            font-weight: 500;

            code {
                padding: 2px 6px;
                background-color: var(--el-fill-color-light, #f5f7fa);
                border-radius: 3px;
                font-family: 'Courier New', monospace;
                font-size: 12px;
                color: var(--el-color-primary, #409eff);
            }
        }
    }

    .custom-title-dialog-content {
        p {
            margin: 10px 0;
            line-height: 1.6;
            color: var(--el-text-color-regular, #606266);

            code {
                padding: 2px 6px;
                background-color: var(--el-fill-color-light, #f5f7fa);
                border-radius: 3px;
                font-family: 'Courier New', monospace;
                font-size: 12px;
                color: var(--el-color-primary, #409eff);
            }
        }
    }

    .fullscreen-dialog-content {
        padding: 20px;

        p {
            margin-bottom: 10px;
            font-size: 14px;
            color: var(--el-text-color-regular, #606266);
        }
    }

    .add-button-wrapper {
        text-align: center;
        padding: 20px 0;
        width: 100%;
    }

    .add-enum-btn {
        width: 100%;
        border: 1px solid #dcdfe6;
        background-color: #fff;
        padding: 12px 20px;
        border-radius: 4px;
        transition: all 0.3s;
        color: var(--el-color-primary);

        &:hover {
            border-color: #c0c4cc;
            background-color: #f5f7fa;
            color: var(--el-color-primary);
        }

        .el-icon {
            margin-right: 8px;
            color: var(--el-color-primary);
        }
    }

    .table-groups-container {
        .table-group-card {
            margin-bottom: 20px;

            &:last-of-type {
                margin-bottom: 0;
            }

            /* 确保 el-card 不会阻止 sticky 定位 */
            :deep(.el-card) {
                overflow: visible;
            }

            :deep(.el-card__header) {
                padding: 0;
                border-bottom: none;
                position: sticky; /* 将 sticky 应用到 header 本身 */
                top: 0;
                z-index: 100; /* 提高 z-index 确保在滚动时显示在其他内容之上 */
                cursor: pointer;
                background: linear-gradient(
                    135deg,
                    var(--el-color-primary-light-9, #ecf5ff) 0%,
                    var(--el-bg-color, #ffffff) 100%
                );
                backdrop-filter: blur(8px); /* 添加模糊效果，增强视觉层次 */
                -webkit-backdrop-filter: blur(8px);

                /* 确保收缩按钮可以显示和点击 */
                .el-card__collapse-icon {
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--el-color-primary, #409eff);
                    z-index: 11;
                }
            }

            :deep(.el-card__body) {
                padding: 0;
            }

            .table-group-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 20px;
                padding-right: 50px; /* 为收缩按钮留出空间 */
                border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5);
                pointer-events: none; /* 让点击事件穿透到 header */

                .table-group-header-left {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    flex: 1;
                    pointer-events: auto; /* 恢复子元素的点击事件 */

                    .table-group-title {
                        font-size: 15px;
                        font-weight: 600;
                        color: var(--el-color-primary, #409eff);
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        &::before {
                            content: '';
                            width: 4px;
                            height: 16px;
                            background-color: var(--el-color-primary, #409eff);
                            border-radius: 2px;
                        }
                    }
                }

                .table-group-header-right {
                    pointer-events: auto; /* 恢复按钮的点击事件 */
                }
            }

            /* 隐藏表格内部滚动条，使用外层滚动条 */
            /* 注意：保留滚动容器的功能，只隐藏滚动条的视觉显示，以支持 ProTable 的自动滚动逻辑 */
            :deep(.pro-table-container) {
                padding: 16px;
                background-color: var(--el-bg-color, #ffffff);
                border-radius: 0 0 6px 6px;

                .table-wrapper {
                    .el-table {
                        // 确保表格不限制高度，完全展开
                        .el-table__body-wrapper {
                            max-height: none !important;
                            height: auto !important;
                            // 不设置 overflow: visible，保留滚动容器以便 ProTable 的自动滚动逻辑可以工作
                        }

                        .el-table__body {
                            height: auto !important;
                        }

                        // 只隐藏垂直滚动条的视觉显示，但保留滚动功能
                        // 水平滚动条保留，以便表格内容过宽时可以横向滚动
                        .el-scrollbar__bar.is-vertical {
                            display: none !important;
                        }
                    }
                }
            }
        }
    }

    .footer-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .add-table-group-btn {
            width: 100%;
            padding: 12px 20px;
            border: 1px dashed var(--el-border-color, #dcdfe6);
            border-radius: 4px;
            background-color: var(--el-fill-color-lighter, #fafafa);
            transition: all 0.3s;
            text-align: center;

            &:hover {
                border-color: var(--el-color-primary, #409eff);
                background-color: var(--el-color-primary-light-9, #ecf5ff);
                color: var(--el-color-primary, #409eff);
            }

            .el-icon {
                margin-right: 8px;
            }
        }

        .footer-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
    }

    .input-range-wrapper {
        display: flex;
        align-items: center;
    }

    // 表单+表格对话框样式
    .dialog {
        :deep(.pro-table-container .table-header) {
            padding: 0px 10px 0 10px !important;
        }

        .dialog-form {
            margin-bottom: 20px;
        }

        .table-groups-container {
            // 确保 sticky 定位能正常工作
            :deep(.el-scrollbar__view) {
                display: block !important;
            }

            :deep(.pro-table-container) {
                background-color: var(--el-bg-color, #ffffff);
                border-radius: 0 0 6px 6px;
            }
        }
    }
}
</style>
