<script lang="ts" setup>
import { getAppList, getAllApp } from "~/api/app";
import type { webSiteType } from "~/api/types/webSite";
import { getAdList } from "~/api/ad";

const webSite = useState<webSiteType>("webSite");
const route = useRoute();
console.log(route);
const { data: adList } = await useAsyncData(
  "adList",
  async () => {
    const res = await getAdList();
    return res[0] || null;
  },
  {
    server: true,
    lazy: false,
  },
);

const { data: recommendList } = await useAsyncData(
  "recommendList",
  async () => {
    const res = await getAppList({
      pageSize: 10,
      pageNum: 1,
      isRecommend: "1",
    });
    return res.rows || [];
  },
  {
    server: true,
    lazy: false,
  },
);

const { data: appList } = await useAsyncData(
  "appList",
  async () => {
    const res = await getAllApp();
    return res.data || [];
  },
  {
    server: true,
    lazy: false,
  },
);
onMounted(() => {
  let toggleChineseTraditional = document.getElementById(
    "toogle-chinese-traditional",
  );
  if (toggleChineseTraditional) {
    // 自动点击
    toggleChineseTraditional.click();
  }
});

useHead({
  title: webSite.value.webname,
  meta: [
    { name: "description", content: webSite.value.webdescription },
    { name: "keywords", content: webSite.value.webkeywords },
    { name: "format-detection", content: "telephone=no" },
    { name: "referrer", content: "origin-when-cross-origin" },
    {
      name: "robots",
      content:
        "follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large",
    },
    { property: "og:locale", content: "zh_CN" },
    {
      property: "og:title",
      content: "AI工具盒 - 優質 AI 工具集合、AI 資源網站、AI 導航平台",
    },
    {
      property: "og:description",
      content:
        "專業 AI 工具導全网優質全网優質 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 資源，快速找到好用的 AI 工具。",
    },
    { property: "og:url", content: "https://aiboxgo.com/" },
    { property: "og:site_name", content: "AI工具盒" },
    { property: "og:type", content: "website" },
    { property: "twitter:card", content: "summary_large_image" },
    {
      property: "twitter:title",
      content: "AI工具盒 - 優質 AI 工具集合、AI 資源網站、AI 導航平台",
    },
    {
      property: "twitter:description",
      content:
        "專業 AI 工具導全网優質全网優質 AI 工具，包含 AI 写作、AI 绘画、AI 视频、AI 对话、AI 代码、AI 设计、AI 办公等各类 AI 資源，快速找到好用的 AI 工具。",
    },
  ],
  script: [
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "WebSite",
            "@id": "https://aiboxgo.com/#website",
            url: "https://aiboxgo.com/",
            name: webSite.value.webname,
            description: webSite.value.webdescription,
            inLanguage: "zh-CN",
            potentialAction: {
              "@type": "SearchAction",
              target: {
                "@type": "EntryPoint",
                urlTemplate:
                  "https://aiboxgo.com/search?keyword={search_term_string}",
              },
              "query-input": "required name=search_term_string",
            },
          },
          {
            "@type": "Organization",
            "@id": "https://aiboxgo.com/#organization",
            name: webSite.value.webname,
            url: "https://aiboxgo.com/",
            logo: {
              "@type": "ImageObject",
              url: "https://aiboxgo.com/favicon.ico",
            },
            sameAs: [],
          },
          {
            "@type": "CollectionPage",
            "@id": "https://aiboxgo.com/",
            url: "https://aiboxgo.com/",
            name: webSite.value.webname,
            description: webSite.value.webdescription,
            isPartOf: {
              "@id": "https://aiboxgo.com/#website",
            },
            about: {
              "@id": "https://aiboxgo.com/#organization",
            },
          },
        ],
      }),
    },
  ],
});
</script>

<template>
  <div
    class="flex flex-col min-h-screen bg-white dark:bg-[#1a1b1d] transition-colors duration-300"
  >
    <a
      id="toogle-chinese-traditional"
      href="javascript:translate.changeLanguage('chinese_traditional');"
      class="ignore"
    ></a>
    <main
      class="flex-grow md:p-6 p-2 bg-white dark:bg-[#1a1b1d] transition-colors duration-300"
    >
      <ADSwiperCarousel v-if="adList" :adSwiperList="adList" />
      <HomeBanner />
      <section class="md:mb-12 mb-6">
        <HomeRecommend
          v-if="recommendList && recommendList.length > 0"
          :recommendList="recommendList"
          navTitle="推薦工具"
          navIcon="star"
          routePath="/hktw"
        />

        <div
          v-for="appItem in appList"
          :key="appItem?.id"
          class="md:mb-12 mb-6"
        >
          <HomeContent :appData="appItem" routePath="/hktw" />
        </div>
      </section>
    </main>
  </div>
</template>