<script lang="ts" setup>
import type { appListType, appType } from "~/api/types/app";
import type { adListType } from "~/api/types/ad";
import { getAppList, getAllApp } from "~/api/app";
import type { webSiteType } from "~/api/types/webSite";
import { getAdList } from "~/api/ad";
const recommendList = ref<appType[]>([]);
const appList = ref<appListType[]>([]);
const adList = ref<adListType | null>(null);
// 获取轮播广告
const adRes = await getAdList();
adList.value = adRes[0];
// 获取推荐应用
const recommendRes = await getAppList({
  pageSize: 10,
  pageNum: 1,
  isRecommend: "1",
});
recommendList.value = recommendRes.rows;
// 获取全部应用
const allRes = await getAllApp();
appList.value = allRes.data;
const webSite = useState<webSiteType>("webSite");

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: "Annie网站 - 优质 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: "Annie网站" },
    { property: "og:type", content: "website" },
    { property: "twitter:card", content: "summary_large_image" },
    {
      property: "twitter:title",
      content: "Annie网站 - 优质 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">
    <main class="flex-grow md:p-6 p-2 bg-white">
      <!-- 轮播广告区域 -->
      <ADSwiperCarousel :adSwiperList="adList" />
      <!-- Banner 区域 -->
      <HomeBanner />
      <!-- 广告区域 -->
      <!-- 工具展示区 -->
      <section class="md:mb-12 mb-6">
        <!-- 推荐工具区 -->
        <HomeRecommend
          :recommendList="recommendList"
          navTitle="推荐工具"
          navIcon="star"
        />

        <div v-for="appItem in appList" class="md:mb-12 mb-6">
          <!-- 分类导航及内容 -->
          <HomeContent :appData="appItem" />
        </div>
      </section>
    </main>
  </div>
</template>