<template>
  <div class="table-container">
    <div class="table-toolbar" v-if="showColumnSetting">
      <!-- 气泡确认框 -->
      <el-popover
        v-model:visible="columnSettingVisible"
        placement="bottom-end"
        :width="320"
        trigger="click"
      >
        <template #reference> 
            <el-button :icon="Setting" circle  /> 
        </template>

        <div class="column-setting-content">
          <!-- 操作栏 -->
          <div class="setting-header">
            <span class="setting-title">列设置</span>
            <el-button type="primary" size="small" text @click="handleReset">
              重置
            </el-button>
          </div>

          <!-- 拖拽列表 -->
          <div class="column-list">
            <draggable
              :list="localColumns"
              item-key="prop"
              handle=".drag-handle"
              :animation="200"
              ghost-class="ghost"
              @end="handleDragEnd"
            >
              <template #item="{ element }">
                <div class="column-item">
                  <el-icon class="drag-handle"><Rank /></el-icon>
                  <el-checkbox
                    v-model="element.visible"
                    :disabled="element.fixed"
                    @change="handleVisibleChange"
                  >
                    {{ element.label }}
                  </el-checkbox>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </el-popover>
    </div>
    <el-table
      ref="tableRef"
      style="width: 100%; flex: 1"
      :data="enableClientFilter ? filteredTableData : tableData"
      :row-key="rowKey"
      :tree-props="treeProps"
      :border="border"
      :highlight-current-row="highlightCurrentRow"
      v-loading="loading"
      v-bind="$attrs"
      @row-click="handleRowClick"
      @row-contextmenu="handleRowContextmenu"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
    >
      <!-- 勾选列 -->
      <el-table-column v-if="showSelection" type="selection" width="55" align="center" />

      <!-- 动态表头列 -->
      <template v-for="(column, index) in finalColumns" :key="index">
        <el-table-column
          v-if="column.type === 'index'"
          type="index"
          :label="column.label"
          :width="column.width || 60"
          :align="column.align || 'center'"
        />
        <el-table-column
          v-else-if="!column.slotName && column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align || 'left'"
          :sortable="column.sortable"
          :column-key="column.prop"
        >
          <template #header>
            <div class="table-header-cell">
              <div class="table-header-label">
                <span>{{ column.label }}</span>
                <template v-if="column.filters && column.filters.length > 0">
                  <el-dropdown
                    trigger="click"
                    @command="(command: any) => handleFilterCommand(command, column)"
                  >
                    <span class="filter-trigger">
                      <el-icon :class="{ 'is-active': filterStates[column.prop!]?.length }">
                        <Filter />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-for="item in column.filters"
                          :key="item.value"
                          :command="item.value"
                          :divided="filterStates[column.prop!]?.includes(item.value)"
                        >
                          {{ item.text }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </div>
              <el-input
                v-if="column.filterable"
                v-model="filterStates[column.prop!]"
                size="small"
                :placeholder="column.filterPlaceholder || '筛选'"
                clearable
                @change="handleFilterInput(column)"
                @clear="handleFilterClear(column)"
                class="header-filter-input"
              />
            </div>
          </template>
          <template v-if="column.isNumber" #default="{ row }">
            <span>{{ formatDecimalTruncate(row[column.prop]) }}</span>
          </template>
          <template v-else-if="column.options" #default="{ row }">
            <span>{{ getOptionLabel(column.options, row[column.prop]) }}</span>
          </template>
        </el-table-column>

        <!-- 具名插槽列 -->
        <el-table-column
          v-else
          :label="column.label"
          :width="column.width"
          :align="column.align || 'left'"
        >
          <template #default="{ row }">
            <slot :name="column.slotName" :row="row" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, reactive } from 'vue'
import { Setting, Rank, Filter } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import type { TableInstance } from 'element-plus'
import { formatDecimalTruncate } from '@/utils/formatDecimal'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'

// 筛选状态管理
const filterStates = reactive<Record<string, any>>({})

// 根据选项配置获取标签
const getOptionLabel = (options: { label: string; value: string | number }[], value: any): string => {
  if (value === null || value === undefined) return ''
  const option = options.find((opt) => opt.value === value)
  return option?.label || String(value)
}

// 定义表格列配置接口
interface TableColumn {
  prop?: string
  type?: string
  label: string
  width?: string | number
  align?: 'left' | 'center' | 'right'
  slotName?: string
  sortable?: boolean
  isNumber?: boolean
  options?: { label: string; value: string | number }[]
  visible?: boolean
  fixed?: boolean
  sortOrder?: number
  // 表头筛选器相关属性
  filters?: { text: string; value: any }[]
  filterMethod?: (value: any, row: any, column: any) => boolean
  filterable?: boolean
  filterPlaceholder?: string
}

