<template>
	<mobile-sub-layout :title="promoStore.inviterank.title" :line-height="4" :bgColor="themeStore.theme.bgColor">
		<view class="invitationranks-container">
			<view class="tabs-view" :style="{ 'background': themeStore.theme.bgColor, 'top': appStore.headerStyle.height + 'px' }">
				<NormalTabs
					v-model="promoStore.inviterank.tabIndex"
					:normalColor="themeStore.theme.tabs.normal"
					:activeColor="themeStore.theme.tabs.active"
					:tabList="pageData.tabList"
					@change="handleChange"
				/>
				<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.seplineColor }"></view>
			</view>
			<view class="container-body">
				<view v-show="promoStore.inviterank.tabIndex === 0">
					<InvitationRanksHome />
				</view>
				<view v-show="promoStore.inviterank.tabIndex === 1">
					<InvitationRanksRank />
				</view>
				<view v-show="promoStore.inviterank.tabIndex === 2">
					<InvitationRanksTeams
						ref="invitationRanksTeamsRef"
					/>
				</view>
				<view v-show="promoStore.inviterank.tabIndex === 3">
					<InvitationRanksRuls />
				</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
	import { onMounted, reactive } from 'vue'
	import NormalTabs from '@/components/tabs/NormalTabs.vue'
	import Toast from '@/module/toast/toast.js'
	import { usePromoStore } from '@/store/usePromoStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useI18n } from 'vue-i18n'
	import InvitationRanksHome from './components/InvitationRanksHome.vue'
	import InvitationRanksRank from './components/InvitationRanksRank.vue'
	import InvitationRanksTeams from './components/InvitationRanksTeams.vue'
	import InvitationRanksRuls from './components/InvitationRanksRuls.vue'
	import { ref } from 'vue'
	
	const { t } = useI18n()
	const promoStore = usePromoStore()
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const invitationRanksTeamsRef = ref(null)
	
	const pageData = reactive({
		tabList: [
			{
				title: t('promo.invitationRanks.tab1'),
			},
			{
				title: t('promo.invitationRanks.tab2')
			},
			{
				title: t('promo.invitationRanks.tab3')
			},
			{
				title: t('promo.invitationRanks.tab4')
			},
		]
	})
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
		await promoStore.getPromoList()
		console.log(promoStore.inviterank)
	}
	
	const handleChange = ({ index }) => {
		if (index === 2) {
			invitationRanksTeamsRef.value.loadAllData()
		}
	}
</script>

<style lang="scss" scoped>
	.invitationranks-container {
		position: relative;
	}
	
	.tabs-view {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		height: 100rpx;
		z-index: 50;
	}
	
	.container-body {
		padding-top: 100rpx;
	}
</style>