<!-- 未来社区 - 社区公告列表 -->
<template>
  <view class="nl-page">
    <view class="fc-nav" :style="{ paddingTop: statusBarTop + 'px' }">
      <view class="fc-nav-bar">
        <view class="fc-back" @tap="goBack"><u-icon name="arrow-left" color="#1a1a1a" size="38"></u-icon></view>
        <view class="fc-nav-tt"><text class="fc-nav-title">社区公告</text><text class="fc-nav-sub">上河坊·九九社区</text></view>
      </view>
      <scroll-view class="nl-tabs" scroll-x>
        <text class="nl-tab" :class="{ on: activeTab === t.key }" v-for="t in NOTICE_TABS" :key="t.key" @tap="activeTab = t.key">{{ t.label }}</text>
      </scroll-view>
    </view>

    <view class="nl-body">
      <!-- 置顶（全部tab） -->
      <view class="nl-pinned" v-if="activeTab === 'all' && pinned" @tap="goDetail(pinned)">
        <view class="nl-pin-corner">置顶</view>
        <view class="nl-pin-head">
          <view class="nl-icon" :style="{ background: '#fff1f1' }"><u-icon :name="pinned.icon" color="#e43f43" size="34"></u-icon></view>
          <view class="nl-pin-tt">
            <text class="nl-title">{{ pinned.title }}</text>
            <text class="nl-meta">{{ pinned.date }} · {{ pinned.source }}</text>
          </view>
        </view>
        <text class="nl-sum">{{ pinned.summary }}</text>
        <text class="nl-read">{{ pinned.readCount }} 次阅读</text>
      </view>

      <view class="nl-card" v-for="n in listNotices" :key="n.id" @tap="goDetail(n)">
        <view class="nl-icon" :style="{ background: tagBg(n.tag, true) }"><u-icon :name="n.icon" :color="tagColor(n.tag)" size="34"></u-icon></view>
        <view class="nl-main">
          <view class="nl-row1">
            <text class="nl-title">{{ n.title }}</text>
            <text class="fc-tag" :style="tagStyle(n.tag)">{{ tagLabel(n.tag) }}</text>
          </view>
          <text class="nl-meta">{{ n.date }} · {{ n.source }}</text>
          <text class="nl-sum">{{ n.summary }}</text>
          <text class="nl-read">{{ n.readCount }} 次阅读</text>
        </view>
      </view>

      <view class="fc-empty" v-if="!listNotices.length && !(activeTab === 'all' && pinned)">暂无公告</view>
    </view>
  </view>
</template>

<script>
import { NavgateTo } from '@/utils'
import { notices, NOTICE_TABS, NOTICE_TAG_META } from '../data.js'

export default {
  data() {
    return { statusBarTop: 20, NOTICE_TABS, activeTab: 'all', notices }
  },
  onLoad(options) {
    const sys = uni.getSystemInfoSync()
    this.statusBarTop = sys.statusBarHeight || 20
    if (options && options.tab && NOTICE_TABS.some(t => t.key === options.tab)) this.activeTab = options.tab
  },
  computed: {
    pinned() { return this.notices.find(n => n.pinned) },
    listNotices() {
      if (this.activeTab === 'all') return this.notices.filter(n => !n.pinned)
      return this.notices.filter(n => n.tag === this.activeTab)
    }
  },
  methods: {
    tagLabel(t) { return (NOTICE_TAG_META[t] || {}).label || '' },
    tagColor(t) { return (NOTICE_TAG_META[t] || {}).color || '#666' },
    tagBg(t) { return (NOTICE_TAG_META[t] || {}).bg || '#eee' },
    tagStyle(t) { const m = NOTICE_TAG_META[t] || {}; return { color: m.color, background: m.bg } },
    goBack() { uni.navigateBack({ delta: 1 }) },
    goDetail(n) { NavgateTo('/packages/futureCommunity/noticeDetail/index?id=' + n.id, { isLogin: false }) }
  }
}
</script>

<style scoped>
page { background: #f5f6f7; }
.nl-page { min-height: 100vh; background: #f5f6f7; }
.fc-nav { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 24rpx; }
.fc-nav-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88rpx; }
.fc-back { position: absolute; left: 0; top: 0; height: 88rpx; display: flex; align-items: center; }
.fc-nav-tt { display: flex; flex-direction: column; align-items: center; }
.fc-nav-title { font-size: 34rpx; font-weight: 700; color: #1a1a1a; }
.fc-nav-sub { font-size: 20rpx; color: #9098a0; margin-top: 2rpx; }
.nl-tabs { white-space: nowrap; padding: 8rpx 0 14rpx; }
.nl-tab { display: inline-block; font-size: 28rpx; color: #6b7078; padding: 8rpx 6rpx; margin-right: 40rpx; }
.nl-tab.on { color: #e9272d; font-weight: 700; }

.nl-body { padding: 20rpx; }
.fc-tag { font-size: 20rpx; padding: 2rpx 12rpx; border-radius: 6rpx; flex-shrink: 0; }
.nl-icon { flex-shrink: 0; width: 64rpx; height: 64rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
.nl-title { font-size: 28rpx; font-weight: 600; color: #1a1a1a; }
.nl-meta { font-size: 20rpx; color: #b6bcc4; margin-top: 6rpx; }
.nl-sum { font-size: 24rpx; color: #6b7078; margin-top: 10rpx; }
.nl-read { font-size: 20rpx; color: #b6bcc4; margin-top: 10rpx; }

.nl-pinned { position: relative; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 6rpx 20rpx rgba(30,34,44,0.06); display: flex; flex-direction: column; }
.nl-pin-corner { position: absolute; right: 0; top: 0; background: #e9272d; color: #fff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 0 20rpx 0 16rpx; }
.nl-pin-head { display: flex; align-items: center; }
.nl-pin-tt { margin-left: 18rpx; display: flex; flex-direction: column; }

.nl-card { display: flex; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 18rpx; }
.nl-main { flex: 1; min-width: 0; margin-left: 18rpx; display: flex; flex-direction: column; }
.nl-row1 { display: flex; align-items: center; justify-content: space-between; }
.nl-row1 .nl-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 12rpx; }
.fc-empty { text-align: center; color: #9aa0a8; font-size: 26rpx; padding: 100rpx 0; }
</style>
