<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { NetImages } from '../../../../core/libs/net-images'
import { getRidings } from '../../../../core/libs/requests'
import PageHelperEvo from '@/components/page-helper-evo.vue'

// const { data, run } = useRequest(() => ({}), { initialData: [] })
</script>
<template>
  <div class="flex-grow flex flex-col bg-[length:100%]">
    <NavbarEvo transparent dark title="骑行榜"></NavbarEvo>
    <div class="aspect-[1.19/1]">
      <wd-img
        width="100%"
        custom-class="vertical-bottom"
        mode="widthFix"
        :src="NetImages.CyclingRankingsHeaderBg"
      ></wd-img>
    </div>
    <PageHelperEvo class="flex-grow flex flex-col" :request="getRidings" :query="{}">
      <template #default="{ source }">
        <div class="flex-grow relative bg-[linear-gradient(180deg,#EFEFEF_0.4%,#FFF_21.41%)]">
          <div class="absolute h-4 top--4 left-0 right-0 bg-[#EFEFEF] rounded-t-2xl"></div>
          <div class="flex justify-between">
            <template v-for="(it, i) in source.list.slice(0, 3)" :key="i">
              <div
                class="flex-1 py-2 relative"
                :class="`${i === 0 ? 'w-[143px] h-[141px] bg-white rounded-xl relative bottom-8 pt-4 order-1 ' : ''}`"
                :style="{ order: i === 0 ? 1 : i - 1 }"
              >
                <div
                  class="text-center font-bold font-['D-DIN'] leading-relaxed"
                  :class="`${i === 0 ? 'text-[#ef4343] text-2xl ' : 'text-black text-[22px]'}`"
                >
                  <!-- 198.2 -->
                  {{ it.radeKmTotal }}
                </div>
                <div
                  class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  骑行里程km
                </div>
                <div class="absolute top--30 left-0 right-0 flex flex-col items-center gap-2">
                  <wd-img
                    class="rounded-full border-2 border-solid border-[#c5cdd4] overflow-hidden"
                    width="71"
                    height="71"
                    round
                    :src="it.avatar"
                  ></wd-img>
                  <div
                    class="text-center text-white text-base font-normal font-['PingFang_SC'] leading-relaxed"
                  >
                    <!-- 苏小萌 -->
                    {{ it.memberStylistName }}
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="flex flex-col gap-8 mt--10">
            <template v-for="(it, i) in source.list" :key="i">
              <div v-if="i > 2" class="flex items-center gap-2 px-7">
                <div
                  class="text-center w-8 text-black/40 text-base font-bold font-['DIN'] leading-relaxed"
                >
                  {{ i < 9 ? '0' + (i + 1) : i + 1 }}
                </div>
                <wd-img class="w-8 h-8 rounded-full" round :src="it.avatar" />
                <div
                  class="text-center text-black/80 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
                >
                  {{ it.memberStylistName }}
                </div>
                <div class="flex-1"></div>
                <div>
                  <div
                    class="text-center text-black/80 text-xl font-bold font-['D-DIN'] leading-relaxed"
                  >
                    {{ it.radeKmTotal }}
                  </div>
                  <div
                    class="text-center text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-relaxed"
                  >
                    累计里程km
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </PageHelperEvo>
  </div>
</template>
