<template>
    <component :is="Default || 'div'">
        <div class="container mt-24">
            <div class="row">
                <!-- <div class="col-12">
                    <h2 class="text-2xl">Category ID: {{ $route.params.category_id }}</h2>
                    <div v-for="(p, i) in products" :key="i">
                        <p>
                            <span class="border-b-1 bg-red-100 px-4">{{ p.name }}</span>
                            <span class="border-b-1 bg-red-100 px-4">{{ p.price }}</span>
                        </p>
                    </div>
                </div> -->
            </div>
        </div>
    </component>
</template>


<script setup lang="ts">
// import { useRoute } from 'vue-router';
import Default from '@/layouts/default.vue';
import { useCategoryStore } from '@/stores/category';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
// const route = useRoute()
// console.log(route);

const categoryStore = useCategoryStore()
const route = useRoute()

const products = ref([])

watch(() => route.params, async (n) => {
    categoryStore.setCategoryID(parseInt(n.category_id as string))
    const res = await categoryStore.getCategoryProducts()
    // products.value = res

}, { immediate: true })


</script>