<template>
  <el-table :data="data" border stripe class="scoreboard-table">
    <el-table-column 
      v-for="column in columns" 
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :class-name="column.className"
      :sortable="column.sortable"
    >
      <template v-if="column.slot" #default="{ row }">
        <slot :name="column.slot" :row="row">
          {{ row[column.prop] }}
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
interface Column {
  prop: string
  label: string
  width?: number | string
  className?: string
  sortable?: boolean
  slot?: string
}

interface Props {
  data: any[]
  columns: Column[]
}

defineProps<Props>()
</script>

<style scoped>
.scoreboard-table {
  width: 100%;
}

@media (max-width: 900px) {
  .scoreboard-table :deep(.col-group),
  .scoreboard-table :deep(.col-medal),
  .scoreboard-table :deep(.col-time) {
    display: none;
  }
}
</style>
