<template>
    <!-- Catagories Filter Start -->
    <div class="nav" id="catagories-tab" role="tablist" aria-orientation="vertical">

        <div class="nav-link" id="catagories1-tab" data-bs-toggle="pill" data-bs-target="#catagories1" role="tab"
            aria-controls="catagories1" aria-selected="true" v-for="cate in categorys" :key="cate.cat_id">
            <div class="content" @click="handleClick(cate.cat_id)">
                <!-- <img src="@/assets/images/catagoeris/1.png" alt="catagoeris" /> -->
                <span class="font-xs title-color">{{ cate.cat_name }}</span>
            </div>
        </div>

    </div>
    <!-- Catagories Filter End -->

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCategory } from '@/services/goods'


const categorys = ref({})

onMounted(async () => {

    let res = await getCategory()
    if (res.code === 200) {
        categorys.value = res.data
    }

})

const emit = defineEmits(["itemClick"]);

// const cat_id = ref(0)

const handleClick = (id) =>{
    emit("itemClick",id)
}

</script>

<style lang="less" scoped>

</style>