<script setup>
const route = useRoute();
const config = useRuntimeConfig();
const showAd = ref(true);
const appDetail = ref({
  types: [],
});
const webSite = useState("webSite");
const detailAd = ref({
  width: 300,
  height: 177,
  frontAdVos: [],
});
function mergeDuplicates(data) {
  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) => child.id)
      );
      item.children.forEach((child) => {
        if (!existingChildIds.has(child.id)) {
          existing.children.push(child);
        }
      });
    }
  });

  return Array.from(map.values());
}
const { data: detailData } = await useFetch(
  `http://aitoolht.crgx.net/dh/app/${route.params.id}`
);
const { data: adData } = await useFetch(
  "http://aitoolht.crgx.net/dh/ad/listFrontAd",
  {
    method: "get",
    params: { pageSize: 10, pageNum: 1, code: "top" },
  }
);
detailAd.value = adData.value.rows[0];
appDetail.value = detailData.value.data;
appDetail.value.types = mergeDuplicates(detailData.value.data.types);

useHead({
  title: appDetail.value.popupContent
    ? `${appDetail.value.title} - ${appDetail.value.popupContent}`
    : appDetail.value.title,
  meta: [
    { name: "description", content: appDetail.value.description },
    {
      name: "og:title",
      content: `${appDetail.value.title}-${appDetail.value.popupContent}`,
    },
    { name: "og:description", content: appDetail.value.description },
    {
      name: "og:image",
      content: config.public.baseUrl + appDetail.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="appDetail.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 + appDetail.image"
            alt="App Icon"
            class="w-16 h-16 object-contain"
          />
          <div>
            <h1 class="text-2xl font-bold text-[#5961f9]">
              {{ appDetail.title }}
            </h1>
            <p class="text-sm text-gray-600 mt-1">
              {{ appDetail.description }}
            </p>
            <div class="mt-2 flex items-center space-x-2">
              <div
                v-for="tag in appDetail.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="appDetail.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="appDetail.content"></div>
        </div>
      </main>
    </main>
  </div>
</template>