<template>
  <div class="common-page-container">
    <el-card class="common-box-card">
      <template #header v-if="$slots.header">
        <slot name="header" />
      </template>

      <!-- 搜索/工具栏区域 -->
      <div class="common-search-area" v-if="$slots.search">
        <slot name="search" />
      </div>

      <!-- 表格内容区域 -->
      <div class="common-table-area">
        <slot />
      </div>

      <!-- 分页区域 -->
      <div class="common-pagination-area" v-if="$slots.pagination">
        <slot name="pagination" />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.common-page-container {
  height: calc(100vh - 112px);
  display: flex;
  flex-direction: column;
}

.common-box-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 穿透修改 el-card__body 样式，使其变为 flex 布局 */
:deep(.el-card__body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.common-search-area {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.common-table-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.common-pagination-area {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
</style>
