<template>
  <div class="table-column-control">
    <template v-if="slots.trigger">
      <el-button
        :type="triggerType"
        :size="triggerSize"
        :circle="triggerCircle"
        :link="triggerLink"
        @click="visible = true"
      >
        <slot name="trigger"></slot>
      </el-button>
    </template>
    <template v-else>
      <el-tooltip class="item" effect="dark" content="列设置" placement="top">
        <el-button
          circle
          :type="triggerType"
          :size="triggerSize"
          style="margin-left: 0;"
          @click="visible = true"
        >
          <el-icon><Menu /></el-icon>
        </el-button>
      </el-tooltip>
    </template>
    
    <el-dialog
      v-model="visible"
      title="列显隐设置"
      :width="props.dialogWidth"
      append-to-body
      :close-on-click-modal="false"
    >
      <div class="column-control-content">
        <div class="column-control-body">
          <div class="column-switch-group" ref="sortableContainerRef">
            <div
              v-for="column in sortedColumns"
              :key="column.prop || column.label"
              class="column-item"
              :data-key="column.prop || column.label"
            >
              <div class="column-drag-handle">
                <el-icon class="drag-icon"><Rank /></el-icon>
              </div>
              <span class="column-label">{{ column.label }}</span>
              <el-switch
                v-model="columnVisibleMap[column.prop || column.label]"
                :disabled="!!column.fixed || column.alwaysShow"
                @change="handleSwitchChange(column.prop || column.label, $event)"
              />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick, useSlots, type Ref } from 'vue'
import { useRoute } from 'vue-router'
import { Menu, Rank } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import { useTableColumns, type ColumnConfig } from '/@/composables/useTableColumns'
import Sortable from 'sortablejs'
import { getUserTableConfig, saveUserTableConfig, updateUserTableConfig, getAllTableConfigsFromLocal, saveAllTableConfigsToLocal } from '/@/api/admin/usertable'

const slots = useSlots()
const route = useRoute()

interface Column {
  prop?: string
  label: string
  fixed?: boolean | 'left' | 'right'
  alwaysShow?: boolean // 始终显示的列，不可隐藏
  [key: string]: any
}

interface Props {
  columns?: Column[] // 手动配置的列（可选，如果提供了 tableRef 则自动提取）
  tableRef?: Ref<TableInstance | undefined> // el-table 的 ref，用于自动提取列配置
  modelValue?: string[] // 当前显示的列
  storageKey?: string // localStorage 存储的 key，用于持久化
  triggerType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  triggerSize?: 'large' | 'default' | 'small'
  triggerCircle?: boolean
  triggerText?: string
  triggerLink?: boolean
  dialogWidth?: string // 对话框宽度
  // 自动提取时的配置选项
  autoExtractOptions?: {
    defaultHidden?: string[]
    alwaysShow?: string[]
    columnMap?: Record<string, Partial<ColumnConfig>>
  }
}

const props = withDefaults(defineProps<Props>(), {
  triggerType: 'default',
  triggerSize: 'default',
  triggerCircle: false,
  triggerText: '',
  triggerLink: false,
  dialogWidth: '500px'
})

const emit = defineEmits<{
  'update:modelValue': [value: string[]]
  'change': [value: string[]]
  'order-change': [value: string[]]
}>()

const visible = ref(false)
const checkedColumns = ref<string[]>([])
const columnVisibleMap = ref<Record<string, boolean>>({})
const sortableContainerRef = ref<HTMLElement>()
const columnOrder = ref<string[]>([])
let sortableInstance: any = null

