<template>
  <view class="page-card">
    <slot name="toolbar"></slot>
    <view class="data-table">
      <view class="t-header">
        <view class="t-row">
          <text
            v-for="col in columns"
            :key="col.key"
            :class="'t-th flex' + (col.flex || 1)"
          >{{ col.label }}</text>
        </view>
      </view>
      <view class="t-body">
        <slot name="rows"></slot>
        <view v-if="records.length === 0" class="empty-row">
          <text class="empty-text">暂无数据</text>
        </view>
      </view>
    </view>
    <view class="pagination" v-if="totalPages > 1">
      <button class="btn-page" :disabled="page <= 1" @click="$emit('page', page - 1)">‹</button>
      <button class="btn-page active">{{ page }}</button>
      <button class="btn-page" :disabled="page >= totalPages" @click="$emit('page', page + 1)">›</button>
      <text class="page-info">共 {{ totalPages }} 页</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    columns: { type: Array, required: true },
    records: { type: Array, default: function () { return [] } },
    page: { type: Number, default: 1 },
    totalPages: { type: Number, default: 1 }
  }
}
</script>

<style scoped>
@import '../styles/common.css';

.empty-row {
  padding: 40px 0;
  text-align: center;
}

.empty-text {
  color: #999;
  font-size: 14px;
}

.pagination {
  justify-content: flex-end;
}
</style>
