<template>
  <div class="system-table-box">
    <el-table v-bind="$attrs" ref="table" class="system-table" border :height="height" :data="data"
      @selection-change="handleSelectionChange" @select-all="handleSelectAll"  @select="handleSelect">
      <el-table-column type="selection" align="center" width="50" v-if="showSelection" />
      <el-table-column label="序号" width="60" align="center" v-if="showIndex">
        <template #default="scope">
          {{ (page.pageNum - 1) * page.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <div class="system-bottom">
      <el-pagination v-if="showPage" v-model:current-page="page.pageNum" class="system-page" background
        :layout="pageLayout" :total="page.total" :page-size="page.pageSize" :page-sizes="pageSizes"
        @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
      <div v-if="revenue" class="revenue">今日总收益：<span class="revenue-number">￥{{ revenue }}元</span></div>
    </div>
  </div>
</template>

<script lang="js">
import { defineComponent, ref, onActivated, defineExpose  } from 'vue'
export default defineComponent({
  props: {
    data: { type: Array, default: () => [] }, // 数据源
    select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
    showIndex: { type: Boolean, default: false }, // 是否展示index选择，默认否
    showSelection: { type: Boolean, default: false }, // 是否展示选择框，默认否
    showPage: { type: Boolean, default: true }, // 是否展示页级组件，默认是
    page: { // 分页参数
      type: Object,
      default: () => {
        return { pageNum: 1, pageSize: 20, total: 0 }
      }
    },
    pageLayout: { type: String, default: "total, sizes, prev, pager, next, jumper" }, // 分页需要显示的东西，默认全部
    pageSizes: { type: Array, default: [10, 20, 50, 100, 200] },
    id: { type: String, default: '' }, // 行数据的 Key，用来优化 Table 的渲染；
    height: { type: String, default: '100%' },
    revenue: { type: Number, default: 0 }, //总收益
  },
  setup(props, context) {
    const table = ref(null)
    let timer = null
    // 分页相关：监听页码切换事件
    const handleCurrentChange = (val) => {
      if (timer) {
        props.page.pageNum = 1
      } else {
        props.page.pageNum = val
        context.emit("getTableData")
      }
    }
    // 分页相关：监听单页显示数量切换事件
    const handleSizeChange = (val) => {
      timer = 'work'
      setTimeout(() => {
        timer = null
      }, 100)
      props.page.pageSize = val
      context.emit("getTableData", true)
    }
    // 选择监听器
    const handleSelectionChange = (val) => {
      context.emit("selection-change", val)
    }
    // 全选
    const handleSelectAll = (val) => {
      context.emit("select-all", val)
    }
    // 单选选
    const handleSelect = (selection, row) => {
      context.emit("select", selection, row)
    }
    // 导出table供外部使用
    defineExpose({
      table
    })

    // 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
    onActivated(() => {
      table.value.doLayout()
    })
    return {
      table,
      handleCurrentChange,
      handleSizeChange,
      handleSelectionChange,
      handleSelectAll,
      handleSelect
    }
  }
})
</script>

<style lang="scss" scoped>
.system-table-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;

  .system-table {
    flex: 1;
    height: 100%;
  }

  .system-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .revenue {
      .revenue-number {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }

  .system-page {
    // margin-top: 20px;

    &::before {
      content: '';
    }
  }
}

:deep() {
  .el-table {
    color: var(--system-page-color);
    --el-table-tr-bg-color: var(--system-page-background);
    --el-table-bg-color: var(--system-page-background);
    --el-table-header-bg-color: var(--system-page-background);
    --el-table-border-color: var(--system-page-border-color);
    --el-table-row-hover-bg-color: var(--system-container-background);
    --el-bg-color: var(--system-page-background) !important; //左边固定栏背景色

  }

  // 分页器
  .el-input__wrapper,
  .btn-prev,
  .btn-next,
  .number {
    background-color: var(--system-page-background) !important;
    color: var(--system-page-color);
    border-color: var(--system-page-border-color);
  }

  .is-active {
    color: var(--system-primary-text-color);
    background-color: var(--system-primary-color) !important;
  }
}
</style>