import React from 'react';
import {Breadcrumb} from "antd";
import {serverGet} from "@/utils/request";
import './rich.css'
import MainTitle from "@/components/MainTitle";
import ContentNotFound from "@/components/ContentNotFound";

export const dynamicParams = true

export const generateStaticParams = async () => {
  const res = await serverGet<Page<ProductCenter>, { pageNum: number; pageSize: number }>(
    "/webSite/getProductByPage",
    {pageNum: 1, pageSize: 20}, {
      next: {
        revalidate: 1800
      },
      cache: "force-cache"
    }
  )
  return res.data.records.map((item) => ({
    id: item.id,
  }))
}

async function Page({
                      params,
                    }: {
  params: Promise<{ id: string }>
}) {
  const {id} = await params;
  const res = await serverGet<ProductCenter, { id: string }>(
    "/webSite/getProductById",
    {id}, {
      next: {
        revalidate: 1800
      },
      cache: "force-cache"
    }
  )
  if (!res.data) {
    return <ContentNotFound />
  }
  return (
    <>
      <div className="w-4/5 mx-auto">
        <div className="pt-5 sm:pt-10 sm:ml-20 flex gap-2">
          <span className="text-sm">您当前的所在位置:</span>
          <Breadcrumb
            separator=">"
            items={[
              {title: "产品列表", href: "/products"},
              {title: res.data.productName || "产品详情"},
            ]}
          />
        </div>
      </div>
      <div className="py-6 sm:py-10">
        <MainTitle title={"产品详情"} titleLetter={"PRODUCT_DETAIL"}/>
      </div>
      <div
        dangerouslySetInnerHTML={{__html: res.data.productDetails as string}}
        className="ql-editor w-9/10 sm:w-7/10 mx-auto sm:px-20 sm:py-10"
      />
    </>
  );
}


export default Page;