<template>
    <div
        ref="tableContainerRef"
        class="com-data-table-container"
        :class="{ 'is-fullscreen': isFullscreen }"
    >
        <el-card class="data-table-card">
            <!-- 工具栏 -->
            <template #header v-if="showToolbar">
                <div class="table-header">
                    <div class="table-header-left">
                        <slot name="toolbar" />
                    </div>
                    <div class="table-header-right">
                        <!-- 刷新按钮 -->
                        <el-tooltip content="刷新" placement="bottom" v-if="showRefresh">
                            <!-- <el-button icon="Refresh" @click="handleRefresh" /> -->
                            <el-icon @click="handleRefresh" style="cursor: pointer">
                                <Refresh />
                            </el-icon>
                        </el-tooltip>

                        <!-- 密度切换 -->
                        <el-tooltip content="密度" placement="bottom">
                            <el-dropdown placement="bottom" @command="handleDensityChange">
                                <el-icon class="setting-icon">
                                    <Operation />
                                </el-icon>

                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item
                                            :key="item.value"
                                            :command="item.value"
                                            v-for="item in dropdownList"
                                        >
                                            <el-icon>
                                                <Check v-if="item.value === density" />
                                            </el-icon>

                                            {{ item.label }}
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-tooltip>

                        <!-- 列设置 -->
                        <el-tooltip content="列设置" placement="bottom">
                            <el-dropdown
                                placement="bottom-end"
                                trigger="click"
                                @visible-change="handleDropdownVisibleChange"
                            >
                                <el-icon class="setting-icon">
                                    <Setting />
                                </el-icon>

                                <template #dropdown>
                                    <div class="column-setting-container">
                                        <div class="column-setting-header">
                                            <el-checkbox
                                                :indeterminate="isIndeterminate"
                                                :model-value="isAllChecked"
                                                @change="handleToggleAll"
                                            >
                                                列显示
                                            </el-checkbox>
                                            <el-button type="text" text @click="handleResetColumns">
                                                重置
                                            </el-button>
                                        </div>

                                        <div v-if="draggableColumns.length === 0" class="empty-tip">
                                            暂无列配置
                                        </div>
                                        <draggable
                                            v-else
                                            :list="draggableColumns"
                                            :animation="150"
                                            class="draggable-container"
                                            handle=".column-setting-item"
                                            item-key="prop"
                                            @end="handleDragEnd"
                                        >
                                            <template #item="{ element: item }">
                                                <div class="column-setting-item">
                                                    <el-icon class="column-setting-icon">
                                                        <Rank />
                                                    </el-icon>
                                                    <el-checkbox
                                                        :model-value="item.visible"
                                                        @change="
                                                            (val) =>
                                                                handleColumnVisibleChange(item, val)
                                                        "
                                                    >
                                                        <ComText truncated style="width: 120px">
                                                            {{ item.label }}
                                                        </ComText>
                                                    </el-checkbox>
                                                </div>
                                            </template>
                                        </draggable>
                                    </div>
                                </template>
                            </el-dropdown>
                        </el-tooltip>

                        <!-- 全屏 -->
                        <el-tooltip
                            :content="isFullscreen ? '退出全屏' : '全屏'"
                            placement="bottom"
                        >
                            <el-icon class="setting-icon">
                                <FullScreen @click="toggleFullscreen" />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </template>

            <!-- 表格 -->
            <el-table
                ref="tableRef"
                v-loading="loading"
                :data="tableData"
                :height="height"
                :max-height="maxHeight"
                :stripe="stripe"
                :border="border"
                :size="computedSize"
                :highlight-current-row="highlightCurrentRow"
                :class="`table-density-${density}`"
                @selection-change="handleSelectionChange"
                v-bind="$attrs"
                @row-click="handleRowClick"
                style="width: 100%"
            >
                <!-- 选择列 -->
                <el-table-column
                    v-if="showSelection"
                    type="selection"
                    width="55"
                    align="center"
                    fixed
                />
                <!-- 索引列 -->
                <el-table-column
                    v-if="showIndex"
                    type="index"
                    label="序号"
                    width="60"
                    align="center"
                    fixed
                />
                <!-- 动态列 -->
                <el-table-column
                    v-for="column in visibleColumns"
                    :key="column.prop"
                    :prop="column.prop"
                    :label="column.label"
                    :width="column.width"
                    :min-width="column.minWidth"
                    :fixed="column.fixed"
                    :align="column.align || 'center'"
                    :show-overflow-tooltip="column.showOverflowTooltip !== false"
                >
                    <template #default="{ row, $index }" v-if="column.slot || column.formatter">
                        <slot :name="column.slot" :row="row" :index="$index" :prop="column.prop">
                            <span v-if="column.formatter">
                                {{ column.formatter(row, column, row[column.prop], $index) }}
                            </span>
                            <span v-else>{{ row[column.prop] }}</span>
                        </slot>
                    </template>
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column
                    v-if="showAction && hasActions"
                    label="操作"
                    :width="dynamicActionWidth"
                    :fixed="actionFixed"
                    align="center"
                    class-name="action-column"
                >
                    <template #default="{ row, $index }">
                        <slot name="action" :row="row" :index="$index">
                            <!-- 前3个按钮直接显示 -->
                            <div class="action-column-container">
                                <template v-for="(action, idx) in visibleActions" :key="idx">
                                    <!-- 有权限配置的按钮，使用 v-hasPermi 指令 -->
                                    <ComButton
                                        v-if="action.permission"
                                        :type="action.type || 'primary'"
                                        :size="
                                            computedSize === 'large'
                                                ? 'default'
                                                : computedSize === 'small'
                                                ? 'small'
                                                : 'small'
                                        "
                                        :link="action.link !== false"
                                        :plain="action.plain"
                                        :disabled="
                                            typeof action.disabled === 'function'
                                                ? action.disabled(row)
                                                : action.disabled
                                        "
                                        @click="handleAction(action, row, $index)"
                                        v-hasPermi="action.permission"
                                        class="action-button-item"
                                    >
                                        {{ action.label }}
                                    </ComButton>
                                    <!-- 没有权限配置的按钮，不使用 v-hasPermi 指令（兼容旧代码） -->
                                    <ComButton
                                        v-else
                                        :type="action.type || 'primary'"
                                        :size="
                                            computedSize === 'large'
                                                ? 'default'
                                                : computedSize === 'small'
                                                ? 'small'
                                                : 'small'
                                        "
                                        :link="action.link !== false"
                                        :plain="action.plain"
                                        :disabled="
                                            typeof action.disabled === 'function'
                                                ? action.disabled(row)
                                                : action.disabled
                                        "
                                        @click="handleAction(action, row, $index)"
                                        class="action-button-item"
                                    >
                                        {{ action.label }}
                                    </ComButton>
                                </template>

                                <el-dropdown
                                    trigger="click"
                                    v-if="moreActions.length > 0"
                                    @command="(cmd) => handleDropdownAction(cmd, row, $index)"
                                >
                                    <el-button type="primary" link size="small">
                                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <template
                                                v-for="(action, idx) in moreActions"
                                                :key="idx"
                                            >
                                                <el-dropdown-item
                                                    v-if="action.permission"
                                                    :command="{ action, row, index: $index }"
                                                    :disabled="
                                                        typeof action.disabled === 'function'
                                                            ? action.disabled(row)
                                                            : action.disabled
                                                    "
                                                    v-hasPermi="action.permission"
                                                >
                                                    {{ action.label }}
                                                </el-dropdown-item>

                                                <el-dropdown-item
                                                    v-else
                                                    :command="{ action, row, index: $index }"
                                                    :disabled="
                                                        typeof action.disabled === 'function'
                                                            ? action.disabled(row)
                                                            : action.disabled
                                                    "
                                                >
                                                    <!-- {{ action.label }} -->
                                                    <ComButton
                                                        :type="action.type || 'primary'"
                                                        :size="
                                                            computedSize === 'large'
                                                                ? 'default'
                                                                : 'small'
                                                        "
                                                        :link="action.link !== false"
                                                        :plain="action.plain"
                                                        :disabled="action.disabled"
                                                    >
                                                        {{ action.label }}
                                                    </ComButton>
                                                </el-dropdown-item>
                                            </template>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>

                            <!-- 超过3个按钮时使用弹出菜单 -->
                            <!-- <el-popover
                                v-if="moreActions.length > 0"
                                trigger="click"
                                placement="bottom-end"
                                :width="140"
                                popper-class="action-popover-menu"
                                class="action-button-item"
                            >
                                <template #reference>
                                    <ComButton
                                        type="primary"
                                        :size="
                                            computedSize === 'large'
                                                ? 'default'
                                                : computedSize === 'small'
                                                ? 'small'
                                                : 'small'
                                        "
                                        link
                                        class="more-action-button"
                                    >
                                        更多<el-icon class="el-icon--right"><ArrowDown /></el-icon>
                                    </ComButton>
                                </template>
                                <div class="popover-menu-list">
                                    <template v-for="(action, idx) in moreActions" :key="idx">
                                    
                                        <div
                                            v-if="action.permission"
                                            v-hasPermi="action.permission"
                                            class="popover-menu-item"
                                            :class="{
                                                'is-disabled':
                                                    typeof action.disabled === 'function'
                                                        ? action.disabled(row)
                                                        : action.disabled,
                                            }"
                                            @click="
                                                !(typeof action.disabled === 'function'
                                                    ? action.disabled(row)
                                                    : action.disabled) &&
                                                    handleAction(action, row, $index)
                                            "
                                        >
                                            {{ action.label }}
                                        </div>
                                    
                                        <div
                                            v-else
                                            class="popover-menu-item"
                                            :class="{
                                                'is-disabled':
                                                    typeof action.disabled === 'function'
                                                        ? action.disabled(row)
                                                        : action.disabled,
                                            }"
                                            @click="
                                                !(typeof action.disabled === 'function'
                                                    ? action.disabled(row)
                                                    : action.disabled) &&
                                                    handleAction(action, row, $index)
                                            "
                                        >
                                            {{ action.label }}
                                        </div>
                                    </template>
                                </div>
                            </el-popover> -->
                        </slot>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <Pagination
                v-if="showPagination"
                v-model:page="pagination.page"
                v-model:limit="pagination.limit"
                :total="pagination.total"
                @pagination="handlePaginationChange"
            />
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useFullscreen } from '@vueuse/core'
import { Operation, FullScreen, Setting, Rank, Refresh, ArrowDown } from '@element-plus/icons-vue'
import draggable from 'vuedraggable/dist/vuedraggable.common'
import Pagination from '@/components/Pagination/index.vue'
import ComButton from '@/components/ComButton/index.vue'
import ComText from '@/components/ComText/index.vue'