// 定义表格组件属性接口
interface Props {
  tableData: any[]
  rowKey?: string
  treeProps?: {
    children: string
  }
  columns?: TableColumn[]
  border?: boolean
  highlightCurrentRow?: boolean
  loading?: boolean
  showSelection?: boolean
  showColumnSetting?: boolean
  columnSettingStorageKey?: string
  enableClientFilter?: boolean // 是否启用客户端筛选
}

const props = withDefaults(defineProps<Props>(), {
  border: true,
  highlightCurrentRow: true,
  loading: false,
  showSelection: false,
  showColumnSetting: true, // 默认开启列设置
  columnSettingStorageKey: '',
  enableClientFilter: true, // 默认开启客户端筛选
})

// 获取过滤后的数据
const filteredTableData = computed(() => {
  if (!props.enableClientFilter || Object.keys(filterStates).length === 0) {
    return props.tableData
  }
  
  return props.tableData.filter((row) => {
    for (const prop in filterStates) {
      const filterValue = filterStates[prop]
      if (Array.isArray(filterValue) && filterValue.length > 0) {
        if (!filterValue.includes(row[prop])) {
          return false
        }
      } else if (filterValue && typeof filterValue === 'string') {
        const cellValue = String(row[prop] || '').toLowerCase()
        if (!cellValue.includes(filterValue.toLowerCase())) {
          return false
        }
      }
    }
    return true
  })
})

// 定义组件抛出的事件
const emit = defineEmits<{
  (e: 'row-click', row: any): void
  (e: 'row-contextmenu', row: any, column: any, event: MouseEvent): void
  (e: 'selection-change', rows: any[]): void
  (e: 'current-change', row: any): void
  (e: 'filter-change', filters: { [key: string]: any }): void
}>()

// 获取路由和用户 Store
const route = useRoute()
const userStore = useUserStore()

// 生成缓存 key
const getCacheKey = () => {
  const baseKey = props.columnSettingStorageKey || String(route.name || route.path)
  const userId = String(userStore.userInfo?.id || 'guest')
  return `table-column-setting-${baseKey}-${userId}`
}

// 气泡确认框显示状态
const columnSettingVisible = ref(false)

// 本地列配置副本
const localColumns = ref<TableColumn[]>([])

// 计算最终使用的列配置
const finalColumns = computed(() => {
  // 当 showColumnSetting 开启时，始终使用 localColumns
  if (props.showColumnSetting && localColumns.value.length > 0) {
    return localColumns.value.filter((col) => col.visible !== false)
  }
  return props.columns || []
})

// 初始化列配置（从缓存或默认值）
const initColumns = () => {
  if (!props.columns || props.columns.length === 0) {
    localColumns.value = []
    return
  }

  const cacheKey = getCacheKey()
  const cached = localStorage.getItem(cacheKey)

  if (cached) {
    try {
      const cachedConfig = JSON.parse(cached)
      // 按 sortOrder 排序
      cachedConfig.sort((a: any, b: any) => (a.sortOrder || 0) - (b.sortOrder || 0))

      // 合并缓存和原始配置，保持缓存的顺序
      localColumns.value = cachedConfig.map((cached: any) => {
        const originalCol = props.columns?.find((c) => c.prop === cached.prop)
        if (originalCol) {
          return { ...originalCol, ...cached }
        }
        return null
      }).filter(Boolean)
    } catch {
      // 解析失败，使用默认配置
      localColumns.value = props.columns.map((col) => ({
        ...col,
        visible: col.visible !== false,
        fixed: col.fixed || false,
      }))
    }
  } else {
    // 无缓存，使用默认配置
    localColumns.value = props.columns.map((col) => ({
      ...col,
      visible: col.visible !== false,
      fixed: col.fixed || false,
    }))
  }
}

// 保存配置到 localStorage
const saveToStorage = () => {
  const config = localColumns.value.map((col, index) => ({
    prop: col.prop,
    visible: col.visible,
    label: col.label,
    width: col.width,
    slotName: col.slotName,
    sortOrder: index,
  }))
  localStorage.setItem(getCacheKey(), JSON.stringify(config))
}

// 处理可见性变化
const handleVisibleChange = () => {
  saveToStorage()
}

