<template>
  <div class="bg-table-list" v-bind="$attrs">
    <div v-if="$slots.tabs" class="bg-list-tabs">
      <slot name="tabs" />
    </div>

    <!-- 筛选条件 -->
    <div v-if="$slots.filter" class="bg-list-filters">
      <slot name="filter" />
    </div>

    <!-- 列表 -->
    <main v-if="$slots.main" class="bg-container-main">
      <div>
        <slot name="main" />
      </div>
    </main>
    <!-- 分页 -->
    <footer v-if="$slots.footer" class="bg-container-footer">
      <slot name="footer" />
    </footer>
    <!-- </div> -->
  </div>
  <slot />
</template>

<script>
export default {
  name: "BgTableList",
};
</script>
<style lang="scss" scoped>
.bg-table-list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.bg-container-main {
  margin: 0 16px;
  flex: 1;
  position: relative;
  & > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    :deep(.el-table__body-wrapper) {
        height: calc(100% - 46px);
    }
  }
}
.bg-container-footer {
  padding: 16px;
  :deep(.el-pagination) {
    justify-content: flex-end;
  }
}
</style>
