<template>
  <div class="page messages">
    <header class="sub-hd">
      <h2 class="sub-hd__title">消息</h2>
      <span class="sub-hd__action" @click="readAll">全部已读</span>
    </header>

    <div class="page__inner">
      <div class="card msg-list">
        <div
          v-for="(m, i) in list"
          :key="m.id"
          class="msg"
          :class="{ 'msg--line': i !== list.length - 1 }"
          @click="open(m)"
        >
          <div class="msg__icon" :style="{ background: m.color + '1a', color: m.color }">
            {{ m.icon }}
          </div>
          <div class="msg__main">
            <div class="msg__title-row">
              <span class="msg__title">{{ m.title }}</span>
              <span class="msg__time muted">{{ m.time }}</span>
            </div>
            <div class="msg__desc muted">{{ m.desc }}</div>
          </div>
          <van-badge v-if="m.unread" :content="m.unread" class="msg__badge" />
        </div>
      </div>

      <div class="tip muted">仅展示最近消息 · 更多历史消息请前往订单/钱包查看</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { messages } from '../data/mock.js'

const list = ref(messages.map((m) => ({ ...m })))

function readAll() {
  list.value.forEach((m) => (m.unread = 0))
  showToast('已全部标记为已读')
}
function open(m) {
  m.unread = 0
  showToast(`打开：${m.title}`)
}
</script>

<style scoped>
.messages {
  background: var(--brand-bg);
}
.sub-hd {
  background: linear-gradient(120deg, #1677ff, #0958d9);
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sub-hd__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.sub-hd__action {
  color: #fff;
  font-size: 13px;
  opacity: 0.92;
}
.msg-list {
  overflow: hidden;
}
.msg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  position: relative;
}
.msg--line::after {
  content: '';
  position: absolute;
  left: 62px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand-border);
}
.msg__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 42px;
}
.msg__main {
  flex: 1;
  min-width: 0;
}
.msg__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg__title {
  font-size: 15px;
  font-weight: 600;
}
.msg__time {
  font-size: 11px;
}
.msg__desc {
  margin-top: 4px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg__badge {
  margin-left: 4px;
}
.tip {
  text-align: center;
  font-size: 12px;
  margin-top: 18px;
}
</style>
