<template>
  <view class="app-container pb-4">
    <TopBar title="公告详情" showBack />

    <view class="px-4 py-4">
      <view v-if="notice" class="bg-white rounded-xl p-4 shadow-sm">
        <view class="flex justify-between items-start mb-3">
          <text class="text-base font-bold text-gray-800">{{ notice.title }}</text>
          <view v-if="notice.important" class="px-2 py-1 bg-red-50 text-red-500 text-xs rounded">重要</view>
        </view>
        <view class="text-xs text-gray-400 mb-4">
          <text> {{ formatDate(notice.createTime, 'YYYY-MM-DD') }}</text>
          <text class="mx-2">|</text>
          <text> 调度中心</text>
        </view>
        <view class="text-sm text-gray-600 leading-relaxed">
          <text class="block mb-3">各位施工同事：</text>
          <text class="block mb-3">{{ notice.summary }}</text>
          <text class="block mb-2">一、进入施工现场必须佩戴安全帽、安全背心等防护用品。</text>
          <text class="block mb-2">二、施工前必须进行安全检查，确保设备正常运转。</text>
          <text class="block mb-2">三、施工现场必须设置警示标志，做好安全防护措施。</text>
          <text class="block mb-2">四、发现安全隐患及时上报，不得隐瞒。</text>
          <text class="block mb-3">请各位同事严格遵守以上规定，确保施工安全。</text>
          <text class="block">调度中心</text>
          <text class="block">{{ formatDate(notice.createTime, 'YYYY年MM月DD日') }}</text>
        </view>
      </view>
      <EmptyState v-else message="公告不存在" icon="" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { 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
  summary: string
  createTime: string
  important?: boolean
}

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

const allNotices: Notice[] = [
  {
    id: 'n1',
    title: '关于规范施工现场安全管理的通知',
    summary: '为进一步规范施工现场安全管理，确保施工人员人身安全和施工质量，现就相关事项通知如下：',
    createTime: '2026-04-20T09:00:00',
    important: true,
  },
  {
    id: 'n2',
    title: '下周安全培训会议安排',
    summary: '各位同事，下周二将举行安全培训会议，请准时参加。',
    createTime: '2026-04-18T10:00:00',
  },
  {
    id: 'n3',
    title: '设备维护保养规范更新',
    summary: '最新设备维护保养规范已更新，请各位同事查阅学习。',
    createTime: '2026-04-15T14:00:00',
  },
]

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