<script setup lang="ts">
import { onMounted, watchEffect, toValue } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import axios from 'axios'
import { useCategoryStore } from './stores/category'
import { useProductListStore } from './stores/product_list'

const categoryStore = useCategoryStore()
const productListStore = useProductListStore()

onMounted(() => {
  // 请求分类列表
  categoryStore.getList()
})

watchEffect(() => {
  if (toValue(categoryStore?.list)) {
    const cId = categoryStore?.list?.[0]?.list?.[0]?.id
    if (cId) productListStore.updateCategory(cId)
  }
})
</script>

<template>
  <Header />
  <div class="tw-min-h-[700px]">
    <KeepAlive>
      <RouterView />
    </KeepAlive>
  </div>
  <Footer />
</template>