<template>
  <div class="table_box">
    <el-table
      ref="tableRef"
      :data="xbTable.tableData"
      v-loading="xbTable.loading"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, key) in xbTable.columns" :key="key">
        <el-table-column
          v-if="item.type"
          v-bind="item"
          align="center"
          :reserve-selection="reserveSelection"
        ></el-table-column>
        <el-table-column
          v-else
          v-bind="item"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template #header>
            {{ item.label }}
            <el-tooltip
              v-if="item.tips"
              effect="dark"
              :content="item.tips"
              placement="top"
            >
              <el-icon style="cursor: pointer"> <QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
          <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"
      :page-sizes="[10, 30, 50, 70, 90]"
      v-model:page="xbTable.pagination.pageNum"
      v-model:limit="xbTable.pagination.pageSize"
      :autoScroll="props.autoScroll"
      @pagination="handlePagination"
    />
  </div>
</template>

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

const props = defineProps({
  autoScroll: {
    type: Boolean,
    default: true,
  },
  reserveSelection: {
    type: Boolean,
    default: false,
  },
  xbTable: {
    loading: Boolean, //加载中
    columns: Array, //列表
    tableData: Array, //表格数据

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

const tableRef = ref();

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

defineExpose({
  getRef: () => tableRef.value,
  getSelectionRows: () => tableRef.value?.getSelectionRows(),
  clearSelection: () => tableRef.value?.clearSelection(),
});
</script>
<style scoped lang="scss">
:deep(.pagination-container) {
  position: relative;
  .el-pagination {
    right: 50%;
    transform: translateX(50%);
  }
}
</style>
