<template>
  <div class="ranking-table">
    <!-- 动态表头 -->
    <div class="table-header">
      <div
        v-for="header in headerList"
        :key="header.columnName"
        class="col"
        :class="getColumnClass(header.columnName)"
      >
        {{ header.columnLabel }}
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>

    <!-- 动态表格内容 -->
    <div v-else class="table-body">
      <div
        v-for="(item, index) in dataList"
        :key="item.recordId || index"
        class="table-row"
      >
        <div
          v-for="header in headerList"
          :key="header.columnName"
          class="col"
          :class="getColumnClass(header.columnName)"
        >
          {{ formatCellValue(item.columnValues[header.columnName], header.columnName) }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps<{
  data: any
  loading: boolean
}>()

// 表头列表（按 displayOrder 排序）
const headerList = computed(() => {
  if (!props.data?.headerlist) return []
  return [...props.data.headerlist].sort((a, b) => a.displayOrder - b.displayOrder)
})

// 数据列表
const dataList = computed(() => {
  if (!props.data?.datalist) return []
  return props.data.datalist
})

// 根据列名返回对应的 class
function getColumnClass(columnName: string): string {
  const classMap: Record<string, string> = {
    'ranking': 'col-rank',
    'orgName': 'col-name',
    'count': 'col-index',
    'share': 'col-index'
  }
  return classMap[columnName] || 'col-index'
}

// 格式化单元格值
function formatCellValue(value: any, columnName: string): string {
  if (value === undefined || value === null) return '--'
  // 份额指数保留2位小数
  if (columnName === 'share') {
    return parseFloat(value).toFixed(2)
  }
  return value.toString()
}
</script>

<style scoped>
.ranking-table {
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  font-family: var(--font-family-base, 'Source Han Sans CN', 'Microsoft YaHei', sans-serif);
}

.table-header {
  display: flex;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #D9D9D9;
  color: #666666;
  font-size: 14px;
  font-weight: 500;
  background-color: transparent;
  height: 60px;
  box-sizing: border-box;
  overflow: visible;
}

.table-body {
  min-height: 200px;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #F0F0F0;
  transition: background-color 0.2s ease;
  height: 60px;
  box-sizing: border-box;
}

.table-row:hover {
  background-color: #FAFAFA;
}

.col {
  flex-shrink: 0;
  font-size: 14px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.col-rank {
  width: 60px;
}

.col-name {
  width: 210px;
  justify-content: flex-start;
  padding-left: 29px;
}

.col-type {
  width: 260px;
}

.col-index {
  width: 150px;
}

.col-score {
  width: 150px;
  font-weight: 600;
  color: #000;
}

.col-trend {
  width: 122px;
  flex: 1;
}

.trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
}

.trend-icon svg {
  width: 14px;
  height: 14px;
}

.trend-up {
  background-color: rgba(82, 196, 26, 0.15);
  color: #52C41A;
}

.trend-down {
  background-color: rgba(245, 34, 45, 0.15);
  color: #F5222D;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #999999;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E8E8E8;
  border-top-color: #2D8CF0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
