<template>
  <view class="app-container pb-20">
    <TopBar title="消息详情" show-back />
    
    <view v-if="message" class="px-4 py-4 gap-y-4">
      <!-- 消息头部 -->
      <uni-card :is-shadow="true">
        <view class="flex items-start">
          <view class="w-12 h-12 rounded-xl flex items-center justify-center mr-4" :class="getTypeBgClass(message.type)">
            <text class="uni-icons text-xl" :class="getTypeIconClass(message.type)"></text>
          </view>
          <view class="flex-1">
            <text class="text-lg font-semibold text-gray-800 block">{{ message.title }}</text>
            <text class="text-sm text-gray-500 mt-1 block">{{ formatDate(message.createTime) }}</text>
          </view>
          <view v-if="!message.read" class="px-2 py-1 bg-red-100 rounded-lg">
            <text class="text-xs text-red-500">未读</text>
          </view>
        </view>
      </uni-card>

      <!-- 消息内容 -->
      <uni-card title="消息内容" icon="uniui-chatbubble-filled" :is-shadow="true">
        <text class="text-gray-700 text-sm leading-relaxed">{{ message.content }}</text>
      </uni-card>

      <!-- 操作按钮 -->
      <view class="pt-2 gap-y-3">
        <button class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium" @click="markAsRead">
          <text class="uni-icons uniui-checkmarkempty mr-1"></text>
          标记已读
        </button>
        <button class="w-full py-3 bg-gray-200 text-gray-700 rounded-xl font-medium" @click="goToTaskDetail">
          <text class="uni-icons uniui-flag-filled mr-1"></text>
          查看关联任务
        </button>
      </view>
    </view>

    <view v-else class="py-20 text-center">
      <EmptyState message="消息不存在或已删除" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniCard from '../../components/uni-card/uni-card.vue'
import { formatDate } from '../../utils'

const message = ref<any>(null)

function getTypeBgClass(type: string) {
  const map: Record<string, string> = {
    task: 'bg-blue-50',
    system: 'bg-gray-50',
    urgent: 'bg-red-50',
  }
  return map[type] || 'bg-gray-50'
}

function getTypeIconClass(type: string) {
  const map: Record<string, string> = {
    task: 'uniui-flag-filled text-blue-500',
    system: 'uniui-gear-filled text-gray-500',
    urgent: 'uniui-notification-filled text-red-500',
  }
  return map[type] || 'uniui-chatbubble text-gray-400'
}

function markAsRead() {
  if (message.value) {
    message.value.read = true
    uni.showToast({ title: '已标记已读', icon: 'success' })
  }
}

function goToTaskDetail() {
  uni.navigateTo({ url: '/subPackages/pages-common/taskDetail' })
}

onMounted(() => {
  // 模拟数据
  message.value = {
    id: '1',
    title: '新任务分配',
    content: '您有一条新的清掏任务待处理，项目：积丹白鹭小区，地址：XX市XX区XX路123号，预计施工时间：2026-06-23 09:00，请及时处理。',
    type: 'task',
    read: false,
    createTime: '2026-06-22 14:30',
  }
})
</script>