const props = defineProps({
    // 表格数据
    tableData: {
        type: Array,
        default: () => [],
    },
    // 表格列配置
    tableColumns: {
        type: Array,
        default: () => [],
    },
    // 加载状态
    loading: {
        type: Boolean,
        default: false,
    },
    // 表格高度
    height: {
        type: [String, Number],
        default: null,
    },
    maxHeight: {
        type: [String, Number],
        default: null,
    },
    // 表格样式
    stripe: {
        type: Boolean,
        default: false,
    },
    border: {
        type: Boolean,
        default: true,
    },
    size: {
        type: String,
        default: 'default',
    },
    highlightCurrentRow: {
        type: Boolean,
        default: false,
    },
    // 功能开关
    showSelection: {
        type: Boolean,
        default: false,
    },
    showIndex: {
        type: Boolean,
        default: false,
    },
    showToolbar: {
        type: Boolean,
        default: false,
    },
    showRefresh: {
        type: Boolean,
        default: true,
    },
    showPagination: {
        type: Boolean,
        default: true,
    },
    showAction: {
        type: Boolean,
        default: false,
    },
    // 操作列配置
    actionColumns: {
        type: Array,
        default: () => [],
    },
    actionWidth: {
        type: [String, Number],
        default: 200, // 默认宽度可容纳3个按钮
    },
    actionFixed: {
        type: [String, Boolean],
        default: 'right',
    },

    // 是否开启更多按钮
    showMoreAction: {
        type: Boolean,
        default: false,
    },
    // 超过几个按钮时开启更多按钮
    moreActionCount: {
        type: Number,
        default: 2,
    },
    // 分页配置
    pagination: {
        type: Object,
        default: () => ({
            page: 1,
            limit: 10,
            total: 0,
        }),
    },
})

