<template>
  <div class="detail-container">
    <button @click="$router.go(-1)" class="back-btn">返回</button>
    
    <div v-if="currentNotice" class="notice-detail">
      <h1 class="detail-title">{{ currentNotice.title }}</h1>
      <div class="meta-info">
        <span class="time">{{ currentNotice.time }}</span>
        <span class="notice-id">ID: {{ $route.params.id }}</span>
      </div>
      <div class="content-box">
        {{ currentNotice.content }}
      </div>
    </div>

    <div v-else class="loading">
      {{ errorMessage || '正在加载通知详情...' }}
    </div>
  </div>
</template>

<script setup lang="js" name="NotificationDetail">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const currentNotice = ref(null);
const errorMessage = ref('');

// 模拟异步获取通知详情
const mockFetchNotice = (id) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const notices = [
        { id: 1, title: "系统维护通知", time: "2024-05-01 10:00", content: "系统将于今晚23:00-24:00进行维护，请提前保存数据。" },
        { id: 2, title: "新功能上线", time: "2024-05-10 09:00", content: "我们上线了新功能，欢迎体验！" }
      ];
      resolve(notices.find(n => n.id === Number(id)));
    }, 500);
  });
};

onMounted(async () => {
  try {
    const data = await mockFetchNotice(route.params.id);
    if (data) {
      currentNotice.value = data;
    } else {
      errorMessage.value = '通知不存在';
    }
  } catch (error) {
    errorMessage.value = '加载失败，请稍后重试';
  }
});
</script>

<style scoped>
.detail-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.back-btn {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.meta-info {
  color: #666;
  font-size: 0.9em;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

.content-box {
  line-height: 1.8;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 15px;
}

.loading {
  text-align: center;
  padding: 50px;
  color: #888;
}
</style>