<template>
  <div class="w-full overflow-x-auto ranking-table">
    <table :style="tableStyle">
      <!-- 表头插槽 -->
      <thead v-if="$slots.header">
        <tr>
          <th :colspan="columns.length">
            <slot name="header"></slot>
          </th>
        </tr>
      </thead>
      <!-- 列标题 -->
      <thead :class="`${headerClass}`">
        <tr>
          <th v-for="col in columns" :key="col.field" :style="getWidthStyle(col)">
            <div :class="`cell-content ${col.align}`">
              {{ col.header }}
            </div>
          </th>
        </tr>
      </thead>
      <tbody :class="`${bodyClass}`">
        <tr v-for="(row, rowIndex) in value" :key="rowIndex">
          <td v-for="col in columns" :key="col.field" :style="getWidthStyle(col)" :class="`${col.align}`">
            <div :class="`cell-content ${col.align}`">
              <slot :name="col.field" :data="row" :index="rowIndex">
                {{ row[col.field] }}
              </slot>
            </div>
          </td>
        </tr>
      </tbody>
      <!-- 表尾插槽 -->
      <tfoot v-if="$slots.footer">
        <tr>
          <td :colspan="columns.length">
            <slot name="footer"></slot>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script lang="ts" setup>
  interface Column {
    field: string;
    header: string;
    width?: string;
    minWidth?: string;
    maxWidth?: string;
    align?: string;
  }

  interface Props {
    value: any[];
    columns: Column[];
    tableStyle?: string;
    headerClass?: string;
    bodyClass?:string;
  }

  defineProps<Props>();

  const getWidthStyle = (col: Column) => {
    const style: Record<string, string> = {};
    if (col.width) style.width = col.width;
    if (col.minWidth) style.minWidth = col.minWidth;
    if (col.maxWidth) style.maxWidth = col.maxWidth;
    return style;
  };
</script>

<style scoped lang="scss">
  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  th,
  td {
    color: #fff;
  }

  .cell-content {
    display: flex;
    align-items: center;
    width: 100%;
  }

  tr:hover td {
    background: rgba(255, 255, 255, 0.05);
  }

  /* 自定义滚动条样式 */
  .ranking-table::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .ranking-table::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }

  .ranking-table::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
  }
</style>
