<template>
  <MobileProductDetail v-if="isMobile()" :info="info" />
  <ProductDetail v-else :info="info" />
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import ProductDetail from "~/components/ProductDetail.vue";
import MobileProductDetail from "~/components/MobileProductDetail.vue";
import type { Product, ProductImage } from "~/type";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const info = ref<Partial<Product>>({
  productimageliststore: [],
  productAttributeList: [],
  name: "",
  ticketTypes: [],
});

let { data: resData } = await useAsyncData(
  "detail",
  () =>
    $fetch("/shop/product/detail", {
      method: "GET",
      params: {
        id: route.params.id,
      },
    }),
  {
    server: true, // 仅在服务器端获取数据
  }
);
watchEffect(() => {
  useHead({
    title: info.value.name || "canrud",
    meta: [
      {
        name: "title",
        content:
          info.value.name ||
          "科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines",
      },
      {
        name: "keywords",
        content: info.value.name || info.value.metakeywords,
      },
      {
        name: "description",
        content: info.value.metadescription || info.value.name,
      },
    ],
  });
});

const newData: Product = resData.value.data;
newData.productimageliststore =
  typeof newData.productimageliststore === "string"
    ? JSON.parse(newData.productimageliststore) || []
    : (newData.productimageliststore as ProductImage[]);
newData.productimageliststore = newData?.productimageliststore?.map(
  (item: ProductImage) => ({
    ...item,
    // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`
    url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
  })
);
info.value = { ...newData };
</script>