<template>
  <div class="table-with-pagination">
    <slot name="header" v-if="showHeader">
      <div class="table-header">
        <div class="table-title">数据列表</div>
      </div>
    </slot>
    
    <div class="table-content">
      <el-table :data="data" stripe style="width: 100%">
        <el-table-column 
          v-for="col in columns" 
          :key="col.prop"
          :prop="col.prop" 
          :label="col.label" 
          :width="col.width"
          :align="col.align || 'left'"
        >
          <template #default="scope" v-if="col.formatter">
            {{ col.formatter(scope.row[col.prop], scope.row) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="integrated-pagination" v-if="pagination.total > 0">
      <div class="pagination-info">
        共 {{ pagination.total }} 条记录，第 {{ pagination.currentPage }} 页 / 共 {{ totalPages }} 页
      </div>
      
      <div class="custom-pagination">
        <div class="page-size-selector">
          <span>每页</span>
          <el-select 
            :model-value="pagination.pageSize" 
            @update:model-value="handleSizeChange" 
            size="small"
            style="width: 90px;"
          >
            <el-option label="10条" :value="10"></el-option>
            <el-option label="20条" :value="20"></el-option>
            <el-option label="50条" :value="50"></el-option>
            <el-option label="100条" :value="100"></el-option>
          </el-select>
        </div>
        
        <div class="page-jumper">
          <span>跳至</span>
          <el-input 
            v-model="jumpPage" 
            placeholder="页码" 
            size="small" 
            class="page-input"
            @keyup.enter="jumpToPage"
          ></el-input>
          <span>页</span>
          <el-button size="small" @click="jumpToPage">确定</el-button>
        </div>
        
        <div class="page-buttons">
          <button 
            class="page-btn" 
            :class="{ disabled: pagination.currentPage === 1 }"
            @click="handlePageChange(pagination.currentPage - 1)"
          >
            上一页
          </button>
          
          <template v-for="page in totalPages" :key="page">
            <button 
              v-if="
                page === 1 || 
                page === totalPages || 
                (page >= pagination.currentPage - 2 && page <= pagination.currentPage + 2)
              "
              class="page-btn" 
              :class="{ active: page === pagination.currentPage }"
              @click="handlePageChange(page)"
            >
              {{ page }}
            </button>
            
            <span 
              v-else-if="
                (page === pagination.currentPage - 3 && pagination.currentPage > 4) ||
                (page === pagination.currentPage + 3 && pagination.currentPage < totalPages - 3)
              "
              class="page-btn disabled"
            >
              ...
            </span>
          </template>
          
          <button 
            class="page-btn" 
            :class="{ disabled: pagination.currentPage === totalPages }"
            @click="handlePageChange(pagination.currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn, ElButton, ElSelect, ElOption, ElInput } from 'element-plus'

export default {
  name: 'IntegratedTable',
  components: {
    ElTable,
    ElTableColumn,
    ElButton,
    ElSelect,
    ElOption,
    ElInput
  },
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    pagination: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        total: 0
      })
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  emits: ['page-change', 'size-change'],
  setup(props, { emit }) {
    // 计算总页数
    const totalPages = computed(() => {
      return Math.ceil(props.pagination.total / props.pagination.pageSize)
    })
    
    // 处理页码变化
    const handlePageChange = (page) => {
      if (page < 1 || page > totalPages.value) return
      emit('page-change', page)
    }
    
    // 处理每页大小变化
    const handleSizeChange = (size) => {
      emit('size-change', parseInt(size))
    }
    
    // 跳转到指定页
    const jumpToPage = () => {
      const page = parseInt(jumpPage.value)
      if (page && page >= 1 && page <= totalPages.value) {
        handlePageChange(page)
      }
      jumpPage.value = ''
    }
    
    const jumpPage = ref('')
    
    return {
      totalPages,
      handlePageChange,
      handleSizeChange,
      jumpToPage,
      jumpPage
    }
  }
}
</script>

<style scoped>
.table-with-pagination {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-content {
  padding: 0 20px;
}

.integrated-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8f9fa;
  border-top: 1px solid #ebeef5;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

.custom-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-jumper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-input {
  width: 60px;
}

.page-buttons {
  display: flex;
  gap: 5px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.page-btn:hover {
  background: #f5f7fa;
}

.page-btn.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.page-btn.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
}

@media (max-width: 768px) {
  .integrated-pagination {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .table-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style>
