<template>
	<view class="rank-body"
		:style="{ background: themeStore.rank.rbg, backgroundSize: '100% 100%', height: appStore.systemInfo.screenHeight + 'px' }">
		<view :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></view>
		<view class="rank-header flex items-center" style="height: 50px;"
			:style="{ background: themeStore.rank.headerBg }">
			<view class="rank-header-icon">
				<theme-image src="@/static/icon-back-white.png" class="back-image" mode="aspectFit"
					@click.stop="back"></theme-image>
			</view>
			<view class="rank-sub-header">
				<view class="rank-sub-header-content">
					<view class="rank-sub-header-content-item" :style="{
						color: active == 0 ? themeStore.text.serarchActiveColor : themeStore.text.serarchColor,
						background: active == 0 ? `bottom / cover no-repeat ${themeStore.rank.bgActiveColor}` : 'transparent',
					}" @click="changeActive(0)">
						{{ $t('promo.header.ranking') }}
					</view>
					<view class="rank-sub-header-content-item" :style="{
						color: active == 1 ? themeStore.text.serarchActiveColor : themeStore.text.serarchColor,
						background: active == 1 ? `bottom / cover no-repeat ${themeStore.rank.bgActiveColor}` : 'transparent',
					}" @click="changeActive(1)">
						{{ $t('promo.header.rules') }}
					</view>
					<view class="rank-sub-header-content-item" :style="{
						color: active == 2 ? themeStore.text.serarchActiveColor : themeStore.text.serarchColor,
						background: active == 2 ? `bottom / cover no-repeat ${themeStore.rank.bgActiveColor}` : 'transparent',
					}" @click="changeActive(2)">
						{{ $t('promo.header.myReward') }}
					</view>
				</view>
			</view>
			<view class="rank-header-icon" @click.stop="handleShareClick">
				<theme-image src="@/static/rank/icon_share.png" class="share-image" mode="aspectFit"></theme-image>
			</view>
		</view>
		<view :style="{ height: `calc(100vh - ${appStore.headerStyle.height}px)` }">

			<view class="rank-content"
				:style="{ height: (appStore.systemInfo.screenHeight - appStore.headerStyle.height) + 'px' }">
				<Leaderboard v-if="active == 0"></Leaderboard>
				<RankRules v-if="active == 1"></RankRules>
				<MyReward v-if="active == 2"></MyReward>
			</view>
		</view>
	</view>
</template>

<script setup>
import Leaderboard from '@/pages/promo/components/Leaderboard.vue';
import RankRules from '@/pages/promo/components/RankRules.vue';
import MyReward from '@/pages/promo/components/MyReward.vue';
import { ref, getCurrentInstance, onMounted } from 'vue';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';
import { useUserStore } from '@/store/useUserStore';
import { shareWithSystem } from '@/module/utils/system';

const themeStore = useThemeStore().theme.promo;
const appStore = useAppStore();
const userStore = useUserStore();
let active = ref(0);
let content = ref('');
const promoType = 5
const myAwardRec = ref([]);
const back = () => {
	uni.navigateBack();
};
const changeActive = (value) => {
	active.value = value;
};
const handleShareClick = () => {
	const { inviteLink, inviteCode } = userStore.agentInfo;
	const cid = appStore.channelId ?? '';
	const h5No = appStore.h5No ?? 1;
	const link = inviteLink.includes('?') ? inviteLink + `&cid=${cid}&h5No=${h5No}` : inviteLink + `?cid=${cid}&h5No=${h5No}&invite_code=${inviteCode}`;
	const shareObg = {
		title: 'Let\'s play games together to earn money!',
		text: "Let's play games together to earn money!",
		url: link,
	}
	shareWithSystem(shareObg)
}

onMounted(() => {
	// const instance = getCurrentInstance().proxy;
	// const eventChannel = instance.getOpenerEventChannel();
	// eventChannel.on('getContentInfo', function (data) {
	// 	console.log(data);

	// 	content.value = data;
	// });
	// getRankData()
});
</script>

<style lang="scss" scoped>
.rank-body {
	width: 100vw;
	height: 100vh;
	background-size: 100% 100%;
	overflow: hidden;

	.rank-header {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;

		.rank-header-icon {
			width: 64rpx;
			height: 64rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			margin: 0 20rpx;

			.back-image {
				width: 46rpx;
				height: 46rpx;
			}

			.share-image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.rank-sub-header {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.rank-sub-header-content {
				width: 100%;
				height: 100%;
				// background: #410505;
				border-radius: 30rpx;
				display: flex;
				justify-content: space-between;

				.rank-sub-header-content-item {
					width: 33.33%;
					height: 100%;
					// color: #fff;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Roboto;
					font-weight: 400;
					font-size: 27rpx;
				}
			}
		}

		.rank-header-text {
			width: 80%;
			text-align: center;
			line-height: 88rpx;
			// color: #fff;
			font-size: 36rpx;
		}
	}

	.rank-content {
		width: 100%;
		height: calc(100% - 50px);
	}
}
</style>
