<template>
  <s-layout title="推广人排行榜">
    <view class="promoter-rank">
      <view class="nav">
        <view
          class="item"
          :class="state.currentTab === index ? 'active' : ''"
          v-for="(item, index) in tabMaps"
          :key="index"
          @click="switchTap(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="top-list">
        <template v-for="(item, index) in state.pagination.list" :key="index">
          <view v-if="index < 3" class="item">
            <view class="pictrue">
              <view class="num">
                <text>{{ index + 1 }}</text>
              </view>
              <image class="image" :src="item.avatar"></image>
            </view>
            <view class="people">{{ item.brokerageUserCount }}人</view>
            <view class="nickname">{{ item.nickname }}</view>
          </view>
        </template>
      </view>
    </view>
    <view class="other-list">
      <template v-for="(item, index) in state.pagination.list" :key="index">
        <view class="item" v-if="index > 2">
          <view class="num">{{ index + 1 }}</view>
          <view class="pictrue">
            <image class="image" :src="item.avatar"></image>
          </view>
          <view class="nickname">{{ item.nickname }}</view>
          <view class="people">{{ item.brokerageUserCount }}人</view>
        </view>
      </template>
    </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 { concat } from 'lodash-es';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { resetPagination, getWeekTimes, getMonthTimes } from '@/sheep/helper/utils';

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

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

  function switchTap(index) {
    if (state.currentTab === index) {
      return;
    }
    state.currentTab = index;
    resetPagination(state.pagination);
    calculateTimes();
    getRankList();
  }

  async function getRankList() {
    state.loadStatus = 'loading';
    // 查询
    const { code, data } = await BrokerageApi.getBrokerageUserRankPageByUserCount({
      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';
  }

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

  // 上拉加载更多
  onReachBottom(() => loadMore());

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

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

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

<style lang="scss" scoped>
  .promoter-rank {
    padding: 45rpx 0 30rpx 0;
    background: url('data:image/jpeg;base64,[encoded data, 5160 characters]')
      no-repeat;
    width: 100%;
    background-size: 100% 100%;

    .nav {
      display: flex;
      width: 450rpx;
      height: 66rpx;
      border: 1px solid #fff;
      border-radius: 33rpx;
      font-size: 30rpx;
      color: #fff;
      margin: 0 auto;
      overflow: hidden;

      .item {
        width: 50%;
        height: 100%;
        text-align: center;
        line-height: 60rpx;

        &.active {
          color: #333;
          background-color: white;
        }
      }
    }

    .top-list {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 50rpx;

      .item {
        margin: 0 20rpx;

        .pictrue {
          position: relative;
          background: url('data:image/png;base64,[encoded data, 7676 characters]')
            no-repeat;
          background-size: 100% 100%;
          width: 136rpx;
          height: 177rpx;
          position: relative;
          margin: 0 auto;
          text-align: center;

          .image {
            display: inline-block;
            margin-top: 47rpx;
            width: 130rpx;
            height: 130rpx;
            border-radius: 50%;
          }

          .num {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;

            text {
              display: inline-block;
              width: 30rpx;
              height: 30rpx;
              line-height: 30rpx;
              color: white;
              border-radius: 50%;
              overflow: hidden;
              font-size: 22rpx;
              background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
            }
          }
        }

        .nickname {
          color: white;
          font-weight: 20rpx;
          text-align: center;
          max-width: 200rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .people {
          text-align: center;
          color: white;
          font-weight: 20rpx;
        }

        &:first-second {
          .pictrue {
            background: url('data:image/png;base64,[encoded data, 9400 characters]')
              no-repeat;
          }
        }

        &:first-third {
          .pictrue {
            background: url('data:image/png;base64,[encoded data, 8676 characters]')
              no-repeat;
          }
        }
      }
    }
  }

  .other-list {
    margin-top: 20rpx;
    padding: 0 16rpx;

    .item {
      border-radius: 14rpx;
      margin-bottom: 12rpx;
      padding: 15rpx 20rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: white;

      .num {
        flex: 0.1;
        text-align: center;
      }

      .pictrue {
        flex: 0.2;
        display: flex;
        align-items: center;

        .image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }
      }

      .nickname {
        flex: 0.5;
      }

      .people {
        flex: 0.2;
        text-align: center;
      }
    }
  }
</style>
