<!--
 * @Date: 2025-03-24 12:56:24
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-24 13:07:51
 * @FilePath: /mlaj/src/views/profile/MessageDetailPage.vue
 * @Description: 文件描述
-->
<template>
  <AppLayout title="消息详情">
    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
      <div class="p-4">
        <FrostedGlass class="p-4 rounded-xl">
          <div class="mb-4">
            <h1 class="text-xl font-medium mb-2">{{ message.title }}</h1>
            <div class="text-xs text-gray-500">{{ message.time }}</div>
          </div>
          <div class="text-gray-700 leading-relaxed whitespace-pre-wrap">
            {{ message.content }}
          </div>
        </FrostedGlass>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import AppLayout from '@/components/layout/AppLayout.vue';
import FrostedGlass from '@/components/ui/FrostedGlass.vue';
import { useTitle } from '@vueuse/core';

const $route = useRoute();
useTitle($route.meta.title);

const route = useRoute();
const message = ref({
  title: '',
  content: '',
  time: '',
  isRead: false
});

// 模拟获取消息详情
const mockMessage = {
  id: 1,
  title: '课程更新通知',
  content: '亲爱的用户：\n\n您关注的课程《亲子教育入门》已更新最新一期内容！\n\n本次更新包含以下内容：\n1. 亲子沟通的技巧与方法\n2. 如何培养孩子的学习兴趣\n3. 处理孩子叛逆期的建议\n\n快来查看最新内容，提升您的育儿技能吧！',
  time: '2024-01-10 10:30',
  isRead: false
};

onMounted(() => {
  // 模拟异步获取消息详情
  setTimeout(() => {
    const messageId = parseInt(route.params.id);
    message.value = { ...mockMessage, id: messageId };
    // 更新消息已读状态
    message.value.isRead = true;
  }, 500);
});
</script>