<template>
  <view class="app-container pb-20">
    <TopBar title="通知详情" show-back />

    <view v-if="notice" class="px-4 py-4">
      <view class="card p-4">
        <text class="text-lg font-semibold text-gray-800 mb-2 block">{{ notice.title }}</text>
        <text class="text-xs text-gray-400 mb-4 block">{{ formatDate(notice.createTime, 'YYYY-MM-DD HH:mm') }}</text>
        <view class="border-t border-gray-100 pt-4">
          <text class="text-sm text-gray-600 leading-relaxed block">{{ notice.content }}</text>
        </view>
      </view>
    </view>

    <EmptyState v-else message="公告不存在" />
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { formatDate } from '../../utils'

interface Notice {
  id: string
  title: string
  content: string
  createTime: string
}

const allNotices: Notice[] = [
  { id: 'n1', title: '关于调度系统升级的通知', content: '为了提升系统性能和用户体验，我们将于本周末对调度系统进行升级维护。升级期间系统可能短暂不可用，请提前做好工作安排。升级后新增排班自动提醒功能，敬请期待。', createTime: '2026-01-20T09:00:00' },
  { id: 'n2', title: '春节期间值班安排公告', content: '春节将至，为确保节日期间服务不中断，请各班组做好值班安排。具体值班表已发送至各班组负责人，如有疑问请联系调度中心。祝大家新春快乐！', createTime: '2026-01-15T09:00:00' },
  { id: 'n3', title: '安全生产月活动通知', content: '本月为安全生产月，公司将开展安全培训和应急演练。请所有员工参加，提升安全意识和应急处理能力。具体安排另行通知。', createTime: '2026-02-28T10:00:00' },
  { id: 'n4', title: '新员工培训计划安排', content: '本月将有新员工入职，请各班组安排老员工进行带教。培训内容包括：系统操作、安全规范、服务流程等。请各班组提前做好准备。', createTime: '2026-03-10T14:00:00' },
]

const notice = ref<Notice | null>(null)

onLoad((options) => {
  if (options?.id) {
    notice.value = allNotices.find(n => n.id === options.id) || null
  }
})
</script>
