<template>
  <view class="sub-page">
    <TopBar title="消息详情" show-back />

    <view v-if="message" class="px-4 pt-3">
      <!-- 消息头部 -->
      <view class="glass-card p-5">
        <view class="flex items-start">
          <view class="icon-chip mr-3" :class="{ 'icon-chip-red': message.type === 'urgent' }">
            <text class="uni-icons chip-glyph" :class="getTypeIcon(message.type)"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="notice-title">{{ message.title }}</text>
            <text class="meta-text mt-1 block">{{ formatDate(message.createTime) }}</text>
          </view>
          <text v-if="!message.read" class="unread-tag flex-shrink-0">未读</text>
        </view>
      </view>

      <!-- 消息内容 -->
      <view class="glass-card p-4">
        <view class="section-head-inner mb-3">
          <view class="section-bar mr-2"></view>
          <text class="section-title">消息内容</text>
        </view>
        <text class="body-p">{{ message.content }}</text>
      </view>

      <!-- 操作按钮 -->
      <view class="action-btn action-btn-primary mb-3" hover-class="action-btn-hover" :hover-start-time="0" :hover-stay-time="120" @click="markAsRead">
        标记已读
      </view>
      <view class="action-btn action-btn-plain" hover-class="action-btn-hover" :hover-start-time="0" :hover-stay-time="120" @click="goToTaskDetail">
        查看关联任务
      </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 { formatDate } from '../../utils'

const message = ref<any>(null)

function getTypeIcon(type: string) {
  const map: Record<string, string> = {
    task: 'uniui-flag-filled',
    system: 'uniui-gear-filled',
    urgent: 'uniui-notification-filled',
  }
  return map[type] || 'uniui-chatbubble'
}

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>

<style scoped>
.sub-page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;
  padding-bottom: 24px;
}

.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 24px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
  margin-bottom: 12px;
}

.notice-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.meta-text {
  font-size: 12px;
  color: #9ca3af;
}

.unread-tag {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.section-head-inner {
  display: flex;
  align-items: center;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.body-p {
  display: block;
  font-size: 14px;
  line-height: 1.8;
  color: #4b5563;
}

.icon-chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(164, 216, 152, 0.2);
}

.icon-chip-red {
  background-color: rgba(239, 68, 68, 0.1);
}

.icon-chip-red .chip-glyph {
  color: #ef4444;
}

.chip-glyph {
  font-size: 22px;
  color: #368f6f;
}

.action-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}

.action-btn-hover {
  opacity: 0.88;
}

.action-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #368f6f 0%, #4ba98a 100%);
  box-shadow: 0 10px 24px -10px rgba(54, 143, 111, 0.7);
}

.action-btn-plain {
  color: #6b7280;
  background-color: #f3f4f6;
}
</style>
