<script setup>
const route = useRoute();

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

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

const keyword = computed(() => route.params.keyword);

watch(()=>route.params.keyword,(nVal)=>{
  console.log(nVal);
}, { immediate: true })

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

// 取得產品列表
console.log('keyword',keyword);
const { data: prodRes } = await useMyFetch('/product/searchProduct', "GET", { keyword })
</script>

<template>
  <div>
    <!-- <div class="toolbar">
      <div class="tTitle">{{ cateData.parent_name }}</div>
    </div> -->
    <div class="content">
      <div class="block">
        <div class="bName"> {{ keyword}} {{ $t('searchResult') }}:  
            <span>{{ $t('total') }} {{ productList.length }} {{ $t('num') }}</span>
        </div>
        <!-- <div class="bDesc">{{ cateData.description }}</div> -->
        <div class="cardGroup">
          <NuxtLinkLocale class="card" 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>
