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

    <view class="px-4 py-4">
      <view class="card p-4">
        <view class="flex items-center justify-between mb-3">
          <text class="text-base font-bold text-gray-800">{{ message?.title || '消息详情' }}</text>
        </view>
        <view class="flex items-center text-gray-400 text-sm mb-4">
          <text class="mr-1"></text>
          <text>{{ message?.createTime ? formatDate(message.createTime, 'YYYY-MM-DD HH:mm') : '' }}</text>
        </view>
        <view class="border-t border-gray-100 pt-4">
          <text class="text-gray-600 text-sm leading-relaxed block mb-4">{{ message?.content || '暂无内容' }}</text>

          <view v-if="message?.type === 'task'" class="bg-gray-50 rounded-lg p-4 mb-4">
            <view class="flex justify-between text-sm mb-2">
              <text class="text-gray-500">任务名称：</text>
              <text class="text-gray-700">{{ message.title }}</text>
            </view>
            <view class="flex justify-between text-sm mb-2">
              <text class="text-gray-500">执行班组：</text>
              <text class="text-gray-700">张师傅组</text>
            </view>
            <view class="flex justify-between text-sm mb-2">
              <text class="text-gray-500">预计到达：</text>
              <text class="text-gray-700">09:30</text>
            </view>
            <view class="flex justify-between text-sm">
              <text class="text-gray-500">联系电话：</text>
              <text class="text-gray-700">139****6666</text>
            </view>
          </view>

          <text class="text-gray-600 text-sm leading-relaxed block">
            施工过程中如有任何问题，请及时联系调度中心。服务完成后，请及时验收确认。
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import { formatDate } from '@/utils'
import type { Notification } from '@/types'

const message = ref<Notification | null>(null)

onMounted(() => {
  const data = uni.getStorageSync('current_message')
  if (data) {
    message.value = data
  }
})
</script>
