<template>
	<common-layout>
		<view class="invitationranks-containe">
			<view class="tabs-view-container">
				<view class="tabs-view" :style="{ 'background': themeStore.theme.bgColor, 'padding-top': appStore.headerStyle.statusBarHeight + 'px', 'height': appStore.headerStyle.height }">
					<NormalTabs
						v-model="appStore.earnV2TabIndex"
						:normalColor="themeStore.theme.tabs.normal"
						:activeColor="themeStore.theme.tabs.active"
						:tabList="pageData.tabList"
						@change="handleChange"
					/>
				</view>
				<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.seplineColor }"></view>
			</view>
			<view class="container-body">
				<view v-if="appStore.earnV2TabIndex === 0" :style="{paddingTop: (appStore.headerStyle.statusBarHeight + 10) + 'px'}">
					<EarnV2Home />
				</view>
				<view v-if="appStore.earnV2TabIndex === 1" :style="{paddingTop: (appStore.headerStyle.statusBarHeight + 10) + 'px'}">
					<EarnV2Reward />
				</view>
				<view v-if="appStore.earnV2TabIndex === 2" :style="{paddingTop: (appStore.headerStyle.statusBarHeight + 10) + 'px'}">
					<EarnV2Teams />
				</view>
				<view v-if="appStore.earnV2TabIndex === 3" :style="{paddingTop: (appStore.headerStyle.statusBarHeight + 10) + 'px'}">
					<EarnV2Rules />
				</view>
			</view>
		</view>
	</common-layout>
</template>

<script setup>
	import { onMounted, reactive } from 'vue'
	import NormalTabs from '@/components/tabs/NormalTabs.vue'
	import Toast from '@/module/toast/toast.js'
	import { useThemeStore } from '@/store/useThemeStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useI18n } from 'vue-i18n'
	import EarnV2Home from './EarnV2Home.vue'
	import EarnV2Reward from './EarnV2Reward.vue'
	import EarnV2Teams from './EarnV2Teams.vue'
	import EarnV2Rules from './EarnV2Rules.vue'
	import { ref } from 'vue'
	
	const { t } = useI18n()
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	
	const pageData = reactive({
		tabList: [
			{
				title: t('earn.tab1'),
			},
			{
				title: t('earn.tab2')
			},
			{
				title: t('earn.tab3')
			},
			{
				title: t('earn.tab4')
			},
		]
	})
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
    
	}
	
	const handleChange = ({ index }) => {
	}
</script>

<style lang="scss" scoped>
	.invitationranks-container {
		position: relative;
	}

	.tabs-view-container {
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		height: 100rpx;
		z-index: 50;
	}
	
	.tabs-view {
		display: flex;
		justify-content: center;
		padding: 0rpx 30rpx;
	}
	
	.container-body {
		padding-top: 100rpx;
	}
</style>