// 根据路由自动生成 storageKey（如果没有提供）
const getStorageKey = (): string => {
  if (props.storageKey) {
    return props.storageKey
  }
  // 使用路由路径生成 key，移除开头的 / 并替换 / 为 -
  const routePath = route.path.replace(/^\//, '').replace(/\//g, '-')
  return `table-columns-${routePath}`
}

// 获取排序配置的 storageKey
const getOrderStorageKey = (): string => {
  return `${getStorageKey()}-order`
}

// 如果提供了 tableRef，使用自动提取；否则使用手动配置的 columns
const tableColumnsResult = props.tableRef
  ? useTableColumns(props.tableRef, getStorageKey(), props.autoExtractOptions)
  : { 
      columns: computed(() => []), 
      visibleColumns: computed(() => []), 
      updateVisibleColumns: () => {}, 
      refreshColumns: () => {}, 
      isColumnVisible: () => true 
    }

const { 
  columns: autoColumns, 
  visibleColumns: autoVisibleColumns, 
  updateVisibleColumns: updateAutoVisibleColumns, 
  refreshColumns: refreshAutoColumns, 
  isColumnVisible: autoIsColumnVisible 
} = tableColumnsResult

// 实际使用的列配置
const actualColumns = computed(() => {
  const result = props.tableRef && autoColumns.value.length > 0
    ? autoColumns.value
    : props.columns || []
  return result
})

// 排序后的列配置（排除序号和操作列）
const sortedColumns = computed(() => {
  const columns = actualColumns.value.filter(col => {
    const key = col.prop || col.label
    // 排除序号列（type === 'index'）和操作列（固定右侧或 alwaysShow）
    return col.type !== 'index' && !(col.fixed === 'right' && col.alwaysShow) && key !== '操作'
  })
  
  // 如果有保存的排序顺序，按照顺序排序
  if (columnOrder.value.length > 0) {
    const orderedColumns: ColumnConfig[] = []
    const unorderedColumns: ColumnConfig[] = []
    
    // 先按照保存的顺序添加列
    columnOrder.value.forEach(key => {
      const col = columns.find(c => (c.prop || c.label) === key)
      if (col) {
        orderedColumns.push(col)
      }
    })
    
    // 添加未在排序列表中的列（新增的列）
    columns.forEach(col => {
      const key = col.prop || col.label
      if (!columnOrder.value.includes(key)) {
        unorderedColumns.push(col)
      }
    })
    
    return [...orderedColumns, ...unorderedColumns]
  }
  
  return columns
})

// 获取所有列（包括固定列和 alwaysShow 列）
const getAllColumns = (): string[] => {
  return actualColumns.value.map(col => col.prop || col.label)
}

// 初始化选中的列
const initCheckedColumns = async () => {
  // 如果 actualColumns 为空，无法初始化
  if (actualColumns.value.length === 0) {
    return
  }
  
  const storageKey = getStorageKey()
  
  // 优先从本地缓存获取配置
  try {
    const allConfigs = getAllTableConfigsFromLocal()
    const currentConfig = allConfigs[storageKey]
    
    if (currentConfig && currentConfig.visibleColumns) {
      const savedColumns = currentConfig.visibleColumns
      const allSelectableColumns = actualColumns.value
        .filter(col => !col.alwaysShow && !col.fixed)
        .map(col => col.prop || col.label)
      
      // 验证保存的列是否仍然存在
      const validColumns = savedColumns.filter((col: string) => allSelectableColumns.includes(col))
      
      // 使用保存的列配置（即使数量少于所有列，也使用保存的配置）
      // 但确保包含固定列和 alwaysShow 列
      const fixedAndAlwaysShow = actualColumns.value
        .filter(col => col.alwaysShow || !!col.fixed)
        .map(col => col.prop || col.label)
      checkedColumns.value = [...new Set([...validColumns, ...fixedAndAlwaysShow])]
      // 同步到外部 modelValue
      emit('update:modelValue', checkedColumns.value)
      return // 已从API加载，直接返回
    }
  } catch (error) {
    // API失败，回退到localStorage
  }
  
  // 回退到本地统一存储读取配置
  const allConfigs = getAllTableConfigsFromLocal()
  const currentConfig = allConfigs[storageKey]
  
  if (currentConfig && currentConfig.visibleColumns) {
    const savedColumns = currentConfig.visibleColumns
    const allSelectableColumns = actualColumns.value
      .filter(col => !col.alwaysShow && !col.fixed)
      .map(col => col.prop || col.label)
    
    // 验证保存的列是否仍然存在
    const validColumns = savedColumns.filter((col: string) => allSelectableColumns.includes(col))
    
    // 使用保存的列配置（即使数量少于所有列，也使用保存的配置）
    // 但确保包含固定列和 alwaysShow 列
    const fixedAndAlwaysShow = actualColumns.value
      .filter(col => col.alwaysShow || !!col.fixed)
      .map(col => col.prop || col.label)
    checkedColumns.value = [...new Set([...validColumns, ...fixedAndAlwaysShow])]
    // 同步到外部 modelValue
    emit('update:modelValue', checkedColumns.value)
    return // 已从本地存储加载，直接返回
  }
  
  // 如果 localStorage 中没有保存的配置，使用其他方式初始化
  if (props.modelValue && props.modelValue.length > 0) {
    checkedColumns.value = [...props.modelValue]
  } else if (props.tableRef && autoVisibleColumns.value.length > 0) {
    // 使用自动提取的可见列
    const allSelectableColumns = actualColumns.value
      .filter(col => !col.alwaysShow && !col.fixed)
      .map(col => col.prop || col.label)
    
    // 如果保存的列数量少于所有列，默认全部选中
    if (autoVisibleColumns.value.length < allSelectableColumns.length) {
      const fixedAndAlwaysShow = actualColumns.value
        .filter(col => col.alwaysShow || !!col.fixed)
        .map(col => col.prop || col.label)
      checkedColumns.value = [...new Set([...allSelectableColumns, ...fixedAndAlwaysShow])]
    } else {
      // 使用保存的列，但确保包含固定列和 alwaysShow 列
      const fixedAndAlwaysShow = actualColumns.value
        .filter(col => col.alwaysShow || !!col.fixed)
        .map(col => col.prop || col.label)
      checkedColumns.value = [...new Set([...autoVisibleColumns.value, ...fixedAndAlwaysShow])]
    }
  } else {
    // 没有 storageKey，默认全部选中
    checkedColumns.value = getAllColumns()
  }
}

// 初始化列可见性映射
const initColumnVisibleMap = () => {
  const map: Record<string, boolean> = {}
  actualColumns.value.forEach(col => {
    const key = col.prop || col.label
    // 固定列和 alwaysShow 列始终为 true
    if (col.fixed || col.alwaysShow) {
      map[key] = true
    } else {
      // 其他列根据 checkedColumns 判断
      map[key] = checkedColumns.value.includes(key)
    }
  })
  columnVisibleMap.value = map
}

// 初始化列排序顺序
const initColumnOrder = async () => {
  const storageKey = getStorageKey()
  
  // 先获取所有可排序的列（不依赖 sortedColumns computed）
  const allSortableColumns = actualColumns.value.filter(col => {
    const key = col.prop || col.label
    return col.type !== 'index' && !(col.fixed === 'right' && col.alwaysShow) && key !== '操作'
  })
  const validColumns = allSortableColumns.map(col => col.prop || col.label)
  
  // 优先从本地缓存获取配置
  try {
    const allConfigs = getAllTableConfigsFromLocal()
    const currentConfig = allConfigs[storageKey]
    
    if (currentConfig && currentConfig.columnOrder) {
      const savedOrder = currentConfig.columnOrder
      // 验证保存的列是否仍然存在
      columnOrder.value = savedOrder.filter((key: string) => validColumns.includes(key))
      
      // 添加新列到排序列表末尾
      validColumns.forEach(key => {
        if (!columnOrder.value.includes(key)) {
          columnOrder.value.push(key)
        }
      })
      return // 已从API加载，直接返回
    }
  } catch (error) {
    // API失败，回退到localStorage
  }
  
  // 回退到本地统一存储
  const allConfigs = getAllTableConfigsFromLocal()
  const currentConfig = allConfigs[storageKey]
  
  if (currentConfig && currentConfig.columnOrder) {
    const savedOrder = currentConfig.columnOrder
    // 验证保存的列是否仍然存在
    columnOrder.value = savedOrder.filter((key: string) => validColumns.includes(key))
    
    // 添加新列到排序列表末尾
    validColumns.forEach(key => {
      if (!columnOrder.value.includes(key)) {
        columnOrder.value.push(key)
      }
    })
  } else {
    // 首次使用，使用默认顺序
    columnOrder.value = [...validColumns]
  }
}

// 保存列配置（同时保存 visibleColumns 和 columnOrder）
const saveColumnConfig = async () => {
  const storageKey = getStorageKey()
  const selectableColumns = checkedColumns.value.filter(col => {
    const column = actualColumns.value.find(c => (c.prop || c.label) === col)
    return column && !column.alwaysShow && !column.fixed
  })
  
  // 优先保存到API，同时保存 visibleColumns 和 columnOrder
  try {
    await updateUserTableConfig(storageKey, {
      visibleColumns: selectableColumns,
      columnOrder: columnOrder.value.length > 0 ? columnOrder.value : []
    })
    // updateUserTableConfig 内部已经更新了本地缓存，这里不需要再操作
  } catch (error) {
    // API失败，只保存到本地统一存储
    const allConfigs = getAllTableConfigsFromLocal()
    allConfigs[storageKey] = {
      visibleColumns: selectableColumns,
      columnOrder: columnOrder.value
    }
    saveAllTableConfigsToLocal(allConfigs)
  }
}

// 保存列排序顺序（同时保存 visibleColumns 和 columnOrder）
const saveColumnOrder = async () => {
  const storageKey = getStorageKey()
  const selectableColumns = checkedColumns.value.filter(col => {
    const column = actualColumns.value.find(c => (c.prop || c.label) === col)
    return column && !column.alwaysShow && !column.fixed
  })
  
  if (columnOrder.value.length > 0) {
    // 优先保存到API，同时保存 visibleColumns 和 columnOrder
    try {
      await updateUserTableConfig(storageKey, {
        visibleColumns: selectableColumns,
        columnOrder: columnOrder.value
      })
      // updateUserTableConfig 内部已经更新了本地缓存，这里不需要再操作
    } catch (error) {
      // API失败，只保存到本地统一存储
      const allConfigs = getAllTableConfigsFromLocal()
      allConfigs[storageKey] = {
        visibleColumns: selectableColumns,
        columnOrder: columnOrder.value
      }
      saveAllTableConfigsToLocal(allConfigs)
    }
  }
}

// 初始化拖拽排序
const initSortable = () => {
  if (!sortableContainerRef.value) {
    return
  }
  
  // 销毁旧的实例
  if (sortableInstance) {
    sortableInstance.destroy()
    sortableInstance = null
  }
  
  // 等待 DOM 更新完成
  nextTick(() => {
    if (!sortableContainerRef.value) return
    
    // 创建新的拖拽实例（整行可拖拽）
    sortableInstance = Sortable.create(sortableContainerRef.value, {
      animation: 150,
      ghostClass: 'column-item-ghost',
      dragClass: 'column-item-drag',
      forceFallback: false,
      filter: '.el-switch', // 排除开关元素，避免拖拽时触发开关
      preventOnFilter: false,
      onEnd: (evt) => {
        const { newIndex, oldIndex } = evt
        if (newIndex !== undefined && oldIndex !== undefined && newIndex !== oldIndex) {
          // 获取当前排序后的列
          const currentOrder = sortedColumns.value.map(col => col.prop || col.label)
          
          // 更新列顺序
          const movedKey = currentOrder[oldIndex]
          currentOrder.splice(oldIndex, 1)
          currentOrder.splice(newIndex, 0, movedKey)
          
          // 更新 columnOrder
          columnOrder.value = currentOrder
          
          // 保存排序顺序
          saveColumnOrder()
          
          // 触发 change 事件，通知父组件列顺序已改变
          emit('order-change', [...columnOrder.value])
        }
      }
    })
  })
}

// 监听弹窗打开，触发列配置重新提取
watch(visible, (newVal) => {
  if (newVal) {
    // 弹窗打开时，确保选中状态正确初始化（但不重置用户已保存的设置）
    if (actualColumns.value.length > 0) {
      // 只有在 checkedColumns 为空时才初始化，避免覆盖用户已保存的设置
      if (checkedColumns.value.length === 0) {
        initCheckedColumns()
      } else {
        // 如果已有选中状态，只确保固定列和 alwaysShow 列在选中列表中
        const fixedAndAlwaysShow = actualColumns.value
          .filter(col => col.alwaysShow || !!col.fixed)
          .map(col => col.prop || col.label)
        const currentChecked = checkedColumns.value
        const missingFixed = fixedAndAlwaysShow.filter(col => !currentChecked.includes(col))
        if (missingFixed.length > 0) {
          checkedColumns.value = [...currentChecked, ...missingFixed]
        }
      }
      // 更新列可见性映射
      initColumnVisibleMap()
      // 初始化列排序顺序（只在 columnOrder 为空时初始化，避免覆盖已保存的配置）
      if (columnOrder.value.length === 0) {
        initColumnOrder()
      }
      // 初始化拖拽排序
      nextTick(() => {
        initSortable()
      })
    }
  } else {
    // 弹窗关闭时销毁拖拽实例
    if (sortableInstance) {
      sortableInstance.destroy()
      sortableInstance = null
    }
  }
  if (newVal && props.tableRef) {
    // 尝试多种方式获取表格实例
    const getTableInstance = (): TableInstance | null => {
      // 方法1: 直接从 props.tableRef.value 获取
      if (props.tableRef?.value) {
        return props.tableRef.value
      }
      
      // 方法2: 尝试从 props.tableRef 本身获取（可能是直接的 ref 对象）
      if ((props.tableRef as any).value) {
        return (props.tableRef as any).value
      }
      
      // 方法3: 如果 props.tableRef 本身就是表格实例（不应该发生，但作为备用）
      if ((props.tableRef as any).$el) {
        return props.tableRef as any
      }
      
      return null
    }
    
    // 如果 tableRef.value 已经有值，直接提取
    const tableInstance = getTableInstance()
    if (tableInstance) {
      const tableEl = (tableInstance as any).$el
      if (tableEl) {
        nextTick(() => {
          refreshAutoColumns()
        })
        return
      }
    }
    
    // 等待 tableRef.value 有值后再提取
    let waitCount = 0
    const maxWaitCount = 50 // 最多等待 5 秒（50 * 100ms）
    let waitTimer: ReturnType<typeof setTimeout> | null = null
    
    const waitForTableRef = () => {
      // 尝试获取表格实例
      const tableInstance = getTableInstance()
      if (tableInstance) {
        const tableEl = (tableInstance as any).$el
        if (tableEl) {
          nextTick(() => {
            refreshAutoColumns()
            
            // 如果还是没有数据，多次重试
            let retryCount = 0
            const maxRetries = 10
            const retryInterval = setInterval(() => {
              retryCount++
              refreshAutoColumns()
              if (actualColumns.value.length > 0 || retryCount >= maxRetries) {
                clearInterval(retryInterval)
              }
            }, 200)
          })
          return // 成功获取，退出
        }
      }
      
      // 继续等待
      waitCount++
      if (waitCount < maxWaitCount) {
        waitTimer = setTimeout(waitForTableRef, 100)
      } else {
        // 即使超时，也尝试提取一次（可能表格已经渲染了，只是 ref 没有正确绑定）
        refreshAutoColumns()
      }
    }
    
    // 延迟一下，确保表格已渲染
    setTimeout(() => {
      waitForTableRef()
    }, 300)
    
    // 清理函数：弹窗关闭时清除等待定时器
    return () => {
      if (waitTimer) {
        clearTimeout(waitTimer)
        waitTimer = null
      }
    }
  }
})

// 监听 tableRef.value 的变化，当它被赋值时触发列配置提取
if (props.tableRef) {
  // 尝试多种方式监听 tableRef.value 的变化
  watch(() => {
    // 尝试多种方式获取 tableRef.value
    if (props.tableRef?.value) {
      return props.tableRef.value
    }
    if ((props.tableRef as any).value) {
      return (props.tableRef as any).value
    }
    return null
  }, (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      // 延迟一下，确保表格完全渲染
      setTimeout(() => {
        nextTick(() => {
          refreshAutoColumns()
        })
      }, 200)
    }
  }, { immediate: true })
}

