<template>
  <div class="base-table-wrap">
    <!-- ElementUI 原生表格，所有属性透传 -->
    <el-table
      ref="tableRef"
      :data="tableData"
      v-bind="$attrs"
      v-on="$listeners"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选框列 -->
      <el-table-column
        v-if="hasSelection"
        type="selection"
        width="55"
        align="center"
      />
      <!-- 序号列 -->
      <el-table-column
        v-if="hasIndex"
        type="index"
        label="序号"
        width="50"
        align="center"
      />
      <!-- 动态循环渲染列配置 -->
      <el-table-column
        v-for="col in tableConfig"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth"
        :fixed="col.fixed"
        :align="col.align || 'center'"
        :header-align="col.headerAlign || col.align || 'center'"
        :sortable="col.sortable"
        :show-overflow-tooltip="col.showOverflowTooltip ?? true"
      >
        <template slot-scope="scope">
          <!-- 1. 自定义render -->
          <span
            v-if="col.render"
            v-html="col.render(scope.row, scope.column, scope.$index)"
          ></span>

          <!-- 2. tag标签 -->
          <el-tag
            v-else-if="col.type === 'tag'"
            :type="col.getTagType ? col.getTagType(scope.row) : 'primary'"
            :effect="col.tagEffect || 'light'"
            size="mini"
          >
            {{
              col.getTagText ? col.getTagText(scope.row) : scope.row[col.prop]
            }}
          </el-tag>

          <!-- 3. 图片 -->
          <el-image
            v-else-if="col.type === 'image'"
            :src="scope.row[col.prop]"
            style="width: 40px; height: 40px"
            fit="cover"
            :preview-src-list="[scope.row[col.prop]]"
          />

          <!-- 4. 开关 -->
          <el-switch
            v-else-if="col.type === 'switch'"
            v-model="scope.row[col.prop]"
            @change="col.onSwitchChange && col.onSwitchChange(scope.row)"
            active-text="开启"
            inactive-text="关闭"
          />

          <!-- 5. 操作按钮 -->
          <div v-else-if="col.type === 'button'" class="table-btn-group">
            <el-button
              v-for="btn in col.btns"
              :key="btn.key"
              size="mini"
              :type="btn.type || 'primary'"
              :icon="btn.icon"
              :disabled="btn.disabled ? btn.disabled(scope.row) : false"
              @click="btn.click(scope.row, scope.$index)"
            >
              {{ btn.label }}
            </el-button>
          </div>

          <!-- 6. 外部自定义插槽 -->
          <slot v-else-if="col.slotName" :name="col.slotName" v-bind="scope" />

          <!-- 7. 普通文本兜底（现在一定能拿到scope） -->
          <span v-else>{{ scope.row[col.prop] ?? "" }}</span>
        </template>

        <!-- 7. 默认文本展示 -->
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      small
      v-if="showPagination"
      class="table-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    />
  </div>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    /**
     * 表格数据源
     */
    tableData: {
      type: Array,
      default: () => []
    },
    /**
     * 列配置数组【核心】
     * @type Array<Object>
     * 字段说明：
     * prop: 绑定字段名
     * label: 表头文字
     * width/minWidth: 列宽
     * fixed: 固定列 left/right
     * align/headerAlign: 对齐方式
     * sortable: 是否可排序
     * showOverflowTooltip: 文字溢出悬浮提示
     * type: tag/image/switch/button 特殊类型渲染
     * render: 自定义渲染函数(row, column, index) => html字符串
     * slotName: 自定义插槽名称
     * btns: 操作按钮数组(type=button时生效)
     */
    tableConfig: {
      type: Array,
      required: true
    },
    /**
     * 是否显示多选框
     */
    hasSelection: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示序号列
     */
    hasIndex: {
      type: Boolean,
      default: false
    },
    /**
     * 是否展示分页
     */
    showPagination: {
      type: Boolean,
      default: true
    },
    /**
     * 分页信息
     * { pageNum: 1, pageSize: 10, total: 0 }
     */
    pageInfo: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        total: 0
      })
    }
  },
  data() {
    return {
      // 选中行存储
      selectedRows: []
    };
  },
  methods: {
    /**
     * 多选框选中回调
     */
    handleSelectionChange(val) {
      this.selectedRows = val;
      this.$emit("selection", val);
    },
    /**
     * 获取当前选中的所有行数据
     */
    getSelectedRows() {
      return this.selectedRows;
    },
    /**
     * 清空多选框选中状态
     */
    clearSelection() {
      this.$refs.tableRef.clearSelection();
      this.selectedRows = [];
    },
    /**
     * 每页条数改变
     */
    handleSizeChange(size) {
      this.$emit("page-size-change", size);
    },
    /**
     * 页码改变
     */
    handleCurrentChange(page) {
      this.$emit("page-current-change", page);
    },
    toggleAllSelection(value) {
      this.$refs.tableRef.toggleAllSelection(value);
    }
  },
  mounted() {
    // console.log("tableConfig", this.tableConfig);
    // console.log("tableData", this.tableData);
  }
};
</script>

<style scoped>
.el-table {
  max-height: calc(100% - 75px);
}
.base-table-wrap {
  width: 100%;
  height: 100%;
  /* overflow-y: scroll; */
}
.table-pagination {
  margin-top: 10px;
  text-align: center;
}
.table-btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
</style>
