<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    enableShareAppMessage: true,
    enableShareTimeline: true,
  },
}
</route>

<template>
  <view class="flex flex-col relative">
    <view class="sticky top-0 z-99">
      <Navbar
        safeAreaInsetTop
        :bg-color="`rgba(255, 255, 255, ${opacity})`"
        placeholder
        :bordered="false"
      >
        <template #left>
          <navigator open-type="navigate" class="left-icon" url="/pages-sub/home/city/index">
            <view>
              <text
                class="color-[#303030] font-[28rpx] font-medium"
                :selectable="false"
                :decode="false"
              >
                {{ userStore.userInfo.city.provincename ?? '城市' }}
              </text>
              <view class="i-carbon-chevron-down"></view>
            </view>
          </navigator>
        </template>
        <template #title>
          <view class="title">
            <image
              class="w-[198rpx] h-[32rpx]"
              src="https://api.static.ycymedu.com/src/images/home/app-logo.svg"
            ></image>
          </view>
        </template>
      </Navbar>
    </view>
    <view class="h-[700rpx] w-full custom-background absolute top-0 left-0 z-[-1]"></view>
    <scroll-view class="flex-1" :scroll-y="true">
      <view class="h-full mt-[38rpx]">
        <Banner />
        <HomeSubMenu />
        <HotRank />
        <Consultation />
        <FabButton :initial-x="0" :initial-y="100" />
      </view>
    </scroll-view>
    <TabBar :current-page="0"></TabBar>
  </view>
</template>

<script setup lang="ts">
import TabBar from '@/components/bar/TabBar.vue'
import Navbar from '@/components/navbar/Navbar.vue'
import { useCityInfo } from '@/hooks/useCityInfoHook'
import { useUserStore } from '@/store'
import { ref } from 'vue'

import Banner from '@/components/home/Banner.vue'
import HomeSubMenu from '@/components/home/SubMenu.vue'
import HotRank from '@/components/home/HotRank.vue'
import Consultation from '@/components/home/Consultation.vue'
import FabButton from '@/components/fab/FabButton.vue'

import { getWxUserInfo } from '@/service/index/api'

const userStore = useUserStore()

useCityInfo()

const opacity = ref(0)

onPageScroll((e) => {
  const scrollTop = e.scrollTop
  opacity.value = Math.min(scrollTop / 100, 1)
})

onShow(() => {
  if (userStore.userInfo.token) {
    getWxUserInfo().then((resp) => {
      const infoData = resp.result as unknown as {
        userExtend: { provinceCode: string }
        batchName: string
        batchDataUrl: string
      }
      if (userStore.userInfo.city.code === infoData.userExtend.provinceCode) {
        userStore.setEstimatedAchievement(infoData.userExtend)
        userStore.setBatchName(infoData.batchName)
        userStore.setBatchDataUrl(infoData.batchDataUrl)
        return
      }
    })
  }
})
onShareAppMessage(() => {
  return {
    title: '六维志愿',
    path: '/pages/index/index',
    imageUrl: 'https://api.static.ycymedu.com/src/images/home/app-logo.svg',
  }
})
onShareTimeline(() => {
  return {
    title: '六维志愿',
  }
})
</script>

<style lang="scss" scoped>
.left-icon {
  position: absolute;
  left: 32rpx;
  width: max-content;
  height: 40rpx;
  color: #000;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 32rpx;
  color: #000;
}

.custom-background {
  background-image: linear-gradient(
    173deg,
    rgb(177, 221, 250) 0,
    rgb(177, 221, 250) 23%,
    rgba(255, 255, 255, 1) 90%,
    rgba(255, 255, 255, 1) 100%
  );
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}
</style>
