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

    <!-- ✅ 滚动区域 -->
    <scroll-view class="flex-full overflow-hidden" scroll-y>
      <view class="pb-[24px] overflow-hidden">
        <image v-if="coverImage" class="w-full h-auto block" :src="coverImage" mode="widthFix" />

        <view class="pt-[16px] px-[12px] pb-[24px] border-box">
          <view class="text-[#171717] font-size-16 font-weight-600">{{ detailTitle }}</view>

          <view v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
            <uni-icons type="clock" size="18" color="#5A6780" />
            <text class="text-[#171717] font-size-12 font-weight-600 ml-[8px]">发布时间：{{ publishTime }}</text>
          </view>

          <view class="mt-[20px] pt-[16px] text-[#666666] font-size-14 leading-[20px] border-top">{{ noticeContent }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import TopNavBar from "@/components/TopNavBar/index.vue";
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const noticeData = ref({});

const detailTitle = computed(() => {
  return noticeData.value.entityName?.trim() || "消息详情";
});

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

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

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

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

</script>

<style lang="scss" scoped>
.notice-time-tag {
  display: inline-flex;
  height: 28px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
  border: 1px solid #d6dde8;
  border-radius: 14px;
  box-sizing: border-box;
}
</style>
