/**
 * 列显示/隐藏指令
 * 用法: v-column-visible="'propName'" 或 v-column-visible="propName"
 */
import type { Directive } from 'vue'

interface ColumnVisibleBinding {
  value: string // prop 或 label
  arg?: string
}

export const vColumnVisible: Directive<HTMLElement, string> = {
  mounted(el, binding) {
    // 获取 isColumnVisible 函数（需要从父组件注入或通过其他方式获取）
    const isColumnVisible = (el as any).__isColumnVisible || (() => true)
    const propOrLabel = binding.value
    
    if (!isColumnVisible(propOrLabel)) {
      // 隐藏该列（通过隐藏父元素）
      const columnElement = el.closest('.el-table-column') || el.parentElement
      if (columnElement) {
        (columnElement as HTMLElement).style.display = 'none'
      }
    }
  },
  updated(el, binding) {
    const isColumnVisible = (el as any).__isColumnVisible || (() => true)
    const propOrLabel = binding.value
    const columnElement = el.closest('.el-table-column') || el.parentElement
    
    if (columnElement) {
      if (isColumnVisible(propOrLabel)) {
        (columnElement as HTMLElement).style.display = ''
      } else {
        (columnElement as HTMLElement).style.display = 'none'
      }
    }
  }
}

