<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  title: string
  columns: any[]
  loading?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'add'): void
  (e: 'refresh'): void
}>()

const searchForm = ref({})
</script>

<template>
  <div class="page-container">
    <h2 class="text-xl font-bold mb-4">{{ title }}</h2>
    
    <div class="toolbar mb-4">
      <el-button type="primary" @click="emit('add')">
        新增
      </el-button>
      <el-button @click="emit('refresh')">
        刷新
      </el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="[]"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth"
        :align="col.align || 'left'"
      />
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small">编辑</el-button>
          <el-button link type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.page-container {
  padding: 20px;
}
.toolbar {
  display: flex;
  gap: 8px;
}
</style>
