<template>
  <div class="flex flex-col bg-liner h-screen overflow-hidden">
    <!-- ✅ 顶部固定导航 -->
    <div class="shrink-0">
      <TopNavBar :title="detailTitle" background="transparent" />
    </div>

    <!-- ✅ 滚动区域 -->
    <div class="flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
      <div class="pb-[24px]  overflow-hidden">
        <img v-if="coverImage" class="w-full block" :src="coverImage" />

        <div class="pt-[16px] px-[12px] pb-[24px] ">
          <div class="text-[#171717] text-[16px] font-semibold">{{ detailTitle }}</div>

          <div v-if="publishTime"
            class="mt-[16px] inline-flex h-[28px] flex-row items-center rounded-[14px] border border-[#d6dde8] bg-[linear-gradient(180deg,#f4f7fb_0%,#e9eef6_100%)] px-[12px] py-[6px]">
            <uni-icons type="clock" size="18" color="#5A6780" />
            <span class="text-[#171717] text-[12px] font-semibold ml-[8px]">{{ t("home.notice.publishedAt") }}{{
              publishTime }}</span>
          </div>

          <div class="mt-[16px] color-666 text-[14px] leading-[20px]">{{ noticeContent }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import TopNavBar from "@/components/TopNavBar/index.vue";
import { useI18n } from "vue-i18n";

type NoticeData = {
  entityName?: string;
  effectiveStartTime?: string;
  imgUrl?: string;
  eventDescription?: string;
};

const { t } = useI18n();
const route = useRoute();
const noticeData = ref<NoticeData>({});

const detailTitle = computed(() => {
  return noticeData.value.entityName?.trim() || t("home.notice.detailTitle");
});

const publishTime = computed(() => {
  return noticeData.value.effectiveStartTime?.trim();
});

const coverImage = computed(() => {
  return noticeData.value.imgUrl?.trim();
});

const noticeContent = computed(() => {
  return noticeData.value.eventDescription?.trim();
});

const parseNoticeData = (value: unknown) => {
  const rawValue = Array.isArray(value) ? value[0] : value;
  if (typeof rawValue !== "string" || !rawValue) {
    noticeData.value = {};
    return;
  }

  try {
    noticeData.value = JSON.parse(decodeURIComponent(rawValue));
  } catch (error) {
    noticeData.value = {};
    console.warn("noticeData parse failed:", error);
  }
};

watch(
  () => route.query.noticeData,
  (value) => {
    parseNoticeData(value);
  },
  { immediate: true },
);

</script>
