<template>
  <div class="table-container">
    <div class="table-wrapper">
      <el-table v-if="data && data.length" :data="data" :columns="columns" :header-cell-style="headerStyle"
        :cell-style="cellStyle" size="medium" stripe style="width: 100%;">
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          :formatter="item.formatter" :min-width="item.minWidth" :width="item.width"
          :header-align="item.headerAlign || 'left'" :align="item.align || 'left'"
          :show-overflow-tooltip="item.tip || true" :fixed="item.fixed || false" :sortable="item.sortable || false">
        </el-table-column>
        <el-table-column v-if="action" fixed="right" :label="$t('field.control')" :width="actionWidth">
          <template v-slot="scope">
            <slot :scope="scope"></slot>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else />
    </div>
  </div>
</template>

<script>
import Empty from './Empty/index.vue'

export default {
  name: 'RcsTable',
  components: { Empty },
  props: {
    columns: { // 表头配置
      type: Array,
      default: []
    },
    action: {
      type: Boolean,
      default: false
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50] // 默认页面大小
    },
    getTableData: {  // 获取数据的方法
      type: Function,
      default: () => ({ data: [], total: 0 })
    },
    actionWidth: {
      type: Number,
      default: 120
    }
  },
  data() {
    return {
      headerStyle: {
        background: 'rgba(0, 0, 0, 0.03)',
        color: 'rgba(0, 0, 0, 0.84)',
        'font-size': '12px',
        'font-weight': '500'
      },
      cellStyle: {
        'font-size': '12px',
        'font-weight': '400',
        color: 'rgba(0, 0, 0, 0.84)'
      },
      pageSize: 10,
      currentPage: 1,
      data: [],
      total: 0
    }
  },
  mounted() {
    // this.loadTableData()
  },
  methods: {
    // 加载表格数据
    async loadTableData() {
      const tableData = await this.getTableData()
      this.data = tableData?.data
      this.total = tableData?.total
    },
    handleSizeChange(size) {
      // 处理页面大小更改
      // 发出事件以通知父组件
      this.pageSize = size
      this.currentPage = 1
      this.loadTableData()
    },
    handleCurrentChange(currentPage) {
      // 处理当前页更改
      // 发出事件以通知父组件
      this.currentPage = currentPage
      this.loadTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  flex: 1;
  min-height: 0px;
  padding-top: 10px;

  .table-wrapper {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