const emit = defineEmits([
    'selection-change',
    'row-click',
    'refresh',
    'pagination-change',
    'action',
    'column-change',
])

const tableRef = ref(null)
const tableContainerRef = ref(null)
const density = ref('default') // compact | default | comfortable
const columnsConfig = ref([])
const draggableColumns = ref([])
const originalColumnsConfig = ref([])

const dropdownList = ref([
    {
        label: '紧凑',
        value: 'compact',
    },
    {
        label: '默认',
        value: 'default',
    },
    {
        label: '宽松',
        value: 'comfortable',
    },
])

// 全屏功能
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(tableContainerRef)

// 计算表格size（根据密度）
const computedSize = computed(() => {
    if (props.size !== 'default') {
        return props.size
    }
    switch (density.value) {
        case 'compact':
            return 'small'
        case 'comfortable':
            return 'large'
        default:
            return 'default'
    }
})

// 可见列（根据列配置过滤，用于表格渲染）
const visibleColumns = computed(() => {
    if (columnsConfig.value.length === 0) {
        return props.tableColumns.map((col) => ({ ...col, visible: col.visible !== false }))
    }
    return columnsConfig.value
        .filter((col) => col.visible !== false)
        .map((col) => {
            const original = props.tableColumns.find((c) => c.prop === col.prop)
            return { ...original, ...col }
        })
})

