<!-- 佣金排行榜 -->
<template>
  <s-layout title="佣金排行榜">
    <view class="commission-rank">
      <view class="header">
        <view class="rank" v-if="state.position">
          您目前的排名
          <text class="num">{{ state.position }}</text> 名
        </view>
        <view class="rank" v-else>您目前暂无排名</view>
      </view>
      <view class="wrapper">
        <view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
          <view
            class="item"
            :class="state.currentTab === index ? 'font-color' : ''"
            v-for="(item, index) in tabMaps"
            :key="index"
            @click="switchTap(index)"
          >
            {{ item }}
          </view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in state.pagination.list" :key="index">
            <view class="num" v-if="index <= 2">
              <image :src="'/static/images/medal0' + (index + 1) + '.png'" />
            </view>
            <view class="num" v-else>
              {{ index + 1 }}
            </view>
            <view class="pictrue">
              <image :src="item.avatar" />
            </view>
            <view class="text">{{ item.nickname }}</view>
            <view class="people">￥{{ fen2yuan(item.brokeragePrice) }}</view>
          </view>
        </view>
        <view class="noCommodity" v-if="state.pagination.list.length === 0">
          <emptyPage title="暂无排行～" />
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadMore"
    />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { fen2yuan } from '@/sheep/hooks/useGoods';
  import { concat } from 'lodash-es';
  import { resetPagination, getWeekTimes, getMonthTimes } from '@/sheep/helper/utils';

  const tabMaps = ['周排行', '月排行'];

  const state = reactive({
    currentTab: 0,
    position: 0, // 排名
    pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
    },
    loadStatus: '',
  });

  async function switchTap(index) {
    state.currentTab = index;
    resetPagination(state.pagination);
    calculateTimes();
    getBrokerageRankList();
  }

  async function getBrokerageRankList() {
    const { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.pagination.list = concat(state.pagination.list, data.list);
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
    if (state.pagination.pageNo === 1) {
      getBrokerageRankNumber();
    }
  }

  async function getBrokerageRankNumber() {
    const { code, data } = await BrokerageApi.getRankByPrice({
      times: state.times,
    });
    if (code !== 0) {
      return;
    }
    state.position = data;
  }

  function formatDate(date) {
    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
  }

  function calculateTimes() {
    let times;
    if (state.currentTab === 0) {
      times = getWeekTimes();
    } else {
      times = getMonthTimes();
    }
    state.times = [formatDate(times[0]), formatDate(times[1])];
  }

  onLoad(function () {
    calculateTimes();
    getBrokerageRankList();
  });

  // 加载更多
  function loadMore() {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getBrokerageRankList();
  }

  // 上拉加载更多
  onReachBottom(() => loadMore());
</script>
<style lang="scss" scoped>
  .commission-rank {
    .header {
      background: url('data:image/jpeg;base64,[encoded data, 27844 characters]')
        no-repeat;
      width: 100%;
      height: 344rpx;
      background-size: 100% 100%;

      .rank {
        font-size: 33rpx;
        color: #fff;
        position: absolute;
        top: 160rpx;
        left: 48rpx;

        .num {
          font-size: 51rpx;
          font-weight: bold;
          margin: 0 10rpx;
        }
      }
    }

    .wrapper {
      width: 710rpx;
      background-color: #fff;
      border-radius: 14rpx;
      margin: -76rpx auto 0 auto;

      .nav {
        height: 99rpx;
        border-bottom: 2.5rpx solid #f3f3f3;
        font-size: 30rpx;
        font-weight: bold;
        color: #999;
        line-height: 99rpx;

        .item.font-color {
          border-bottom: 4rpx solid #e93323;
          margin-top: -2rpx;
          color: #e93323;
        }
      }

      .list {
        padding: 0 20rpx;

        .item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-bottom: 1px solid #f3f3f3;
          height: 101rpx;
          font-size: 28rpx;

          .num {
            color: #666;
            flex: 0.08;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            image {
              width: 50rpx;
              height: 50rpx;
            }
          }

          .pictrue {
            flex: 0.15;

            image {
              width: 68rpx;
              height: 68rpx;
              display: block;
              border-radius: 50%;
              margin: 0 auto;
            }
          }

          .text {
            color: #333;
            flex: 0.5;
          }

          .people {
            text-align: right;
            flex: 0.27;
          }
        }
      }
    }
  }
</style>
