<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>

const store = useAppStore()
const route = useRoute()
const loginStatus = ref(useUserInfo().getLoginVisible)
const searchVal = ref('')
function handleSearch(val) {
  searchVal.value = val
}

watchEffect(()=>{
  loginStatus.value = useUserInfo().getLoginVisible;
  console.log('loginStatus>>>', loginStatus.value)
  if (route.path.includes('/search')) {
    searchVal.value = route.query.keywords
  }
})

watchEffect(()=>{
  store.setSearchVal(searchVal.value)
})
// console.log()
</script>

<style scoped></style>