// 暴露给父组件使用
defineExpose({
  isColumnVisible: autoIsColumnVisible,
  visibleColumns: autoVisibleColumns,
  refreshColumns: refreshAutoColumns
})

// 开关变化处理
const handleSwitchChange = (columnKey: string, value: boolean) => {
  // 更新 columnVisibleMap
  columnVisibleMap.value[columnKey] = value
  
  // 更新 checkedColumns
  if (value) {
    // 开启：添加到选中列表
    if (!checkedColumns.value.includes(columnKey)) {
      checkedColumns.value.push(columnKey)
    }
  } else {
    // 关闭：从选中列表移除
    checkedColumns.value = checkedColumns.value.filter(col => col !== columnKey)
  }
  
  // 确保固定列和 alwaysShow 列始终在选中列表中
  const fixedAndAlwaysShow = actualColumns.value
    .filter(col => col.alwaysShow || !!col.fixed)
    .map(col => col.prop || col.label)
  const finalValue = [...new Set([...checkedColumns.value, ...fixedAndAlwaysShow])]
  
  // 立即应用更改
  emit('update:modelValue', finalValue)
  emit('change', finalValue)
  
  // 如果使用自动提取，同步更新（只更新可选择的列）
  if (props.tableRef) {
    const selectableValue = finalValue.filter(col => {
      const column = actualColumns.value.find(c => (c.prop || c.label) === col)
      return column && !column.alwaysShow && !column.fixed
    })
    updateAutoVisibleColumns(selectableValue)
  } else {
    // 保存到API和本地统一存储（只保存可选择的列）
    const storageKey = getStorageKey()
    const selectableValue = finalValue.filter(col => {
      const column = actualColumns.value.find(c => (c.prop || c.label) === col)
      return column && !column.alwaysShow && !column.fixed
    })
    // 异步保存到API
    saveColumnConfig()
    // saveColumnConfig 内部已经更新了本地缓存，这里不需要再操作
  }
}

