<template>
  <div class="p-10" style="min-height: calc(100vh - 320px)">
    <HomeRecommend :recommendList="list" :navTitle="keyword" navIcon="tag" />

    <el-empty v-show="!list.length" description="未搜索到相关内容" />

    <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 { webSiteType } from "~/api/types/webSite";

const route = useRoute();
const router = useRouter();
const config = useRuntimeConfig();
const webSite = useState<webSiteType>("webSite");

const { keyword } = route.query as { keyword: string };
const list = ref<appType[]>([]);
const total = ref<number>(0);
const params = ref<any>({
  pageNum: 1,
  pageSize: 10,
  title: keyword,
});

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

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

useHead({
  title: `"${keyword}" 搜索结果 - ${webSite.value.webname}`,
  meta: [
    { name: "description", content: `搜索"${keyword}"相关的AI工具，找到${total.value}个结果。${webSite.value.webdescription}` },
    { name: "keywords", content: `${keyword},AI工具搜索,${webSite.value.webkeywords}` },
    { name: "robots", content: "noindex, follow" },
    { property: "og:title", content: `"${keyword}" 搜索结果 - ${webSite.value.webname}` },
    { property: "og:description", content: `搜索"${keyword}"相关的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>