<template>
	<view :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></view>
	<view class="earn-header">
		<view class="earn-header-content" :style="{ 'background': themeStore.theme.tabsRound.bgColor }">
			<view class="earn-header-content-item" :class="active == 0 ? 'active' : ''" :style="{ 'background': active == 0 ? themeStore.theme.tabsRound.selectBgColor : '', 'color': active == 0 ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor }" @click="changeActive(0)">{{ $t('earn.header.myRewards') }}</view>
			<view class="earn-header-content-item" :class="active == 1 ? 'active' : ''" :style="{ 'background': active == 1 ? themeStore.theme.tabsRound.selectBgColor : '',  'color': active == 1 ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor }" @click="changeActive(1)">{{ $t('earn.header.rules') }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';

const themeStore = useThemeStore()
const appStore = useAppStore();
const emit = defineEmits(['get-header-active']);
let active = ref(1);
const changeActive = (value) => {
	active.value = value;
	emit('get-header-active', value);
};
</script>

<style lang="scss" scoped>
.earn-header {
	width: 100%;
	box-sizing: border-box;
	font-size: 30rpx;
	
	.earn-header-content {
		width: 460rpx;
		height: 60rpx;
		background: #410505;
		border-radius: 30rpx;
		display: flex;
		margin: 0 auto;
		justify-content: flex-start;
		.earn-header-content-item {
			width: 50%;
			line-height: 60rpx;
			color: #e7ffff;
			text-align: center;
		}
		.active {
			background: linear-gradient(0deg, #fa4c49, #9a140c);
			border-radius: 30rpx;
		}
	}
}
</style>
