<script setup lang="ts">
/**
 * 消息通知页面
 *
 * 使用 Vant PullRefresh + List 实现下拉刷新和无限滚动，
 * Tabs 切换"未读消息"和"全部消息"。
 */
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

/** Tabs */
const active = ref(0)

interface NoticeItem {
  id: number
  title: string
  message: string
  createTime: string
}

const list = ref<NoticeItem[]>([])
const finished = ref(false)
const isLoading = ref(false)

const pageParams = reactive({
  pageNum: 1,
  pageSize: 10,
})

function generateMockData(pageNum: number, pageSize: number) {
  const start = (pageNum - 1) * pageSize
  const total = 25
  const end = Math.min(start + pageSize, total)
  const items: NoticeItem[] = []
  for (let i = start; i < end; i++) {
    items.push({
      id: i + 1,
      title: `通知消息标题 ${i + 1}`,
      message: `这是第 ${i + 1} 条消息的详细内容，用于展示通知列表的效果。`,
      createTime: `2025-06-${String(10 + Math.floor(i / 3)).padStart(2, '0')} 14:30`,
    })
  }
  return { items, isLastPage: end >= total }
}

function initList() {
  isLoading.value = true
  pageParams.pageNum = 1
  setTimeout(() => {
    const { items, isLastPage } = generateMockData(pageParams.pageNum, pageParams.pageSize)
    list.value = items
    finished.value = isLastPage
    isLoading.value = false
  }, 400)
}

function onChange(name: string | number) {
  active.value = Number(name)
  finished.value = false
  initList()
}

function onLoad() {
  if (finished.value) return
  isLoading.value = true
  pageParams.pageNum += 1
  setTimeout(() => {
    const { items, isLastPage } = generateMockData(pageParams.pageNum, pageParams.pageSize)
    list.value = list.value.concat(items)
    finished.value = isLastPage
    isLoading.value = false
  }, 400)
}

function onRefresh() {
  finished.value = false
  pageParams.pageNum = 1
  setTimeout(() => {
    const { items, isLastPage } = generateMockData(pageParams.pageNum, pageParams.pageSize)
    list.value = items
    finished.value = isLastPage
    showToast('刷新成功')
  }, 600)
}

function toDetail(item: NoticeItem) {
  showToast(`查看: ${item.title}`)
}

initList()
</script>

<template>
  <div class="page">
    <!-- NavBar -->
    <van-nav-bar
      title="消息通知"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <!-- Tabs -->
    <van-tabs v-model:active="active" @change="onChange" sticky class="tabs-bar">
      <van-tab title="未读消息" />
      <van-tab title="全部消息" />
    </van-tabs>

    <!-- Pull Refresh + List -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="pull-area">
      <van-list
        v-model:loading="isLoading"
        :finished="finished"
        finished-text="— 没有更多了 —"
        @load="onLoad"
      >
        <div
          v-for="item in list"
          :key="item.id"
          class="notice-card"
          @click="toDetail(item)"
        >
          <div class="card-accent" />
          <div class="card-body">
            <div class="notice-title">
              <span class="title-dot"></span>
              {{ item.title }}
            </div>
            <div class="notice-message">{{ item.message }}</div>
            <div class="notice-time">{{ item.createTime }}</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #F4F7F8;
}

// ── NavBar ──
:deep(.van-nav-bar) {
  background: #1E74FF;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
}

// ── Tabs ──
.tabs-bar {
  :deep(.van-tabs__nav) {
    background: #fff;
  }
}

// ── Pull Area ──
.pull-area {
  min-height: calc(100vh - 92px);
}

// ── Notice Card ──
.notice-card {
  display: flex;
  margin: 8px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;

  &:active {
    transform: scale(0.985);
    background: #FAFAFA;
  }

  .card-accent {
    width: 4px;
    flex-shrink: 0;
    background: #1E74FF;
    opacity: 0.6;
  }

  .card-body {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
  }

  .notice-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #323233;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .title-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #EE0A24;
      flex-shrink: 0;
    }
  }

  .notice-message {
    font-size: 14px;
    color: #646566;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .notice-time {
    font-size: 12px;
    color: #C8C9CC;
  }
}

// ── Van List ──
:deep(.van-list__finished-text) {
  color: #C8C9CC;
  font-size: 13px;
}
</style>
