<template>
  <div class="page-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>用户排行榜</span>
        </div>
      </template>

      <!-- 排行榜类型切换 -->
      <div class="type-tabs">
        <el-radio-group v-model="currentType" @change="handleTypeChange">
          <el-radio-button
            v-for="(label, value) in UserRankTypeLabels"
            :key="value"
            :value="value"
          >
            {{ label }}
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- 排行榜表格 -->
      <el-table :data="rankList" v-loading="loading" border stripe>
        <el-table-column prop="rank" label="排名" width="80" align="center">
          <template #default="{ row }">
            <div class="rank-cell">
              <el-icon v-if="row.rank === 1" class="rank-icon gold"><Trophy /></el-icon>
              <el-icon v-else-if="row.rank === 2" class="rank-icon silver"><Trophy /></el-icon>
              <el-icon v-else-if="row.rank === 3" class="rank-icon bronze"><Trophy /></el-icon>
              <span v-else class="rank-number">{{ row.rank }}</span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="用户信息" min-width="200">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :src="row.headImg" :size="40" />
              <div class="user-detail">
                <span class="nickname">{{ row.nickname || '-' }}</span>
                <span class="uid">UID: {{ row.uid }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 通用数值列 -->
        <el-table-column
          :label="getValueLabel()"
          width="150"
          align="right"
        >
          <template #default="{ row }">
            <span class="value">{{ formatValue(row.value) }} {{ row.unit }}</span>
          </template>
        </el-table-column>
        
        <!-- 亏损排行榜特殊列 - 已隐藏，功能暂不使用
        <template v-if="currentType === UserRankType.Loss">
          <el-table-column label="消耗金额" width="120" align="right">
            <template #default="{ row }">
              <span class="money">¥{{ row.consumeAmount?.toFixed(2) || '0.00' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="达达券金额" width="120" align="right">
            <template #default="{ row }">
              <span class="dada-coin">¥{{ row.dadaCoinAmount?.toFixed(2) || '0.00' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="出货金额" width="120" align="right">
            <template #default="{ row }">
              <span class="ship-amount">¥{{ row.shipAmount?.toFixed(2) || '0.00' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="亏损金额" width="120" align="right">
            <template #default="{ row }">
              <span class="loss-amount">¥{{ row.value?.toFixed(2) || '0.00' }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="亏损率" width="100" align="right">
            <template #default="{ row }">
              <span class="loss-rate">{{ row.lossRate?.toFixed(2) || '0.00' }}%</span>
            </template>
          </el-table-column>
        </template>
        -->
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="pagination"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Trophy } from '@element-plus/icons-vue'
import {
  getUserRanks,
  UserRankType,
  UserRankTypeLabels,
  type UserRankListRequest,
  type UserRankResponse
} from '@/api/business/rank'

// 当前排行榜类型
const currentType = ref<string>(UserRankType.Invite)

// 列表数据
const loading = ref(false)
const rankList = ref<UserRankResponse[]>([])
const total = ref(0)

// 查询参数
const queryParams = reactive<UserRankListRequest>({
  page: 1,
  pageSize: 20,
  type: UserRankType.Invite
})

// 获取排行榜列表
const fetchData = async () => {
  loading.value = true
  try {
    queryParams.type = currentType.value
    const res = await getUserRanks(queryParams)
    rankList.value = res.data.list
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

// 类型切换
const handleTypeChange = () => {
  queryParams.page = 1
  fetchData()
}

// 分页
const handlePageChange = (page: number) => {
  queryParams.page = page
  fetchData()
}

const handleSizeChange = (size: number) => {
  queryParams.pageSize = size
  queryParams.page = 1
  fetchData()
}

// 获取数值列标签
const getValueLabel = (): string => {
  switch (currentType.value) {
    case UserRankType.Invite:
      return '邀请人数'
    case UserRankType.DadaCoin:
      return '达达券数量'
    case UserRankType.Diamond:
      return '钻石数量'
    case UserRankType.UUCoin:
      return 'HH币数量'
    default:
      return '数值'
  }
}

// 格式化数值
const formatValue = (value: number): string => {
  if (value >= 10000) {
    return (value / 10000).toFixed(2) + '万'
  }
  return value.toFixed(0)
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.page-container {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-tabs {
  margin-bottom: 16px;
}

.rank-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-icon {
  font-size: 24px;
}

.rank-icon.gold {
  color: #ffd700;
}

.rank-icon.silver {
  color: #c0c0c0;
}

.rank-icon.bronze {
  color: #cd7f32;
}

.rank-number {
  font-weight: 500;
  color: #606266;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-detail .nickname {
  font-weight: 500;
}

.user-detail .uid {
  font-size: 12px;
  color: #909399;
}

.value {
  font-weight: 500;
  color: #409eff;
}

.money {
  color: #909399;
}

.dada-coin {
  color: #67c23a;
}

.ship-amount {
  color: #409eff;
}

.loss-amount {
  color: #f56c6c;
  font-weight: 500;
}

.loss-rate {
  color: #e6a23c;
  font-weight: 500;
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
