<template>
  <div :class="{ page_view_table: isPageView }">
    <table-view
      ref="tableView"
      v-bind="$attrs"
      v-on="$listeners"
      :columns="columns"
    >
      <template #columns>
        <slot name="columns"></slot>
      </template>
      <template v-for="item in columns" v-slot:[item.customSlot]="slotProps">
        <slot
          :name="item.customSlot"
          v-bind:customSlotData="slotProps.customSlotData"
        ></slot>
      </template>
      <template v-slot:expandSlot="slotProps">
        <slot
          name="expandSlot"
          v-bind:customSlotData="slotProps.customSlotData"
        ></slot>
      </template>
    </table-view>
    <!-- 分页组件 -->
    <el-row
      type="flex"
      align="middle"
      justify="center"
      class="page_view_set_row_padding"
      v-if="showPagination"
    >
      <el-col :span="leftPageSpan">
        <slot name="pageSlot"></slot>
      </el-col>
      <el-col :span="rightPageSpan">
        <pagination-view v-bind="$attrs" v-on="$listeners"></pagination-view>
        <slot name="paginationSlot"></slot>
        <!-- 空盒子 用来撑起高度 防止页面变形 -->
        <!-- <div v-if="!showPagination" style="height: 32px"></div> -->
      </el-col>
      <slot name="pageTableBottomSlot"></slot>
    </el-row>
  </div>
</template>
<script>
import tableView from './table.vue'
import paginationView from './baseView/pagination.vue'
export default {
  name: 'page-table-view',
  components: {
    paginationView,
    tableView
  },
  props: {
    //表格列
    columns: {
      type: [Object, Array],
      default: () => {
        return {} || []
      }
    },
    showPagination: {
      type: Boolean,
      default: true
    }, //显示分页
    leftPageSpan: {
      type: [String, Number],
      default: 6
    },
    rightPageSpan: {
      type: [String, Number],
      default: 18
    },
    isPageView: {
      type: Boolean,
      default: false
    } //是否是pageView组件 如果是pageView组件 就添加page_view_table类名
  }
}
</script>
<style lang="less">
.page_view_table {
  .el-table {
    border-radius: 8px 8px 0 0 !important;
  }
}
</style>
<style lang="less" scoped>
.page_view_set_row_padding {
  padding: 10px 0;
}
</style>