<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 />
        <ADSpace />
        <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 ADSpace from '../components/ADSpace.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) => {
      if (resp.code === 200) {
        const infoData = resp.result as unknown as {
          userExtend: { provinceCode: string }
          batchName: string
          batchDataUrl: string
          mobile: string
          sex: number
        }
        if (userStore.userInfo.city.code === infoData.userExtend.provinceCode) {
          userStore.setEstimatedAchievement(infoData.userExtend)
          userStore.setBatchName(infoData.batchName)
          userStore.setBatchDataUrl(infoData.batchDataUrl)
          userStore.setUserBaseInfo({ mobile: infoData.mobile, sex: infoData.sex })
          return
        }
      }
    })
  }
})
onShareAppMessage(() => {
  return {
    title: '六纬志愿',
    path: '/pages/home/index/index',
    imageUrl: 'https://api.static.ycymedu.com/images/share.png',
  }
})
onShareTimeline(() => {
  return {
    title: '六纬志愿',
  }
})

onLoad(() => {
  const updateManager = uni.getUpdateManager()
  updateManager.onCheckForUpdate(function (res) {
    // 请求完新版本信息的回调
    if (res.hasUpdate) {
      uni.showToast({
        title: '更新提示',
        content: '新版本已经准备好，将进行更新',
      })
    }
  })

  updateManager.onUpdateReady(function () {
    uni.showModal({
      title: '更新提示',
      content: '新版本已经准备好，是否重启应用？',
      success: function (res) {
        if (res.confirm) {
          // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
          updateManager.applyUpdate()
        }
      },
    })
  })

  updateManager.onUpdateFailed(function () {
    // 新版本下载失败
    uni.showToast({
      title: '更新失败',
      icon: 'none',
    })
  })
})
</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>