// 全选状态
const isAllChecked = computed(() => {
    return draggableColumns.value.length > 0 && draggableColumns.value.every((col) => col.visible)
})

// 半选状态
const isIndeterminate = computed(() => {
    const checkedCount = draggableColumns.value.filter((col) => col.visible).length
    return checkedCount > 0 && checkedCount < draggableColumns.value.length
})

// 是否有操作按钮
const hasActions = computed(() => {
    return props.actionColumns.length > 0
})

// 可见的操作按钮（前3个）
const visibleActions = computed(() => {
    if (props.showMoreAction) {
        return props.actionColumns.slice(0, props.moreActionCount)
    }
    return props.actionColumns
    // return props.actionColumns.slice(0, 2)
})

// 更多的操作按钮（超过3个的部分）
const moreActions = computed(() => {
    if (props.showMoreAction) {
        return props.actionColumns.slice(props.moreActionCount)
    }
    return []
})

// 动态计算操作列宽度
const dynamicActionWidth = computed(() => {
    if (props.actionColumns.length === 0) {
        return 120 // 默认最小宽度
    }

    // 计算单个按钮的宽度（包括文字、padding）
    // link类型的按钮，中文字符约14px，英文字符约7px，加上左右padding约16px
    const getButtonWidth = (label) => {
        if (!label) return 50 // 最小按钮宽度
        // 计算文字宽度：中文字符按14px，英文字符按7px
        let textWidth = 0
        for (let i = 0; i < label.length; i++) {
            const char = label[i]
            // 判断是否为中文字符（包括中文标点）
            if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) {
                textWidth += 18
            } else {
                textWidth += 7
            }
        }
        const padding = 4 // 左右padding
        return Math.max(textWidth + padding) // 最小50px
    }

    // 按钮之间的间距
    const buttonGap = 0
    // 列标题和单元格padding（减小两端padding）
    const columnPadding = 0

    if (props.showMoreAction) {
        // 需要更多按钮时：显示 moreActionCount 个按钮 + 1个更多按钮
        const visibleCount = props.moreActionCount
        const moreButtonLabel = '更多'

        let totalWidth = columnPadding

        // 计算可见按钮的宽度
        for (let i = 0; i < Math.min(visibleCount, props.actionColumns.length); i++) {
            const action = props.actionColumns[i]
            totalWidth += getButtonWidth(action.label) + buttonGap
        }

        // 加上更多按钮的宽度
        totalWidth += getButtonWidth(moreButtonLabel)

        return Math.max(totalWidth, 120) // 最小宽度120px
    } else {
        // 不需要更多按钮时：显示所有按钮
        let totalWidth = columnPadding

        props.actionColumns.forEach((action) => {
            totalWidth += getButtonWidth(action.label) + buttonGap
        })

        // 减去最后一个按钮的间距
        if (props.actionColumns.length > 0) {
            totalWidth -= buttonGap
        }

        return Math.max(totalWidth, 100) // 最小宽度100px
    }
})

