<template>
  <ie-page bg-color="white">
    <ie-navbar transparent bg-color="#FFFFFF" :placeholder="false" custom-back :click-hover="false">
      <template #headerLeft>
        <view class="flex items-center">
          <view class="text-36 text-fore-title font-bold">单招一卡通</view>
          <view class="w-6 h-6 rounded-2 bg-black mx-12"></view>
          <view>升学备考好帮手</view>
          <view v-if="userStore.getLocation" class="ml-10 flex items-center gap-x-4" @click="handleChangeLocation">
            <ie-image src="/static/image/icon-location.png" custom-class="w-20 h-24" mode="aspectFill" />
            <text class="text-26 text-primary">{{ userStore.getLocation }}</text>
          </view>
        </view>
      </template>
    </ie-navbar>
    <view class="absolute top-0 left-0 right-0 z-0 h-[489rpx] bg-gradient-to-b from-[#6ACAFF] to-white"></view>
    <view class="relative z-2" :style="{ paddingTop: baseStickyTop + 10 + 'px' }">
      <index-banner />
      <index-guide @detail="handleDetail" />
      <index-news @detail="handleDetail" />

    </view>
    <template #tabbar>
      <ie-tabbar :active="0" />
      <index-popup ref="popupRef" />
    </template>
  </ie-page>
</template>

<script lang="ts" setup>
import IndexBanner from './components/index-banner.vue';
import IndexGuide from './components/index-guide.vue';
import IndexNews from './components/index-news.vue';
import indexPopup from './components/index-popup.vue';

import { useUserStore } from '@/store/userStore';
// @ts-ignore
import mxConst from '@/common/mxConst';
import { useTransferPage } from '@/hooks/useTransferPage';
import { useNavbar } from '@/hooks/useNavbar';
import { onPageShow } from '@dcloudio/uni-app';
const { transferTo } = useTransferPage();
const { baseStickyTop } = useNavbar();
const scrollTop = ref(0);
const isHide = ref(false);
const userStore = useUserStore();

const handleDetail = async (id: number | string, title?: string) => {
  if (('' + id).includes(',')) {
    transferTo(mxConst.routes.newsGroup, {
      data: {
        ids: id,
        title: title
      }
    });
  } else {
    transferTo(mxConst.routes.newsDetail, {
      data: {
        id: id,
        title: title
      }
    })
  }
}

const popupRef = ref();
const checkProvinceInfo = () => {
  if (!userStore.isLogin && !userStore.tempInfo?.location) {
    popupRef.value.open();
  }
}
const checkTeacherInfo = async () => {
  const isTeacherInfoComplete = await userStore.checkInfoComplete();
}
const handleChangeLocation = () => {
  if (userStore.isLogin) {
    return;
  }
  popupRef.value.open();
}
onHide(() => {
  isHide.value = true;
})
onPageScroll((e) => {
  if (!isHide.value) {
    scrollTop.value = e.scrollTop;
  }
});
onShow(() => {
  setTimeout(() => {
    checkProvinceInfo();
    checkTeacherInfo();
  }, 500);
  isHide.value = false;
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: scrollTop.value,
      duration: 0
    });
  }, 0);
});
</script>

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