<template>
  <div class="md:p-10 p-4 pt-0" style="min-height: calc(100vh - 320px)">
    <h1 style="font-size: 0; margin: 0">
      {{ findLabelByAlias(name as string, sortList) }}
    </h1>
    <HomeRecommend
      :recommendList="list"
      :navTitle="findLabelByAlias(name as string, sortList)"
      navIcon="tag"
    />
    <el-pagination
      background
      layout="prev, pager, next"
      :hide-on-single-page="true"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNum"
      :total="total"
      @current-change="onPageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import type { appType } from "~/api/types/app";
import { getAppList } from "~/api/app";
import type { classifyType } from "~/api/types/classify";
import type { webSiteType } from "~/api/types/webSite";
const sortList = useState<classifyType[]>("sortTree");
const webSite = useState<webSiteType>("webSite");
const route = useRoute();
const router = useRouter();
const config = useRuntimeConfig();
const { name } = route.params;
const list = ref<appType[]>([]);
const total = ref<number>(0);
const params = ref<any>({
  pageNum: 1,
  pageSize: 30,
  typeAlias: name as string,
});

function findLabelByAlias<
  T extends { alias?: string; label?: string; children?: T[] }
>(alias: string, data: T[], childrenKey: string = "children"): string {
  if (!data || data.length === 0) {
    return "";
  }

  for (const item of data) {
    if (item.alias === alias) {
      return item.label || "";
    }
  }

  for (const item of data) {
    const children = (item as any)[childrenKey] as T[];
    if (children && children.length > 0) {
      const foundLabel = findLabelByAlias(alias, children, childrenKey);
      if (foundLabel !== "") {
        return foundLabel;
      }
    }
  }

  return "";
}

const categoryLabel = findLabelByAlias(name as string, sortList.value);

function onPageChange(pageNum: number) {
  router.push({
    path: route.path + "/page/" + pageNum,
  });
}

const res = await getAppList(params.value);
list.value = res.rows;
total.value = res.total;

useHead({
  title: `${categoryLabel} - ${webSite.value.webname}`,
  meta: [
    {
      name: "description",
      content: `${categoryLabel}分类下的AI工具推荐，精选优质${categoryLabel}相关AI工具，助您高效完成工作。`,
    },
    {
      name: "keywords",
      content: `${categoryLabel},AI工具,${categoryLabel}AI,人工智能,${webSite.value.webkeywords}`,
    },
    { name: "robots", content: "index, follow" },
    {
      property: "og:title",
      content: `${categoryLabel} - ${webSite.value.webname}`,
    },
    {
      property: "og:description",
      content: `${categoryLabel}分类下的AI工具推荐，精选优质${categoryLabel}相关AI工具。`,
    },
    { property: "og:type", content: "website" },
    { property: "og:url", content: config.public.baseUrl + route.fullPath },
    { property: "og:site_name", content: webSite.value.webname },
  ],
  link: [{ rel: "canonical", href: config.public.baseUrl + route.fullPath }],
  script: [
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "CollectionPage",
            "@id": config.public.baseUrl + route.fullPath + "#collectionpage",
            url: config.public.baseUrl + route.fullPath,
            name: `${categoryLabel} - ${webSite.value.webname}`,
            description: `${categoryLabel}分类下的AI工具推荐`,
            isPartOf: {
              "@id": "https://aiboxgo.com/#website",
            },
            about: {
              "@type": "Thing",
              name: categoryLabel,
            },
          },
          {
            "@type": "BreadcrumbList",
            "@id": config.public.baseUrl + route.fullPath + "#breadcrumb",
            itemListElement: [
              {
                "@type": "ListItem",
                position: 1,
                name: "首页",
                item: "https://aiboxgo.com/",
              },
              {
                "@type": "ListItem",
                position: 2,
                name: categoryLabel,
              },
            ],
          },
        ],
      }),
    },
  ],
});
</script>