// 初始化列配置
const initColumnsConfig = () => {
    if (columnsConfig.value.length === 0) {
        columnsConfig.value = props.tableColumns.map((col) => ({
            ...col,
            visible: col.visible !== false,
        }))
        originalColumnsConfig.value = JSON.parse(JSON.stringify(columnsConfig.value))
    }
    // 同步到可拖拽列表
    updateDraggableColumns()
}

// 更新可拖拽列列表
const updateDraggableColumns = () => {
    // 确保使用深拷贝，避免引用问题
    draggableColumns.value = columnsConfig.value.map((col) => ({
        ...col,
        visible: col.visible !== undefined ? col.visible : true,
    }))
}

// 选择变化
const handleSelectionChange = (selection) => {
    emit('selection-change', selection)
}

// 行点击
const handleRowClick = (row, column, event) => {
    emit('row-click', row, column, event)
}

// 刷新
const handleRefresh = () => {
    emit('refresh')
}

// 分页变化
const handlePaginationChange = (pagination) => {
    emit('pagination-change', pagination)
}

// 操作按钮点击
const handleAction = (action, row, index) => {
    // 如果按钮被禁用，则不执行操作
    const isDisabled =
        typeof action.disabled === 'function' ? action.disabled(row) : action.disabled
    if (isDisabled) {
        return
    }
    if (action.handler && typeof action.handler === 'function') {
        action.handler(row, index)
    } else {
        emit('action', action, row, index)
    }
}

// 下拉菜单操作
const handleDropdownAction = (cmd, row, index) => {
    handleAction(cmd.action, row, index)
}

// 密度切换
const handleDensityChange = (command) => {
    density.value = command
}

// 切换全选
const handleToggleAll = (val) => {
    draggableColumns.value.forEach((col) => {
        col.visible = val
    })
    // 同步到 columnsConfig
    syncColumnsConfig()
}

// 单个列的显隐变化
const handleColumnVisibleChange = (item, val) => {
    item.visible = val
    syncColumnsConfig()
}

// 拖拽结束，同步顺序
const handleDragEnd = () => {
    syncColumnsConfig()
}

// 同步 draggableColumns 到 columnsConfig
const syncColumnsConfig = () => {
    // 按照 draggableColumns 的顺序更新 columnsConfig
    const orderMap = new Map(draggableColumns.value.map((col, index) => [col.prop, index]))
    columnsConfig.value.sort((a, b) => {
        const orderA = orderMap.get(a.prop) ?? Infinity
        const orderB = orderMap.get(b.prop) ?? Infinity
        return orderA - orderB
    })
    // 更新 visible 状态
    draggableColumns.value.forEach((dragCol) => {
        const configCol = columnsConfig.value.find((c) => c.prop === dragCol.prop)
        if (configCol) {
            configCol.visible = dragCol.visible
        }
    })
    emit('column-change', columnsConfig.value)
}

// 重置列配置
const handleResetColumns = () => {
    columnsConfig.value = JSON.parse(JSON.stringify(originalColumnsConfig.value))
    updateDraggableColumns()
    emit('column-change', columnsConfig.value)
}

// 下拉菜单显示/隐藏变化
const handleDropdownVisibleChange = (visible) => {
    if (visible) {
        // 下拉菜单打开时，确保数据已初始化
        if (draggableColumns.value.length === 0) {
            initColumnsConfig()
        } else {
            // 如果已有数据，更新一下以保持同步
            updateDraggableColumns()
        }
    }
}

// 监听列配置变化，初始化
watch(
    () => props.tableColumns,
    () => {
        initColumnsConfig()
    },
    { immediate: true, deep: true },
)

// 暴露方法
defineExpose({
    tableRef,
    clearSelection: () => tableRef.value?.clearSelection(),
    toggleRowSelection: (row, selected) => tableRef.value?.toggleRowSelection(row, selected),
    toggleAllSelection: () => tableRef.value?.toggleAllSelection(),
})
</script>

<style scoped lang="scss">
.com-data-table-container {
    position: relative;
}

.com-data-table-container.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background: #fff;
    overflow: auto;
}

.com-data-table-container.is-fullscreen .data-table-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.com-data-table-container.is-fullscreen .data-table-card :deep(.el-card__body) {
    flex: 1;
    overflow: auto;
    padding: 10px 20px !important;
}