// 列变化处理（实时生效）- 保留用于兼容性
const handleColumnChange = (value: string[]) => {
  // 确保固定列和 alwaysShow 列始终在选中列表中
  const fixedAndAlwaysShow = actualColumns.value
    .filter(col => col.alwaysShow || !!col.fixed)
    .map(col => col.prop || col.label)
  const finalValue = [...new Set([...value, ...fixedAndAlwaysShow])]
  
  // 立即应用更改
  emit('update:modelValue', finalValue)
  emit('change', finalValue)
  
  // 如果使用自动提取，同步更新（只更新可选择的列）
  if (props.tableRef) {
    const selectableValue = finalValue.filter(col => {
      const column = actualColumns.value.find(c => (c.prop || c.label) === col)
      return column && !column.alwaysShow && !column.fixed
    })
    updateAutoVisibleColumns(selectableValue)
  } else {
    // 保存到API和本地统一存储（只保存可选择的列）
    const storageKey = getStorageKey()
    const selectableValue = finalValue.filter(col => {
      const column = actualColumns.value.find(c => (c.prop || c.label) === col)
      return column && !column.alwaysShow && !column.fixed
    })
    // 异步保存到API
    saveColumnConfig()
    // saveColumnConfig 内部已经更新了本地缓存，这里不需要再操作
  }
}

