<template>
	<view>
		<view class="ft15 pt30 plr30" :style="{ color: themeStore.theme.text.light }">
			{{ $t('promo.invitationRanks.eventRewards') }}
		</view>
		<view class="flex-scenter pt30">
			<RoundSegmentControl
				v-model="promoStore.inviterank.rulsTabIndex"
				:list="[
					$t('promo.invitationRanks.commission'),
					$t('promo.invitationRanks.ranking'),
				]"
			/>
		</view>
		<view v-if="promoStore.inviterank.rulsTabIndex === 0" style="padding: 30rpx;">
			<RewardsList
				:list="promoStore.inviterank.content.headConfig || []"
				:title1="$t('promo.invitationRanks.rank')"
				:title2="$t('promo.invitationRanks.rewards')"
				key1="count"
				key2="award"
			/>
		</view>
		<view v-if="promoStore.inviterank.rulsTabIndex === 1" style="padding: 30rpx;">
			<RewardsList
				:list="promoStore.inviterank.content.config || []"
				:title1="$t('promo.invitationRanks.rank')"
				:title2="$t('promo.invitationRanks.rewards')"
				key1="rankRangeShow"
				key2="award"
			/>
			<view class="ft15 pt30 plr30 text-a-center">
				{{ $t('promo.invitationRanks.rulsTip1') }}: {{ promoStore.inviterank.content.times }} {{ $t('promo.invitationRanks.times') }}
			</view>
			<view class="ft12" style="line-height: 1.5;">
				<view class="flex-acenter ptb16">
					<theme-image src="@/static/promo/rz.png" style="width: 30rpx; height: 30rpx;"></theme-image>
					<view class="ml12" :style="{ color: themeStore.theme.text.highlight }">
						{{ $t('promo.invitationRanks.rulsTipTitle1') }}
					</view>
				</view>
				<view>
					{{ promoStore.inviterank.startTime }} - {{ promoStore.inviterank.endTime }}
				</view>
				<view class="flex-acenter ptb16">
					<theme-image src="@/static/promo/rz.png" style="width: 30rpx; height: 30rpx;"></theme-image>
					<view class="ml12" :style="{ color: themeStore.theme.text.highlight }">
						{{ $t('promo.invitationRanks.rulsTipTitle2') }}
					</view>
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes1-1') }}
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes1-2') }}
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes1-3') }}
				</view>
				<view class="flex-acenter ptb16">
					<theme-image src="@/static/promo/rz.png" style="width: 30rpx; height: 30rpx;"></theme-image>
					<view class="ml12" :style="{ color: themeStore.theme.text.highlight }">
						{{ $t('promo.invitationRanks.rulsTipTitle3') }}
					</view>
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes2-1') }}
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes2-2') }}
				</view>
				<view>
					{{ $t('promo.invitationRanks.rulsTipDes2-3') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { usePromoStore } from '@/store/usePromoStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { reactive } from 'vue'
	import RewardsList from '@/components/list/RewardsList.vue'
	import RoundSegmentControl from '@/components/segment/RoundSegmentControl.vue'
	
	const promoStore = usePromoStore()
	const appStore = useAppStore()
	const themeStore = useThemeStore()
	
	const pageData = reactive({
		list1: [
			{
				rank: 5,
				rewards: 9999
			},
			{
				rank: 20,
				rewards: 9999
			},
			{
				rank: 40,
				rewards: 9999
			},
			{
				rank: 90,
				rewards: 9999
			},
		],
		list2: [
			{
				rank: 1,
				rewards: 9999
			},
			{
				rank: 2,
				rewards: 9999
			},
			{
				rank: 3,
				rewards: 9999
			},
			{
				rank: 90,
				rewards: 9999
			},
		]
	})
</script>

<style lang="scss" scoped>
	
</style>