<template>
  <div class="tw-m-auto tw-pb-[64px]">
    <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
    <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
    <v-container class="">
      <div class="tw-text-center" v-if="loading">
        <v-progress-circular
          color="blue-lighten-2"
          indeterminate
          size="64"
          class="tw-m-auto"
        ></v-progress-circular>
      </div>
      <v-item-group multiple>
        <v-row v-if="!loading">
          <v-col
            v-for="(item, i) in productStore.list"
            :key="i"
            cols="6"
            lg="3"
            md="4"
            sm="6"
          >
            <v-hover v-slot="{ isHovering, props }" open-delay="200">
              <v-card
                :elevation="isHovering ? 16 : 2"
                :class="{ 'on-hover': isHovering }"
                class="mx-auto"
                v-bind="props"
                :to="`/products/detail/${item.id}`"
              >
                <v-img :src="item.imgList[0].url" :alt="item.name">
                  <!-- <v-expand-transition>
                    <div
                      v-if="isHovering"
                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
                      style="height: 100%"
                    >
                      产品描述描述描述描述描述描述描述描述
                    </div>
                  </v-expand-transition> -->
                </v-img>
                <v-card-text class="tw-text-left font-weight-medium title">
                  <h3 style="color: red" v-if="item.price">
                    ${{ item.price }}
                  </h3>
                  <h4>{{ item.name }}</h4>
                </v-card-text>
              </v-card>
            </v-hover>
          </v-col>
        </v-row>
        <div
          v-if="!productStore.total && !loading"
          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
        >
          no data
        </div>
      </v-item-group>
      <v-row>
        <v-col>
          <v-pagination
            :size="isMobile() ? 'small' : 'default'"
            v-if="productStore.total"
            v-model="productStore.pageNo"
            @update:modelValue="productStore.updatePageNo"
            :length="length"
            rounded="0"
            class="tw-float-right tw-mt-[32px]"
            total-visible="5"
          ></v-pagination></v-col
      ></v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import { isMobile, isEqual } from "~/utils";
import { useProductListStore } from "~/stores/product_list";
import { useCategoryStore } from "~/stores/category";
import CategoryList from "~/components/CategoryList.vue";
import MobileCategoryList from "~/components/MobileCategoryList.vue";
import { watchEffect, computed, ref } from "vue";

const productStore = useProductListStore();
const categoryStore = useCategoryStore();
const loading = ref(false);
const route = useRoute(); // 获取路由信息
const router = useRouter(); // 获取路由信息
const title = ref("");
watchEffect(() => {
  // 遍历数组
  if (router.currentRoute.value.query.categories) {
    title.value = `${router.currentRoute.value.query.categories}`;
  }
  if (router.currentRoute.value.query.function) {
    title.value += `,${router.currentRoute.value.query.function}`;
  }
});

useHead({
  title: title.value,
  meta: [
    {
      name: "title",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
    {
      name: "keywords",
      content:
        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
    },
    {
      name: "description",
      content:
        "科路得,助您科研之路势在必得。We offer a wide range of research materials and related equipment, technical services, and battery material performance evaluation in areas such as pouch cells, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries, and sodium-ion batteries.",
    },
  ],
});

const loadProducts = async () => {
  let params: any = {
    pageNo: productStore.pageNo,
    pageSize: 20,
  };

  loading.value = true;
  if (productStore.keyword && !isEqual(productStore.params, params)) {
    params.keyword = productStore.keyword;
    productStore.updateParams(params);
    await productStore.getList(params);
    loading.value = false;
    return;
  }

  params.productCategoryId = categoryStore.selectedSubCategory;
  // productCategoryId: '78b86c6e917841cf9a292234f2805e24',

  if (categoryStore.selectedFuncCategory) {
    params.productFunctionId = categoryStore.selectedFuncCategory;
  }

  if (
    categoryStore.selectedSubCategory &&
    !isEqual(productStore.params, params)
  ) {
    productStore.updateParams(params);

    await productStore.getList(params);
  }
  loading.value = false;
};

watchEffect(async () => {
  if (route.query.keyword !== undefined) {
    productStore.keyword = route.query.keyword;
  }
  loadProducts();
});

const length = computed(() =>
  productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
);
</script>

<style scoped>
.title {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>