<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <TopNavigation title="公告详情"></TopNavigation>
  <view class="notice-details-page">
    <!-- 公告列表 -->
    <view class="notice-list">
      <view class="list-item" v-for="item in notices" :key="item.id">
        <view class="item-title">{{ item.title }}</view>
        <view class="item-content">{{ item.content }}</view>
        <view class="item-info">
          <text class="item-author">{{ item.author }}</text>
          <text class="item-date">{{ item.date }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <button class="recall-btn" @click="handleRecall">撤回</button>
      <button class="share-btn" @click="handleShare">分享到微信</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 当前激活的标签页
  const activeTab = ref('manage')

  // 公告列表数据
  const notices = ref([
    {
      id: 1,
      title: '1',
      content: '公告1内容',
      author: 'HikMall_30013234A',
      date: '2024-12-17'
    }
  ])

  // 处理撤回按钮点击
  const handleRecall = () => {}

  // 处理分享到微信按钮点击
  const handleShare = () => {}
</script>

<style lang="scss" scoped>
  .notice-details-page {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background-color: #fff;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .notice-list {
    padding: 15px;
    list-style-type: none; /* 移除列表左侧的黑点 */

    .list-item {
      position: relative; /* 为绝对定位提供参考 */
      padding: 15px;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 8px;

      .item-title {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 500;
      }

      .item-content {
        margin-bottom: 8px;
        color: #666;
      }

      .item-info {
        display: flex;
        gap: 10px;
        font-size: 12px;
        color: #999;
      }

      .item-status {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: bold;
        color: white; /* 白色字体 */
        background-color: green; /* 绿色背景 */
        border-radius: 4px;
      }
    }
  }

  .bottom-btns {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  }

  .recall-btn,
  .share-btn {
    flex: 1;
    flex-basis: 50%; /* 确保按钮等宽 */
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    border-radius: 4px;
  }

  .recall-btn {
    margin-right: 10px;
    color: #333;
    background-color: #f5f5f5;
  }

  .share-btn {
    color: #fff;
    background-color: #007aff;
  }
</style>