.data-table-card {
    margin-bottom: 10px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-header-left {
    flex: 1;
    display: flex;
    gap: 8px;
}

.table-header-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* 密度样式 */
.table-density-compact :deep(.el-table th),
.table-density-compact :deep(.el-table td) {
    padding: 8px 0;
}

.table-density-compact :deep(.el-table .cell) {
    font-size: 12px;
    line-height: 1.4;
}

.table-density-default :deep(.el-table th),
.table-density-default :deep(.el-table td) {
    padding: 12px 0;
}

.table-density-comfortable :deep(.el-table th),
.table-density-comfortable :deep(.el-table td) {
    padding: 16px 0;
}

.table-density-comfortable :deep(.el-table .cell) {
    font-size: 14px;
    line-height: 1.6;
}

/* 下拉菜单选中状态 */
:deep(.el-dropdown-menu__item.is-selected) {
    color: #409eff;
    font-weight: 500;
}

:deep(.el-dropdown-menu__item.is-selected::before) {
    content: '✓';
    margin-right: 4px;
}

/* 操作列按钮样式 */
:deep(.el-table__fixed-right) {
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);

    /* 减小fixed right操作列的水平padding */
    .el-table__cell:last-child {
        .cell {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
    }
}

/* 减小非fixed操作列的水平padding（操作列通常是最后一列） */
:deep(.el-table__body-wrapper),
:deep(.el-table__header-wrapper) {
    .el-table__body,
    .el-table__header {
        .el-table__row {
            .el-table__cell:last-child {
                .cell {
                    padding-left: 8px !important;
                    padding-right: 8px !important;
                }
            }
        }
    }
}

.setting-icon {
    cursor: pointer;
    font-size: 16px;
}

.column-setting-container {
    padding: 12px;
    min-width: 220px;
    max-height: 400px;
    display: flex;
    flex-direction: column;

    .column-setting-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
    }

    .empty-tip {
        padding: 20px;
        text-align: center;
        color: #909399;
        font-size: 14px;
    }
}

.draggable-container {
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;

    .column-setting-item {
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
        transition: all 0.2s ease;
        cursor: pointer;

        &:hover {
            background-color: #f0f9ff;
        }

        .column-setting-icon {
            color: #909399;
            cursor: move;
            transition: color 0.2s;

            &:hover {
                color: #409eff;
            }
        }
    }
}

/* 拖拽时的样式 */
:deep(.sortable-ghost),
:deep(.sortable-fallback) {
    opacity: 0.5;
    background-color: #f0f9ff !important;
}

:deep(.sortable-drag) {
    opacity: 0.9;
    background-color: #e0f2fe !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.sortable-chosen) {
    background-color: #e0f2fe !important;
}

.action-column-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;

    .el-button {
        margin-left: 0;
    }

    /* 修复el-dropdown悬停时的边框问题 */
    :deep(.el-dropdown) {
        display: inline-block;

        .el-button {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;

            &:hover,
            &:focus,
            &:active {
                border: none !important;
                outline: none !important;
                box-shadow: none !important;
            }
        }
    }
}

/* 隐藏el-dropdown的popper定位参考线和边框 */
:deep(.el-dropdown__popper) {
    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }

    .el-popper__arrow {
        display: none !important;

        &::before,
        &::after {
            display: none !important;
            content: none !important;
        }
    }
}

/* 修复下拉菜单的边框 */
:deep(.el-dropdown-menu) {
    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }
}

/* 确保操作列中的下拉按钮没有额外的边框或伪元素 */
.action-column-container :deep(.el-dropdown) {
    position: relative;

    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }

    .el-button {
        position: relative;
        border: none !important;
        outline: none !important;

        &::before,
        &::after {
            display: none !important;
            content: none !important;
        }

        &:hover::before,
        &:hover::after,
        &:focus::before,
        &:focus::after {
            display: none !important;
            content: none !important;
        }
    }
}

/* 修复表格单元格hover时可能显示的边框 */
:deep(.el-table__body-wrapper .el-table__row:hover) {
    .el-table__cell:last-child {
        .action-column-container {
            &::before,
            &::after {
                display: none !important;
                content: none !important;
            }
        }
    }
}
</style>
