<script lang="ts" setup>
import { getAppDetail } from "~/api/app";
import type { appDetail, Types } from "~/api/types/app";
import type { webSiteType } from "~/api/types/webSite";
const route = useRoute();
const config = useRuntimeConfig();
const DetailData = ref<appDetail>({
  id: 0,
  title: "",
  content: "",
  image: "",
  description: "",
  link: "",
  types: [],
});
const webSite = useState<webSiteType>("webSite");
function mergeDuplicates(data: Types[]) {
  const map = new Map();

  data.forEach((item) => {
    if (!map.has(item.id)) {
      // 如果是第一次遇到这个id，创建新对象
      map.set(item.id, {
        id: item.id,
        label: item.label,
        children: [...(item.children || [])],
      });
    } else {
      // 如果已经存在，合并children
      const existing = map.get(item.id);
      // 避免重复的子项（基于子项id）
      const existingChildIds = new Set(
        existing.children.map((child: any) => child.id)
      );
      item.children.forEach((child) => {
        if (!existingChildIds.has(child.id)) {
          existing.children.push(child);
        }
      });
    }
  });

  return Array.from(map.values());
}

// 获取详情数据
const detailRes = await getAppDetail(Number(route.params.id));
DetailData.value = detailRes.data;
DetailData.value.types = mergeDuplicates(detailRes.data.types);

useHead({
  title: DetailData.value.popupContent
    ? `${DetailData.value.title} - ${DetailData.value.popupContent}`
    : DetailData.value.title,
  meta: [
    { name: "description", content: DetailData.value.description },
    {
      name: "og:title",
      content: `${DetailData.value.title}-${DetailData.value.popupContent}`,
    },
    { name: "og:description", content: DetailData.value.description },
    {
      name: "og:image",
      content: config.public.baseUrl + DetailData.value.image,
    },
    { name: "og:url", content: route.fullPath },
    { name: "og:site_name", content: webSite.value.webname },
  ],
});
</script>

<template>
  <div class="flex flex-col min-h-screen bg-white">
    <main class="flex-grow md:p-6 bg-white p-1">
      <!-- Top Application Info Bar -->
      <header
        v-show="DetailData.types.length > 0"
        class="bg-white shadow-sm md:py-4 md:px-8 py-2 px-4 flex md:items-center md:justify-between flex-col md:flex-row"
      >
        <div class="flex items-center space-x-4">
          <img
            :src="config.public.baseUrl + DetailData.image"
            :alt="DetailData.title"
            class="w-16 h-16 object-contain"
          />
          <div>
            <h1 class="text-2xl font-bold text-[#5961f9]">
              {{ DetailData.title }}
            </h1>
            <p class="text-sm text-gray-600 mt-1">
              {{ DetailData.description }}
            </p>
            <div class="mt-2 flex items-center space-x-2">
              <div
                v-for="tag in DetailData.types"
                class="flex items-center space-x-2"
              >
                <template v-if="tag.children.length > 0">
                  <NuxtLink
                    v-for="child in tag.children"
                    :to="'/category/' + child.alias"
                    class="px-2 py-1 bg-blue-100 text-[#5961f9] rounded-full text-xs"
                  >
                    {{ child.label }}
                  </NuxtLink>
                </template>
                <template v-else>
                  <NuxtLink
                    :to="'/category/' + tag.alias"
                    class="px-2 py-1 bg-blue-100 text-[#5961f9] rounded-full text-xs"
                  >
                    {{ tag.label }}
                  </NuxtLink>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="flex md:space-x-3 md:mt-0 mt-4">
          <a
            :href="DetailData.link"
            target="_blank"
            class="!rounded-button whitespace-nowrap px-4 py-2 bg-[#5961f9] max-[768px]:text-xs text-white hover:bg-blue-600 transition-colors"
          >
            <i class="iconfont icon-guide"></i>访问官网
          </a>
        </div>
      </header>

      <main class="relative w-full">
        <!-- 悬浮广告弹窗 -->
        <!-- <div
          class="md:absolute top-0 right-0 md:m-4 z-50 relative max-[768px]:m-auto"
          v-show="showAd"
          :style="{
            width: `${detailAd.width}px`,
            height: `${detailAd.height}px`,
          }"
        >
          <div
            class="w-full h-full relative"
            v-for="item in detailAd.frontAdVos"
          >
            <img
              class="w-full h-full object-contain"
              :src="config.public.baseUrl + item.image"
              :alt="item.title"
            />
            <div
              class="absolute top-1 right-1 cursor-pointer bg-white w-4 h-4 text-center rounded-[50%] text-xs"
              @click="showAd = false"
            >
              X
            </div>
          </div>
        </div> -->
        <div class="md:max-w-5xl mx-auto md:p-8 p-2 w-full">
          <div v-html="DetailData.content"></div>
        </div>
      </main>
    </main>
  </div>
</template>