<template>
  <div class="tw-m-auto tw-pb-[64px]" style="margin-bottom: 0px">
    <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
    <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
    <v-container>
      <v-row align="center">
        <v-col>
          <v-text-field
            v-model="keyword"
            style="max-width: 500px"
            label="Keyword"
          >
          </v-text-field>
        </v-col>
      </v-row>
      <v-row align="center">
        <v-col>
          <v-text-field
            v-model="secret"
            style="max-width: 500px"
            label="Secret"
          ></v-text-field>
        </v-col>
        <v-col cols="">
          <v-btn @click="handleProduce">生成</v-btn>
        </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 keyword = ref("");
const rootProductCategoryName = ref("");
const productCategoryName = ref("");
const productFunctionName = ref("");
const secret = ref("");

useHead({
  title: "canrud",
  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;
};

const handleProduce = async () => {
  try {
    let { data: resUrl } = await useAsyncData(
      "detail",
      () =>
        $fetch("/shop/product/generateList", {
          method: "GET",
          params: {
            pageNo: 1,
            pageSize: 20,
            keyword: keyword.value,
            rootProductCategoryName: rootProductCategoryName.value,
            productCategoryName: productCategoryName.value,
            productFunctionName: productFunctionName.value,
            secret: secret.value,
          },
        }),
      {
        server: true, // 仅在服务器端获取数据
      }
    );
    const productId = resUrl.value.data;
    if (productId) {
      window.location.href = `https://www.canrud.com/products/${productId}`;
    } else {
      console.error("No product ID found in response.");
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

watchEffect(async () => {
  if (route.query.categories) {
    const categories = route.query.categories.split(",");
    rootProductCategoryName.value = categories[0].trim(); // 取第一个值
    productCategoryName.value = categories[1] ? categories[1].trim() : ""; // 取第二个值（如果存在）
  } else {
    rootProductCategoryName.value = "";
    productCategoryName.value = "";
  }
  if (route.query.function) {
    productFunctionName.value = route.query.function;
  } else {
    productFunctionName.value = "";
  }
  //   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>