<route lang="json">
{
  "actions": ["login"],
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<!-- keepalive效果：先用if来控制是否渲染组件，后用show来控制组件的显示和隐藏，每个页面的if控制只修改一次，首页的if默认是true -->
<template>
  <view v-if="tabBarList[0].show" v-show="curTabBar === 'home'">
    <Home />
  </view>
  <view v-if="tabBarList[1].show" v-show="curTabBar === 'work'">
    <Work />
  </view>
  <view v-if="tabBarList[2].show" v-show="curTabBar === 'share'">
    <Share />
  </view>
  <view v-if="tabBarList[3].show" v-show="curTabBar === 'mine'">
    <Mine :scroll-page="scrollPage" />
  </view>
</template>

<script lang="ts">
  // 主动声明 onPageScroll ,通知小程序该页面需要 onPageScroll
</script>

<script setup lang="ts">
  import { useUserStore } from '@/stores/modules/userStore'
  import { onPageScroll } from '@dcloudio/uni-app'

  import Home from './components/home/index.vue'
  import Mine from './components/mine/index.vue'
  import Share from './components/share/index.vue'
  import Work from './components/work/index.vue'

  export default {
    onPageScroll() {},
  }

  const userStore = useUserStore()
  const tabBarList = ref(userStore.tabBar)
  const curTabBar = computed(() => userStore.curTabBar)

  const scrollPage = ref(false)

  onPageScroll((e) => {
    if (e.scrollTop < 44) {
      scrollPage.value = false
    } else if (e.scrollTop > 44) {
      scrollPage.value = true
    }
  })

  onLoad(() => {
    // 测试
    // uni.setLocale('en')
    userStore.initThemeAction()
  })
</script>

<style lang="scss">
  .content {
    @apply gap-16px flex flex-col items-center justify-center;
  }
</style>
