<template>
  <scroll-view class="" :scroll-y="true">
    <view class="gradient-background relative">
      <wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
        <template #left>
          <navigator open-type="navigate" class="left-icon" url="/pages-sub/home/city/index">
            <text
              class="color-[#303030] font-[28rpx] font-medium"
              :selectable="false"
              :decode="false"
            >
              {{ userStore.userInfo.city.provincename ?? '城市' }}
            </text>
          </navigator>
        </template>
        <template #title>
          <view class="title">
            <image class="w-[198rpx] h-[28rpx]" src="/static/images/home/app-logo.svg"></image>
          </view>
        </template>
      </wd-navbar>
      <image
        class="h-[700rpx] w-full absolute top-0 left-0 z-[-1]"
        src="/static/images/home/home-background.png"
      />
    </view>
    <view class="h-full mt-[48rpx]">
      <Banner />
      <HomeSubMenu />
      <HotRank />
      <Consultation />
      <Fab />
    </view>
  </scroll-view>
  <TabBar :current-page="0"></TabBar>
</template>

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

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 Fab from '@/components/fab/Fab.vue'

const userStore = useUserStore()

useCityInfo()

// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherRefresh = async () => {
  // 开始动画
  isTriggered.value = true
  setTimeout(function fn() {
    console.log('refresh - onRefresherRefresh')
    // 关闭动画
    isTriggered.value = false
  }, 1000)
}
</script>

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

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