<template>
    <!-- Main Start -->
    <main class="main-wrap catagories-wide mb-xxl">
      <!-- Search Box Start -->
      <div class="search-box">
        <i class="iconly-Search icli search"></i>
        <input class="form-control" type="search" placeholder="Search here..." />
        <i class="iconly-Voice icli mic"></i>
      </div>
      <!-- Search Box End -->

      <!-- Catagories Section Start -->
      <section class="pb-0">
        <div class="catagories-wrap">
          <Nav @item-click="handleClickItem"/>
          <!-- Catagories Content Start -->
          <div class="tab-content ratio2_1" id="catagories-tabContent">
            <div class="tab-pane fade show active" id="catagories1" role="tabpanel" aria-labelledby="catagories1">
              <div class="banner-box">
                <!-- <img src="@/assets/images/banner/catagories-banner.jpg" alt="banner" class="bg-img" /> -->
                <div class="content-box">
                  <h1 class="title-color heading">Season’s exotic Fruits</h1>
                  <p class="content-color font-sm">Upto 20% OFF</p>
                  <a href="shop.html" class="btn-solid">Shop Now</a>
                </div>
              </div>

              <div class="row g-3">
                <!-- Staples Box Start -->
                <div class="col-6" v-for="v in goods" :key="v.goods_id">
                  <router-link :to="{ name : 'Goods',params: {id: v.goods_id}}">
                    <div class="staples-box">
                      <div>
                        <img class="img-fluid" :src="v.goods_thumb" alt="vegi" />
                      </div>
                      <h4>{{v.goods_name}}</h4>
                      <p class="price">${{v.shop_price}}</p>
                    </div>
                  </router-link>
                </div>
                <!-- Staples Box End -->

              </div>
            </div>
          </div>
          <!-- Catagories Content End -->
        </div>
      </section>
      <!-- Catagories Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsByCate } from '@/services/goods'
import { useRoute } from 'vue-router'

import Nav from './component/nav.vue'

const route = useRoute()

const goods = ref({})

onMounted(async ()=>{

  let res = await getGoodsByCate(358)
  if (res.code === 200) {
      goods.value = res.data
  }

})

const handleClickItem = async (cat_id)=>{
  let res = await getGoodsByCate(cat_id)
  if (res.code === 200) {
      goods.value = res.data
  }
}

</script>

<style lang="less">
.price{
  color: red;
  font-weight: 700;
  
}
</style>