<template>
  <div class="table_box">
    <el-table
      :data="xbTable.tableData"
      v-loading="xbTable.loading"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :expand-row-keys="['100']"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, key) in xbTable.columns" :key="key">
        <el-table-column
          v-if="item.type"
          :type="item.type"
          :width="item.type ? 52 : item.width"
          align="center"
        ></el-table-column>
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.type ? 52 : item.width"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template v-if="item.slot" #default="scope">
            <slot :name="item.slot" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <pagination
      v-if="xbTable.pagination.total > 0"
      :total="xbTable.pagination.total"
      v-model:page="xbTable.pagination.pageNum"
      v-model:limit="xbTable.pagination.pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { watch } from "vue";

const props = defineProps({
  xbTable: {
    loading: Boolean, //加载中
    columns: Array, //列表
    tableData: Array, //表格数据

    //分页数据
    pagination: {
      total: Number,
      pageNum: Number,
      pageSize: Number,
    },
  },
});
const emits = defineEmits(["selectionChange", "tablePageChange"]);

// 多选
const handleSelectionChange = (val) => {
  emits("selectionChange", val);
};
//分页
function handlePagination(val) {
  emits("tablePageChange", val);
}
</script>
