<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script lang="ts" setup>
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { redEnvelopeTop } from '@/api/wallet'
import { formatNumber } from '@/utils'
import { goBack } from '@/utils/page'

defineOptions({
  name: 'TopChampions', // 奖赏排名
})

// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// 根据排名获取标签背景色
function getRankBgColor(index: number) {
  const colors = {
    0: '#DEA90B', // 第一名
    1: '#5E719E', // 第二名
    2: '#D47128', // 第三名
  }
  return colors[index] || '#A5ADBD' // 其余排名
}

// 根据排名获取排名数字
function getRankNumber(index: number) {
  return index + 1
}

// 搜索结果
const data = ref<any>({
  users: {
    list: [],
  },
  updateTime: '',
})
async function queryList(pageNo: number, pageSize: number) {
  try {
    const res = await redEnvelopeTop({
      size: pageSize,
      page: pageNo,
      type: 1,
    })
    data.value = res.data
    paging.value.complete(res.data.users.list)
  }
  catch {
    paging.value.complete(false)
  }
}
</script>

<template>
  <z-paging ref="paging" v-model="data.users.list" use-page-scroll @query="queryList">
    <template #top>
      <view
        class="relative from-[#FA2B19] to-[#FE6232] bg-gradient-to-br"
        :style="{ paddingTop: `${safeAreaInsets?.top}px` }"
      >
        <wd-navbar :bordered="false" custom-class="bg-transparent!">
          <template #left>
            <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="() => goBack()" />
          </template>
          <template #title>
            <view class="text-white font-bold text-32rpx!">
              {{ $t('topChampions.title') }}
            </view>
          </template>
        </wd-navbar>
        <image src="/static/icons/top-nav.png" class="absolute bottom-12rpx right-12rpx h-166.27rpx w-180rpx" />
      </view>
    </template>
    <view>
      <view class="py-22rpx text-center text-22rpx text-#5C5C5C">
        {{ data.updateTime || '-' }} Update
      </view>
      <view v-for="(item, index) in data.users.list" :key="index" class="relative mb-20rpx flex items-center justify-between bg-white p-24rpx">
        <!-- 左上角TOP标签 -->
        <view
          class="absolute left-24rpx top-0 h-52rpx w-48rpx flex items-center justify-center rounded-4rpx text-20rpx text-white font-bold"
          :style="{ backgroundColor: getRankBgColor(index), clipPath: 'polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)' }"
        >
          <view class="flex flex-col items-center leading-none">
            <text class="text-16rpx">
              {{ $t('topChampions.top') }}
            </text>
            <text class="text-18rpx">
              {{ getRankNumber(index) }}
            </text>
          </view>
        </view>
        <view class="w-30% flex flex-col items-center justify-center text-center font-bold">
          <wd-img width="80rpx" height="80rpx" custom-class="mb-3px" round :src="item.headPic" />
          <view class="mb-3px text-24rpx">
            {{ item.name }}
          </view>
          <view class="text-24rpx">
            V{{ item.vipLevel }}
          </view>
        </view>
        <wd-divider custom-class="h-80rpx! mx-40rpx!" color="#A4A4A4" vertical dashed />
        <view class="grid grid-cols-2 flex-1 gap-24rpx">
          <view class="flex flex-col items-center">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('topChampions.invitedFriends') }}
            </view>
            <view class="text-24rpx font-bold">
              {{ formatNumber(item.inviteNum, 0) }}
            </view>
          </view>
          <view class="flex flex-col items-center">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('topChampions.l7dEarnings') }}
            </view>
            <view class="text-24rpx text-[var(--wot-color-theme)] font-bold">
              {{ formatNumber(item.l7DEarnings) }}
            </view>
          </view>
          <view class="flex flex-col items-center">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('topChampions.teamMembers') }}
            </view>
            <view class="text-24rpx font-bold">
              {{ formatNumber(item.teamNum, 0) }}
            </view>
          </view>
          <view class="flex flex-col items-center">
            <view class="mb-3px text-22rpx text-#5B5B5B">
              {{ $t('topChampions.joinedGroups') }}
            </view>
            <view class="text-24rpx font-bold">
              {{ formatNumber(item.groupNum, 0) }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
//
</style>
