<!-- 佣金排行榜 -->
<template>
	<s-layout title="佣金排行榜">
		<view class="CommissionRank">
			<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 acea-row row-between-wrapper" v-for="(item, index) in state.rankList"
						: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="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="item.avatar" />
							</view>
							<view class="text line1">{{ item.nickname }}</view>
						</view>
						<view class="people font-color">￥{{ fen2yuan(item.brokeragePrice) }}</view>
					</view>
				</view>
				<view class="noCommodity"
					v-if="state.rankList.length === 0 && (state.page !== 1 || state.active === 0)">
					<emptyPage title="暂无排行～" />
				</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';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';

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

	const state = reactive({
		currentTab: 0,
		position: 0, // 排名
		rankList: [],
	});

	async function switchTap(index) {
		state.currentTab = index;
		state.rankList = [];
		calculateTimes();
		getBrokerageRankList();
		getBrokerageRankNumber();
	}

	async function getBrokerageRankList() {
		const {
			code,
			data
		} = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
			pageNo: 1,
			pageSize: 10,
			'times[0]': state.times[0],
			'times[1]': state.times[1],
		});
		if (code !== 0) {
			return;
		}
		state.rankList = data.list;
	}

	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();
		getBrokerageRankNumber();
	});

	// 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>
	.CommissionRank .header {
		background: url('data:image/jpeg;base64,[encoded data, 27844 characters]') no-repeat;
		width: 100%;
		height: 344rpx;
		background-size: 100% 100%;
	}

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

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

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

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

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

	.CommissionRank .wrapper .list {
		padding: 0 30rpx;
	}

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

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

	.CommissionRank .wrapper .list .item .num image {
		width: 34rpx;
		height: 40rpx;
		display: block;
	}

	.CommissionRank .wrapper .list .item .picTxt {
		width: 350rpx;
	}

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

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

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

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