<template>
  <Header />
  <template v-if="!route.meta.hiddenBanner">
    <BannerSearch @search="handleSearch" v-if="store.getMenuTheme === 'dark' && store.getHomeBanner === false" />
    <BannerSimple :title="store.getBannerTitle" v-else-if="store.getMenuTheme === 'light'&&store.getHomeBanner === false" />
    <BannerHomeBanner v-else></BannerHomeBanner>
  </template>
<!--  <div :style="`transition:margin .2s;height: 500px;background-color: tan;margin-top: ${store.getMenuTheme === 'dark' ? '-100px': 0}`"></div>-->

  <slot />
  <Footer />

  <Login v-if="loginStatus" />
</template>

<script setup lang="ts">
console.log('tabLayout init........')
const store = useAppStore()
const route = useRoute()
const loginStatus = ref(useUserInfo().getLoginVisible)
const searchVal = ref('')
function handleSearch(val: string) {
  searchVal.value = val
  store.setSearchVal(val)
}

watchEffect(()=>{
  loginStatus.value = useUserInfo().getLoginVisible;
})

onMounted(()=>{
  if (route.path.includes('/search')) {
    console.log('if? tabLayout search init........', route.path, route.query)
    // searchVal.value = route.query.keywords as unknown as  string;
    store.setSearchVal(route.query.keywords as unknown as string)
  }
})


watchEffect(()=>{
  // searchVal.value = route.query.keywords
  // console.log('route.query.keywords>>>', route.query.keywords)
  // store.setSearchVal(route.query.keywords)
  console.log('tabLayout search init........', route.path)
  if (route.path.includes('/search')) {
    store.setSearchVal(route.query.keywords as unknown as string)
  }
})
// console.log()
</script>

<style scoped></style>
