<template>
  <view class="page">
    <text class="title">消息通知</text>
    <view v-for="m in messages" :key="m.id" class="msg-card" @click="markRead(m.id)">
      <text class="event">{{ eventMap[m.event_type] || m.event_type }}</text>
      <text class="time">{{ m.created_at?.substring(0,16) || '' }}</text>
    </view>
    <view v-if="messages.length === 0" class="empty">暂无消息</view>
  </view>
</template>

<script>
import { apiGet, apiPost } from '@/common/api.js';

export default {
  data() { return { messages: [], eventMap: {
    work_order_assigned: '新工单已派单', work_order_completed: '工单已完成', work_order_exception: '工单异常',
    application_submitted: '申请已提交', plan_pending_sign: '方案待签署', settlement_paid: '结算已支付'
  }}},
  async onShow() { try { const res = await apiGet('/delivery/messages'); this.messages = res.data?.data || []; } catch(e) {} },
  methods: {
    async markRead(id) { try { await apiPost('/delivery/messages/' + id + '/read'); } catch(e) {} }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.title { font-size: 36rpx; font-weight: 700; display: block; margin-bottom: 24rpx; }
.msg-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 12rpx; display: flex; justify-content: space-between; }
.event { font-size: 28rpx; font-weight: 500; }
.time { font-size: 24rpx; color: #999; }
.empty { text-align: center; padding: 100rpx; color: #999; }
</style>