// 处理拖拽结束
const handleDragEnd = () => {
  saveToStorage()
}

// 重置为默认配置
const handleReset = () => {
  localColumns.value = props.columns.map((col) => ({
    ...col,
    visible: col.visible !== false,
    fixed: col.fixed || false,
  }))
  localStorage.removeItem(getCacheKey())
  columnSettingVisible.value = false
}

// 监听 columns 变化
watch(
  () => props.columns,
  (newColumns) => {
    if (newColumns && newColumns.length > 0) {
      // 只有在本地列为空时才初始化（不要覆盖已加载的缓存）
      if (localColumns.value.length === 0) {
        initColumns()
      }
    }
  },
  { immediate: true }
)

// 组件挂载时初始化列配置
onMounted(() => {
  // 延迟初始化，确保 props.columns 已准备好
  setTimeout(() => {
    if (props.columns && props.columns.length > 0 && localColumns.value.length === 0) {
      initColumns()
    }
  }, 100)
})

// 处理勾选变化
const handleSelectionChange = (rows: any[]) => {
  emit('selection-change', rows)
}

// 处理当前行变化
const handleCurrentChange = (row: any) => {
  if (row === null || row === undefined) return
  emit('current-change', row)
}

const tableRef = ref<TableInstance>()

// 维护当前选中行状态
const selectedRow = ref<any>(null)

// 处理行点击事件
const handleRowClick = (row: any) => {
  if (!row) return
  if (selectedRow.value && selectedRow.value === row) {
    selectedRow.value = null
    tableRef.value?.setCurrentRow(null)
  } else {
    selectedRow.value = row
    tableRef.value?.setCurrentRow(row)
  }
  emit('row-click', selectedRow.value)
}

// 处理行右键菜单事件
const handleRowContextmenu = (row: any, column: any, event: MouseEvent) => {
  emit('row-contextmenu', row, column, event)
}

// 监听 tableData 变化
watch(
  () => props.tableData,
  () => {
    selectedRow.value = null
    tableRef.value?.setCurrentRow(null)
  },
  { deep: true },
)

// 处理下拉筛选命令
const handleFilterCommand = (command: any, column: TableColumn) => {
  const prop = column.prop!
  if (!filterStates[prop]) {
    filterStates[prop] = []
  }
  
  const index = filterStates[prop].indexOf(command)
  if (index > -1) {
    filterStates[prop].splice(index, 1)
  } else {
    filterStates[prop].push(command)
  }
  
  emit('filter-change', { ...filterStates })
}

// 处理输入筛选
const handleFilterInput = (column: TableColumn) => {
  emit('filter-change', { ...filterStates })
}

// 处理清除筛选
const handleFilterClear = (column: TableColumn) => {
  filterStates[column.prop!] = ''
  emit('filter-change', { ...filterStates })
}

// 暴露方法
defineExpose({
  clearCurrentRow: () => {
    selectedRow.value = null
    tableRef.value?.setCurrentRow(null)
  },
  setCurrentRow: (row: any) => {
    tableRef.value?.setCurrentRow(row)
  },
})
</script>

<style scoped lang="scss">
.table-container {
  width: 100%;
  height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;

    :deep(.el-button) {
      font-size: 18px;
    }
  }

  :deep(.el-table) {
    flex: 1;
    overflow: auto;
  }
}

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

    .setting-title {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
  }

  .column-list {
    max-height: 360px;
    overflow-y: auto;

    .column-item {
      display: flex;
      align-items: center;
      padding: 8px;
      margin-bottom: 4px;
      background: #f5f7fa;
      border-radius: 4px;
      transition: background-color 0.2s;

      &:hover {
        background: #ebeef5;
      }

      .drag-handle {
        margin-right: 10px;
        cursor: move;
        color: #909399;
        font-size: 14px;

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

      :deep(.el-checkbox) {
        flex: 1;
        font-size: 13px;
      }
    }

    .ghost {
      opacity: 0.5;
      background: #c6e2ff;
    }
  }
}

// 表头单元格样式
.table-header-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  
  .table-header-label {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .filter-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;
    
    &:hover {
      background: #f5f7fa;
    }
    
    .el-icon {
      font-size: 14px;
      color: #909399;
      
      &.is-active {
        color: #409eff;
      }
    }
  }
  
  .header-filter-input {
    width: 100%;
    // max-width: 140px;
    
    :deep(.el-input__wrapper) {
      padding: 0 8px;
      font-size: 12px;
      height: 26px;
    }
    
    :deep(.el-input__inner) {
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
