<script setup>
  import { ref } from 'vue'
  import { onLoad, onPageScroll } from '@dcloudio/uni-app'
  import { getUserIntegralRank } from '@/api'
  import { formatNumberWithWan } from '../../utils'

  const cbNavBar = ref({})
  const listData = ref([])

  const getData = async () => {
    const res = await getUserIntegralRank({
      pageNum: 1,
      pageSize: 100
    })
    listData.value = res.rows
  }

  onPageScroll(e => {
    cbNavBar.value?.updateScroll(e.scrollTop)
  })

  onLoad(() => {
    getData()
  })
</script>

<template>
  <view class="ranking-list">
    <nav-bar
      ref="cbNavBar"
      isTopBg
      target-color="#f9f9f9"
      :max-scroll="446"
    >
      <template #back>
        <image
          src="/static/images/public/return-icon.png"
          mode="heightFix"
          class="top-left-icon"
        ></image>
      </template>
    </nav-bar>
    <view class="public-header—box">
      <image
        src="/static/images/discover/title-icon.png"
        mode="aspectFit"
        class="left-icon"
      ></image>
      <image
        src="/static/images/discover/hat.png"
        mode="aspectFit"
        class="right-icon"
      ></image>
    </view>

    <!-- 表格 -->
    <view class="table-box">
      <!-- 表头 -->
      <uni-row class="table-head">
        <uni-col :span="6">
          <view class="grade-box">
            <text class="item-text">排行</text>
          </view>
        </uni-col>
        <uni-col :span="12">
          <view class="name">
            <text class="item-text">用户</text>
          </view>
        </uni-col>
        <uni-col :span="6">
          <view class="table-right">
            <text class="item-text">积分</text>
          </view>
        </uni-col>
      </uni-row>
      <!-- 列表内容 -->
      <uni-row
        v-for="(item, index) in listData"
        :key="item.id"
        class="table-content"
      >
        <uni-col :span="6">
          <view class="grade-box">
            <image
              v-if="index < 3"
              :src="`/static/images/discover/grade${index + 1}.png`"
              mode="heightFix"
              class="grade"
            ></image>
            <text v-else class="item-text">{{ index + 1 }}</text>
          </view>
        </uni-col>
        <uni-col :span="12">
          <view class="table-name">
            <image
              v-if="item.avatar"
              :src="item.avatar"
              mode="aspectFill"
              class="left-icon"
            ></image>
            <view
              v-else
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
              class="left-icon"
            >
              <uni-icons type="contact-filled" size="90rpx"></uni-icons>
            </view>
            <view class="name">
              <text>{{ item.userName }}</text>
              <text>{{ item.mobile }}</text>
            </view>
          </view>
        </uni-col>
        <uni-col :span="6">
          <view class="table-right">
            <text class="item-text">
              {{ formatNumberWithWan(item.totalPoints) }}
            </text>
          </view>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './styles/index.scss';

  .table-box {
    font-family:
      PingFang SC,
      PingFang SC;
    font-style: normal;
    text-transform: none;
    .grade-box {
      text-align: center;
      .grade {
        height: 64rpx;
      }
    }
    .table-right {
      text-align: center;
    }
    .table-head {
      font-weight: bold;
      font-size: 28rpx;
      color: #999999;

      .name {
        padding-left: 18rpx;
      }
    }
    .table-content {
      margin-top: 36rpx;
      display: flex;
      align-items: center;

      .table-name {
        display: flex;
        align-items: center;
        .left-icon {
          width: 64rpx;
          height: 64rpx;
          border-radius: 64rpx;
          margin-right: 8rpx;
        }
        .name {
          display: flex;
          flex-direction: column;
          text {
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            line-height: 1;
            &:last-child {
              margin-top: 8rpx;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
      .table-right {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
</style>
