<template>
  <view class="container">
    <view class="header">
      <view class="title">{{ announcementDetail.title }}</view>
      <view class="meta">
        <text class="time">{{ announcementDetail.createTime }}</text>
      </view>
    </view>
    
    <view class="content">
      <rich-text :nodes="announcementDetail.content" class="rich-content"></rich-text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const announcementDetail = ref({
  id: '',
  title: '',
  content: '',
  createTime: ''
})

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  announcementDetail.value = {
    id: options.id || '',
    title: decodeURIComponent(options.title || ''),
    content: decodeURIComponent(options.content || ''),
    createTime: decodeURIComponent(options.createTime || '')
  }
}

onMounted(() => {
  getPageParams()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.content {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.rich-content {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
  
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8rpx;
    margin: 20rpx 0;
  }
  
  :deep(p) {
    margin-bottom: 20rpx;
  }
  
  :deep(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    margin: 30rpx 0 20rpx 0;
    color: #333;
  }
  
  :deep(ul, ol) {
    padding-left: 40rpx;
    margin-bottom: 20rpx;
  }
  
  :deep(li) {
    margin-bottom: 10rpx;
  }
  
  :deep(blockquote) {
    border-left: 8rpx solid #007aff;
    padding-left: 20rpx;
    margin: 20rpx 0;
    color: #666;
    font-style: italic;
  }
  
  :deep(code) {
    background-color: #f0f0f0;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    font-family: 'Courier New', monospace;
  }
  
  :deep(pre) {
    background-color: #f0f0f0;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow-x: auto;
    margin: 20rpx 0;
  }
  
  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 20rpx 0;
  }
  
  :deep(th, td) {
    border: 1rpx solid #ddd;
    padding: 16rpx;
    text-align: left;
  }
  
  :deep(th) {
    background-color: #f8f8f8;
    font-weight: bold;
  }
}
</style>