// 监听外部 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  // 只有在外部传入的值与当前值不同时才更新，避免覆盖已加载的配置
  if (newVal && newVal.length > 0) {
    const currentSorted = [...checkedColumns.value].sort()
    const newSorted = [...newVal].sort()
    if (JSON.stringify(currentSorted) !== JSON.stringify(newSorted)) {
      // 检查是否是从本地统一存储加载的配置
      const storageKey = getStorageKey()
      const allConfigs = getAllTableConfigsFromLocal()
      const currentConfig = allConfigs[storageKey]
      // 如果 checkedColumns 为空，或者没有保存的配置，才使用外部传入的值
      if (checkedColumns.value.length === 0 || !currentConfig) {
        checkedColumns.value = [...newVal]
        initColumnVisibleMap()
      }
    }
  }
}, { immediate: false })

// 初始化
onMounted(() => {
  // 等待 actualColumns 准备好
  nextTick(() => {
    // 优先从 localStorage 加载配置
    if (actualColumns.value.length > 0) {
      initCheckedColumns()
      initColumnVisibleMap()
      initColumnOrder()
      
      // 如果外部传入了 modelValue，且 checkedColumns 为空，才使用外部传入的值
      if (props.modelValue && props.modelValue.length > 0 && checkedColumns.value.length === 0) {
        checkedColumns.value = [...props.modelValue]
        initColumnVisibleMap()
      }
    } else {
      // 如果 actualColumns 为空，等待它准备好
      // 使用 nextTick 确保所有函数都已定义
      nextTick(() => {
        const unwatch = watch(actualColumns, (newColumns) => {
          if (newColumns.length > 0) {
            initCheckedColumns()
            initColumnVisibleMap()
            initColumnOrder()
            unwatch() // 停止监听
          }
        }, { immediate: true })
      })
    }
  })
})
</script>

<style lang="scss" scoped>
.table-column-control {
  display: inline-block;
}

.column-control-content {
  .column-control-body {
    margin-bottom: 12px;
    
    .column-switch-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
    
    .column-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 4px;
      transition: all 0.2s;
      cursor: move;
      width: 100%;
      box-sizing: border-box;
      user-select: none;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      &:active {
        cursor: grabbing;
      }
      
      &.sortable-ghost {
        opacity: 0.5;
        background-color: #e6f7ff;
      }
      
      &.sortable-drag {
        opacity: 0.8;
      }
      
      .column-drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        pointer-events: none; // 让图标不阻止拖拽
        
        .drag-icon {
          font-size: 18px;
        }
      }
      
      .column-label {
        font-size: 14px;
        color: #606266;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none; // 让文本不阻止拖拽
      }
      
      // 开关元素可以正常交互
      .el-switch {
        pointer-events: auto;
        cursor: pointer;
      }
    }
    
    .column-item-ghost {
      opacity: 0.5;
      background-color: #e6f7ff;
    }
    
    .column-item-drag {
      opacity: 0.8;
    }
  }
  
  .column-control-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #ebeef5;
  }
}
</style>



