<script setup>
const route = useRoute();

const cateData = computed(() => cateRes.value.data);

const productList = computed(() => prodRes.value.data);

const cat_id = ref(route.params.cat_id);

watch(()=>route.params.cat_id,(nVal)=>{
  if(nVal && nVal > 0){
    cat_id.value = nVal;
  }
}, { immediate: true })

// 取得類別資料
  const { data: cateRes } = await useMyFetch('/product/getCategory', "GET", { cat_id })

// 取得產品列表
  const { data: prodRes } = await useMyFetch('/product/getProductList', "GET", { cat_id })

</script>

<template>
  <div>
    <div class="toolbar">
      <div class="tTitle">{{ cateData.parent_name }}</div>
    </div>
    <div class="content">
      <div class="block">
        <div class="bName"> {{ cateData.name }} 
            <!-- <span>{{ props.pData.nameEn }}</span> -->
        </div>
        <div class="bDesc">{{ cateData.description }}</div>
        <div class="cardGroup row g-3">
          <NuxtLinkLocale class="card col-6 col-md-6 col-lg-3" v-for="(prod, i) in productList" :key="i"
          :to="{path: '/products/detail/'+prod.id}">
            <div class="card-body">
              <div class="imgCnt md">
                <img :src="prod.imageurl" :alt="prod.name">
              </div>
            </div>
            <!-- <div class="card-footer">
              <div class="card-title">{{ prod.name }}</div>
              <div class="card-desc">{{ prod.description }}</div>
              <div class="moreBtn">more</div>
            </div> -->
          </NuxtLinkLocale>

        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.card-footer{
    width: 100%;
}
</style>
