<template>
  <div v-if="productsStore.products.total > 0">
    <!-- breadcrumb start -->
    <breadcrumb-1 title="Resultados" subtitle="Busqueda" />
    <!-- breadcrumb end -->

    <!-- shop area start -->
    <shop-area />
    <!-- shop area end -->
  </div>

  <div v-if="productsStore.products.total == 0"> 
    <section class="tp-error-area pt-110 pb-110">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-6 col-lg-8 col-md-10">
            <div class="tp-error-content text-center">
              <div class="tp-error-thumb">
                <img src="/img/error/error.png" alt="" />
              </div>

              <h5 class="tp-error-title">¡Oops!</h5>
              <p class="">
                No se encontraron resultados.
              </p>
              <NuxtLink to="/" class="tp-error-btn">Ir al inicio</NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useProductsStore } from '@/pinia/products/products.store';
useSeoMeta({ title: "VectorGeenk - Resultado de busqueda" });

const productsStore = useProductsStore();
const route = useRoute();

if(route.query) {
  Object.entries(route.query).forEach(entrie => {
    productsStore.filters[entrie[0]] = entrie[1];
  });
}

const getProducts = async () => {
  const filters = productsStore.getQueryParams();
  await productsStore.getProducts(filters);
}

if (productsStore.products.total == 0) {
  await getProducts();
}

watch(
  () => route.query || route.params,
  async (newStatus) => {
    await getProducts();
    //   startIndex.value = 0;
    //   endIndex.value =
    //     store.filteredProducts && store.filteredProducts.length > 9 ? 9 : store.filteredProducts?.length!;
  }
);

</script>
