<template>
  <div class="base-table">
    <!-- 给内部表格添加ref，方便暴露 -->
    <el-table
      ref="internalTable"
      v-bind="$attrs"
      v-on="$listeners"
      :data="data"
      :loading="loading"
    >
      <!-- 通过配置数组渲染列 -->
      <template v-for="(column, index) in columns">
        <el-table-column
          v-if="column.visible !== false"
          v-bind="column"
        >
          <!-- 列的自定义内容插槽 -->
          <template v-if="column.slot" #default="scope">
            <slot :name="column.slot" :scope="scope"></slot>
          </template>
          
          <!-- 表头自定义内容 -->
          <template v-if="column.headerSlot" #header>
            <slot :name="column.headerSlot"></slot>
          </template>
        </el-table-column>
      </template>
      
      <!-- 操作列 -->
      <el-table-column 
        v-if="showActionColumn"
        :label="actionColumnLabel"
        :width="actionColumnWidth"
        :fixed="actionColumnFixed"
        :align="actionColumnAlign"
      >
        <template #default="scope">
          <slot name="action" :scope="scope"></slot>
        </template>
      </el-table-column>
      
      <!-- 原生插槽，支持直接写el-table-column -->
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'BaseTable',
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 列配置数组
    columns: {
      type: Array,
      default: () => []
    },
    // 是否显示加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 是否显示操作列
    showActionColumn: {
      type: Boolean,
      default: false
    },
    // 操作列标题
    actionColumnLabel: {
      type: String,
      default: '操作'
    },
    // 操作列宽度
    actionColumnWidth: {
      type: Number,
      default: 150
    },
    // 操作列固定方式
    actionColumnFixed: {
      type: String,
      default: 'right'
    },
    // 操作列内容对齐方式
    actionColumnAlign: {
      type: String,
      default: 'center'
    }
  },
  // 暴露内部表格的方法和属性
  methods: {
    /**
     * 获取内部el-table实例
     */
    getTableInstance() {
      return this.$refs.internalTable
    },
    
    /**
     * 代理el-table的常用方法，方便直接调用
     */
    clearSelection() {
      if (this.$refs.internalTable) {
        this.$refs.internalTable.clearSelection()
      }
    },
    
    toggleRowSelection(row, selected) {
      if (this.$refs.internalTable) {
        this.$refs.internalTable.toggleRowSelection(row, selected)
      }
    },
    
    toggleAllSelection() {
      if (this.$refs.internalTable) {
        this.$refs.internalTable.toggleAllSelection()
      }
    },
    
    doLayout() {
      if (this.$refs.internalTable) {
        this.$refs.internalTable.doLayout()
      }
    },
    
    sort(prop, order) {
      if (this.$refs.internalTable) {
        this.$refs.internalTable.sort(prop, order)
      }
    }
  },
  
  // 提供一个$refs的代理，方便访问内部表格
  mounted() {
    // 可以在这里添加一些初始化逻辑
  }
}
</script>

<style scoped>
.base-table {
  width: 100%;
  box-sizing: border-box;
}
</style>
