<template>
	<s-layout title="推广人排行榜">
		<view class="PromoterRank" style='backgroundColor:red'>
			<view class="redBg bg-color">
				<view class="header">
					<view class="nav acea-row row-center-wrapper" style='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>
					<!-- top3 排名 -->
					<view class="rank acea-row row-bottom row-around">
						<view class="item" v-show="state.two.id">
							<view class="pictrue">
								<image :src="state.two.avatar"></image>
							</view>
							<view class="name line1">{{state.two.nickname}}</view>
							<view class="num">{{ state.two.brokerageUserCount }}人</view>
						</view>
						<view class="item" v-show="state.one.id">
							<view class="pictrue">
								<image :src="state.one.avatar"></image>
							</view>
							<view class="name line1">{{state.one.nickname}}</view>
							<view class="num">{{ state.one.brokerageUserCount }}人</view>
						</view>
						<view class="item" v-show="state.three.id">
							<view class="pictrue">
								<image :src="state.three.avatar"></image>
							</view>
							<view class="name line1">{{state.three.nickname}}</view>
							<view class="num">{{ state.three.brokerageUserCount }}人</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 其它排名 -->
			<view class="list" v-if="state.rankList.length">
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in state.rankList" :key="index">
					<view class="num">{{ index + 4 }}</view>
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="item.avatar"></image>
						</view>
						<view class="text line1">{{item.nickname}}</view>
					</view>
					<view class="people font-color">{{ item.brokerageUserCount }}人</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';

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

  const state = reactive({
    currentTab: 0,

		rankList: [],
		times: [],

		one: {}, // 排名第一
		two: {}, // 排名第二
		three: {}, // 排名第三
	});

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

	async function getRankList() {
    // 重置数据
    state.one = {};
    state.two = {};
    state.three = {};
    state.rankList = [];
    // 查询
    const { code, data } = await BrokerageApi.getBrokerageUserRankPageByUserCount({
      pageNo: 1,
      pageSize: 10,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.rankList = data.list;
    state.one = state.rankList.shift() || {};
    state.two = state.rankList.shift() || {};
    state.trhee = state.rankList.shift() || {};
  }

	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');
	}

  // TODO 非繁人：此处可考虑抽离
  // 此处可考虑抽离
	/**
	 * 获得当前周的开始和结束时间
	 */
	function getWeekTimes() {
		const today = new Date();
		const dayOfWeek = today.getDay();
		return [
			new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
			new Date(today.getFullYear(), today.getMonth(), today.getDate() + (6 - dayOfWeek), 23, 59, 59)
		]
	}

	/**
	 * 获得当前月的开始和结束时间
	 */
	function getMonthTimes() {
		const today = new Date();
		const year = today.getFullYear();
		const month = today.getMonth();
		const startDate = new Date(year, month, 1, 0, 0, 0);
		const nextMonth = new Date(year, month + 1, 1);
		const endDate = new Date(nextMonth.getTime() - 1);
		return [startDate, endDate]
	}
  // TODO 非繁人：css 需要优化下；并且展示样式有问题
</script>

<style lang='scss' scoped>
	.PromoterRank .redBg {
		padding: 45rpx 0 30rpx 0;
	}

	.PromoterRank .header {
		background: url("data:image/jpeg;base64,[encoded data, 5160 characters]") no-repeat;
		width: 100%;
		height: 460rpx;
		background-size: 100% 100%;
	}

	.PromoterRank .header .nav {
		width: 450rpx;
		height: 66rpx;
		border: 1px solid #fff;
		border-radius: 33rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 auto;
	}

	.PromoterRank .header .nav .item {
		width: 223rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
		background-color: #fff;
		border-radius: 33rpx 0 0 33rpx;
		color: red
	}

	.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
		background-color: #fff;
		border-radius: 0 33rpx 33rpx 0;
		color: red
	}

	.PromoterRank .header .rank {
		padding: 0 20rpx;
		margin-top: 30rpx;
	}

	.PromoterRank .header .rank .item .pictrue {
		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;
	}

	.PromoterRank .header .rank .item .pictrue image {
		position: absolute;
		width: 130rpx;
		height: 130rpx;
		display: block;
		bottom: 2rpx;
		border-radius: 50%;
		left: 50%;
		margin-left: -65rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
		background-image: url("data:image/png;base64,[encoded data, 9400 characters]");
		width: 156rpx;
		height: 205rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
		width: 150rpx;
		height: 150rpx;
		margin-left: -75rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
		background-image: url("data:image/png;base64,[encoded data, 8676 characters]");
	}

	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
		margin-left: -64rpx;
	}

	.PromoterRank .header .rank .item .name {
		font-size: 30rpx;
		color: #fff;
		margin-top: 22rpx;
		text-align: center;
		width: 170rpx;
	}

	.PromoterRank .header .rank .item .num {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.PromoterRank .list {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: -60rpx auto 0 auto;
		padding: 0 30rpx;
	}

	.PromoterRank .list .item {
		border-bottom: 1px solid #f3f3f3;
		height: 101rpx;
		font-size: 28rpx;
	}

	.PromoterRank .list .item .num {
		color: #666;
		width: 70rpx;
	}

	.PromoterRank .list .item .picTxt {
		width: 350rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue {
		width: 68rpx;
		height: 68rpx;
	}

	.PromoterRank .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
	}

	.PromoterRank .list .item .picTxt .text {
		width: 262rpx;
		color: #333;
	}

	.PromoterRank .list .item .people {
		width: 175rpx;
		text-align: right;
	}
</style>