<template>
	<common-layout>
		<mobile-header>
			<template #title>
				<view class="flex-scenter flex-acenter">
					<EarnHeader
						@get-header-active="getHeaderActive"
					/>
				</view>
			</template>
		</mobile-header>
		<view class="earn-body" :style="{ 'padding-top': appStore.headerStyle.height + 'px' }">
			<view class="earn-content">
				<Rule v-if="headerActive == 1"></Rule>
				<MyRewards v-if="headerActive == 0"></MyRewards>
			</view>
			<!-- <view class="earn-footer-fixed" :style="{ 'background-color': themeStore.theme.bgColor, 'bottom':  }"> -->
			<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
			<EarnFooter :url="link" style="margin-top: 10rpx"></EarnFooter>
			<!-- </view> -->
		</view>
	</common-layout>
</template>

<script setup>
import EarnFooter from '@/pages/earn/components/EarnFooter.vue';
import EarnHeader from '@/pages/earn/components/EarnHeader.vue';
import Rule from '@/pages/earn/components/Rule.vue';
import MyRewards from '@/pages/earn/components/MyRewards.vue';
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import { getAgentInfoApi } from '@/api/earn.js';
import { requestAppEventUpload } from '@/api/app.js';
import { onShow } from '@dcloudio/uni-app';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';

const appStore = useAppStore();
const themeStore = useThemeStore()

let headerActive = ref(1);
let link = ref('');

onMounted(() => {
	getAgentInfo();
	requestAppEventUpload({
		logParam: '',
		logType: 1006
	})
	requestAppEventUpload({
		logParam: '',
		logType: 1002
	})
});

const getHeaderActive = (value) => {
	headerActive.value = value;
};

const getAgentInfo = async () => {
	const { code, data } = await getAgentInfoApi();
	if (code == 200) {
		link.value = data.referralUrl;
	}
}
</script>

<style lang="scss" scoped>
.earn-body {
	position: relative;
	width: 100vw;
	padding-bottom: 30rpx;
	.earn-content {
		width: 100%;
	}
	
	.earn-footer-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 280rpx;
		z-index: 8;
	}
}
</style>
