<template>
  <ie-page bg-color="white">
    <ie-navbar bg-color="#FFFFFF" transparent custom-back :click-hover="false">
      <template #headerLeft>
        <view class="flex items-center gap-7 text-fore-subtitle">
          <ie-image is-oss src="/volunteer/index/navbar_title.png" custom-class="w-146 h-36" />
          <text>·</text>
          <text class="text-30 font-medium">{{ examTypeName }}</text>
        </view>
      </template>
      <template #headerRight>
        <view class="flex items-center gap-4 text-fore-subtitle font-medium">
          <uv-icon name="map" size="16" color="#333" />
          <text class="text-30">{{ userStore.getLocation }}</text>
        </view>
      </template>
    </ie-navbar>
    <volunteer-banner :style="{ marginTop: (baseStickyTop + 10) + 'px' }" />
    <volunteer-menu />
    <ie-gap />
    <volunteer-policy />
    <volunteer-tier v-if="userStore.isHN" />
    <template #tabbar>
      <ie-tabbar :active="1" />
    </template>
  </ie-page>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';
import { EnumDictName } from '@/common/enum';
import { useDictStore } from "@/store/dictStore";
import { useNavbar } from "@/hooks/useNavbar";
import VolunteerBanner from "@/pagesMain/pages/volunteer/components/volunteer-banner.vue";
import VolunteerMenu from "@/pagesMain/pages/volunteer/components/volunteer-menu.vue";
import VolunteerPolicy from "@/pagesMain/pages/volunteer/components/volunteer-policy.vue";
import VolunteerTier from "@/pagesMain/pages/volunteer/components/volunteer-tier.vue";

const { transferTo } = useTransferPage();
const userStore = useUserStore();
const dictStore = useDictStore()
const { baseStickyTop } = useNavbar();

const examTypeName = computed(() => {
  return dictStore.getDictLabel(EnumDictName.EXAM_TYPE, userStore.getExamType)
})

// 为了让子组件触发页面滚动
onPageScroll(() => { })
</script>

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