<template>
  <div class="base-table">
    <el-table
        v-bind="$attrs"
        :data="data"
        border
        stripe
        v-loading="loading"
        header-cell-class-name="table-header-gray"
    >
      <template v-for="col in visibleColumns" :key="col.prop">

        <el-table-column
            v-if="!col.slot"
            v-bind="col"
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth || '120'"
            :width="col.width"
            :fixed="col.fixed"
            show-overflow-tooltip
        />

        <el-table-column
            v-else
            v-bind="col"
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth || '120'"
            :width="col.width"
            :fixed="col.fixed"
        >
          <template #default="scope">
            <slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
          </template>
        </el-table-column>

      </template>

      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>

    <div v-if="showPagination" class="pagination-container">
      <el-pagination
          v-bind="paginationConfig"
          v-model:current-page="localPage"
          v-model:page-size="localLimit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { usePermissionStore } from '@/stores/permission'

// --- Props 定义 ---
const props = defineProps({
  // 数据源
  data: { type: Array, default: () => [] },
  // 列配置 (核心)
  columns: { type: Array as () => any[], required: true },
  // 页面编码 (用于权限隔离，如果列名全局唯一可不传，但建议传)
  pageCode: { type: String, default: '' },

  loading: { type: Boolean, default: false },
  total: { type: Number, default: 0 },
  showPagination: { type: Boolean, default: true },
  page: { type: Number, default: 1 },
  limit: { type: Number, default: 10 }
})

const emit = defineEmits(['update:page', 'update:limit', 'pagination'])

const permStore = usePermissionStore()

// --- 核心逻辑：计算当前可见的列 ---
const visibleColumns = computed(() => {
  return props.columns.filter(col => {
    // 1. 获取该列在数据库中对应的 code
    // 如果列配置里显式写了 code，就用写的；如果没有，默认认为 prop 就是 code
    const permissionKey = col.code || col.prop

    // 2. 如果这个列不需要权限控制 (比如序号 index)，可以在配置里加个 ignoreAuth: true
    if (col.ignoreAuth) return true

    // 3. 问 Store：我有这个权限吗？
    // 注意：我们在 PermissionStore 里存的是全局唯一的 code
    return permStore.hasColumnPermission(props.pageCode, permissionKey)
  })
})

// --- 分页逻辑处理 ---
const localPage = ref(props.page)
const localLimit = ref(props.limit)

watch(() => props.page, (val) => localPage.value = val)
watch(() => props.limit, (val) => localLimit.value = val)

const handleSizeChange = (val: number) => {
  emit('update:limit', val)
  emit('pagination', { page: localPage.value, limit: val })
}

const handleCurrentChange = (val: number) => {
  emit('update:page', val)
  emit('pagination', { page: val, limit: localLimit.value })
}

const paginationConfig = {
  pageSizes: [10, 20, 50, 100],
  background: true
}
</script>

<style scoped>
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
:deep(.table-header-gray th) {
  background-color: #f8f9fb !important;
  color: #606266;
  font-weight: 600;
  height: 45px;
}
</style>