<!--
  页面：未来社区（九九社区）主页 —— 还原设计稿 liuyuanxitong-yidong/pages/community/community.vue
  内容为静态 mock（见 ../data.js）。挂到首页金刚区「未来社区」跳转目标。
-->
<template>
  <view class="fc-page">
    <!-- 头部 -->
    <view class="fc-hd" :style="{ paddingTop: statusBarTop + 'px' }">
      <view class="fc-hd-bar">
        <view class="fc-back" @tap="goBack"><u-icon name="arrow-left" color="#1a1a1a" size="38"></u-icon></view>
        <text class="fc-hd-title">九九社区</text>
      </view>
      <view class="fc-loc" @tap="goSelect">
        <u-icon name="map" color="#e9272d" size="26"></u-icon>
        <text class="fc-loc-txt">{{ locationInfo.community }}</text>
        <u-icon name="arrow-down" color="#9098a0" size="20"></u-icon>
      </view>
    </view>

    <view class="fc-body">
      <!-- 轮播 -->
      <swiper class="fc-hero" :autoplay="true" :interval="4000" :duration="500" circular indicator-dots
        indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)">
        <swiper-item v-for="s in heroSlides" :key="s.key">
          <view class="fc-hero-slide" :style="{ background: s.bg }">
            <view class="fc-hero-mask"></view>
            <view class="fc-hero-copy">
              <text class="fc-hero-title">{{ s.title }}</text>
              <text class="fc-hero-sub">{{ s.subtitle }}</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <!-- 快捷入口 -->
      <view class="fc-shortcut">
        <view class="fc-sc-item" v-for="s in shortcuts" :key="s.key" @tap="onShortcut(s)">
          <view class="fc-sc-icon" :style="{ background: s.bg }">
            <u-icon :name="s.icon" color="#fff" size="40"></u-icon>
          </view>
          <text class="fc-sc-label">{{ s.label }}</text>
        </view>
      </view>

      <!-- 社区公告 -->
      <view class="fc-sec-head">
        <view class="fc-sec-left"><text class="fc-sec-bar"></text><text class="fc-sec-title">社区公告</text></view>
        <text class="fc-sec-more" @tap="goNoticeList">查看更多 ›</text>
      </view>
      <view class="fc-notice-panel">
        <view class="fc-notice" v-for="n in topNotices" :key="n.id" @tap="goNoticeDetail(n)">
          <view class="fc-notice-icon"><u-icon :name="n.icon" color="#e43f43" size="34"></u-icon></view>
          <view class="fc-notice-main">
            <text class="fc-notice-title">{{ n.title }}</text>
            <text class="fc-notice-sum">{{ n.summary }}</text>
          </view>
          <view class="fc-notice-aside">
            <text class="fc-tag" :style="tagStyle(n.tag)">{{ tagLabel(n.tag) }}</text>
            <text class="fc-notice-date">{{ n.date }}</text>
          </view>
        </view>
      </view>

      <!-- 社区活动 -->
      <view class="fc-sec-head">
        <view class="fc-sec-left"><text class="fc-sec-bar"></text><text class="fc-sec-title">社区活动</text></view>
        <text class="fc-sec-more" @tap="goActivityList">查看更多 ›</text>
      </view>
      <view class="fc-act-list">
        <view class="fc-act" v-for="a in topActivities" :key="a.id" @tap="goActivityDetail(a)">
          <view class="fc-act-cover">
            <image v-if="a.image" :src="a.image" class="fc-act-img" mode="aspectFill" />
            <view v-else class="fc-act-img" :style="{ background: sceneBg(a.scene) }"></view>
            <text class="fc-act-badge" :style="statusStyle(a.status)">{{ statusLabel(a.status) }}</text>
          </view>
          <view class="fc-act-info">
            <text class="fc-act-title">{{ a.title }}</text>
            <text class="fc-act-fee">{{ a.fee || '免费' }}</text>
            <text class="fc-act-sub">{{ a.subtitle }}</text>
            <view class="fc-act-row"><u-icon name="clock" color="#9098a0" size="22"></u-icon><text>{{ a.time }}</text></view>
            <view class="fc-act-row"><u-icon name="map" color="#9098a0" size="22"></u-icon><text>{{ a.place }}</text></view>
            <view class="fc-act-foot">
              <view class="fc-act-row"><u-icon name="account" color="#9098a0" size="22"></u-icon><text>{{ a.enrolled }}</text></view>
              <text class="fc-act-btn" :class="{ done: isJoined(a.id) }" @tap.stop="onJoin(a)">{{ isJoined(a.id) ? '已报名' : '立即报名' }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="fc-spacer"></view>
    </view>
  </view>
</template>

<script>
import { NavgateTo } from '@/utils'
import {
  locationInfo, shortcuts, heroSlides, notices, activities,
  NOTICE_TAG_META, ACTIVITY_STATUS_META, ACTIVITY_SCENE_BG,
  isActivityJoined, toggleActivityJoin
} from '../data.js'

export default {
  data() {
    return {
      statusBarTop: 20,
      locationInfo, shortcuts, heroSlides,
      topNotices: notices.slice(0, 3),
      topActivities: activities.filter(a => a.status !== 'ended').slice(0, 2),
      joinedIds: []
    }
  },
  onLoad() {
    const sys = uni.getSystemInfoSync()
    this.statusBarTop = sys.statusBarHeight || 20
  },
  onShow() {
    this.joinedIds = activities.filter(a => isActivityJoined(a.id)).map(a => a.id)
  },
  methods: {
    tagLabel(t) { return (NOTICE_TAG_META[t] || {}).label || '' },
    tagStyle(t) { const m = NOTICE_TAG_META[t] || {}; return { color: m.color, background: m.bg } },
    statusLabel(s) { return (ACTIVITY_STATUS_META[s] || {}).label || '' },
    statusStyle(s) { const m = ACTIVITY_STATUS_META[s] || {}; return { color: m.color, background: m.bg } },
    sceneBg(s) { return ACTIVITY_SCENE_BG[s] || ACTIVITY_SCENE_BG.handicraft },
    isJoined(id) { return this.joinedIds.includes(id) },
    goBack() { uni.navigateBack({ delta: 1, fail: () => NavgateTo('/pages/index2/index2') }) },
    goSelect() { uni.showToast({ title: '当前社区：' + this.locationInfo.community, icon: 'none' }) },
    onShortcut(s) {
      const map = {
        notice: '/packages/futureCommunity/noticeList/index',
        activity: '/packages/futureCommunity/activityList/index',
        phone: '/packages/futureCommunity/conveniencePhone/index',
        house: '/packages/community/index/index',
        goodshop: '/packages/localLife/index/index'
      }
      if (map[s.key]) NavgateTo(map[s.key], { isLogin: false })
      else uni.showToast({ title: s.label + '功能开发中', icon: 'none' })
    },
    goNoticeList() { NavgateTo('/packages/futureCommunity/noticeList/index', { isLogin: false }) },
    goActivityList() { NavgateTo('/packages/futureCommunity/activityList/index', { isLogin: false }) },
    goNoticeDetail(n) { NavgateTo('/packages/futureCommunity/noticeDetail/index?id=' + n.id, { isLogin: false }) },
    goActivityDetail(a) { NavgateTo('/packages/futureCommunity/activityDetail/index?id=' + a.id, { isLogin: false }) },
    onJoin(a) {
      if (a.status === 'ended') { uni.showToast({ title: '活动已结束', icon: 'none' }); return }
      const joined = toggleActivityJoin(a.id)
      this.joinedIds = activities.filter(x => isActivityJoined(x.id)).map(x => x.id)
      uni.showToast({ title: joined ? '报名成功' : '已取消报名', icon: 'none' })
    }
  }
}
</script>

<style scoped>
page { background: #f5f6f7; }
.fc-page { min-height: 100vh; background: #f5f6f7; }

/* 头部 */
.fc-hd { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 24rpx 16rpx; }
.fc-hd-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 80rpx; }
.fc-back { position: absolute; left: 0; top: 0; height: 80rpx; display: flex; align-items: center; }
.fc-hd-title { font-size: 34rpx; font-weight: 700; color: #1a1a1a; }
.fc-loc { display: flex; align-items: center; }
.fc-loc-txt { margin: 0 8rpx; font-size: 26rpx; color: #333; }

.fc-body { padding: 20rpx; }

/* 轮播 */
.fc-hero { width: 100%; height: 286rpx; border-radius: 24rpx; overflow: hidden; }
.fc-hero-slide { position: relative; width: 100%; height: 286rpx; }
.fc-hero-mask { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,25,20,0.5) 0%, rgba(40,25,20,0.04) 72%); }
.fc-hero-copy { position: absolute; left: 36rpx; bottom: 46rpx; z-index: 2; display: flex; flex-direction: column; }
.fc-hero-title { font-size: 40rpx; font-weight: 800; color: #fff; }
.fc-hero-sub { margin-top: 10rpx; font-size: 24rpx; color: rgba(255,255,255,0.92); }

/* 快捷入口 */
.fc-shortcut { display: flex; justify-content: space-between; background: #fff; border-radius: 22rpx; padding: 28rpx 16rpx; margin-top: 20rpx; }
.fc-sc-item { display: flex; flex-direction: column; align-items: center; }
.fc-sc-icon { width: 92rpx; height: 92rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fc-sc-label { margin-top: 14rpx; font-size: 24rpx; color: #333; }

/* 分区标题 */
.fc-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 32rpx 4rpx 18rpx; }
.fc-sec-left { display: flex; align-items: center; }
.fc-sec-bar { width: 6rpx; height: 30rpx; background: #e9272d; border-radius: 3rpx; margin-right: 14rpx; }
.fc-sec-title { font-size: 32rpx; font-weight: 700; color: #1a1a1a; }
.fc-sec-more { font-size: 24rpx; color: #9aa0a8; }

/* 公告 */
.fc-notice-panel { background: #fff; border-radius: 22rpx; padding: 6rpx 24rpx; }
.fc-notice { display: flex; align-items: center; padding: 24rpx 0; border-bottom: 1rpx solid #f2f3f5; }
.fc-notice:last-child { border-bottom: none; }
.fc-notice-icon { flex-shrink: 0; width: 64rpx; height: 64rpx; border-radius: 50%; background: #fff1f1; display: flex; align-items: center; justify-content: center; margin-right: 18rpx; }
.fc-notice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-notice-title { font-size: 28rpx; font-weight: 600; color: #1a1a1a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-notice-sum { margin-top: 8rpx; font-size: 22rpx; color: #9098a0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-notice-aside { flex-shrink: 0; margin-left: 16rpx; display: flex; flex-direction: column; align-items: flex-end; }
.fc-tag { font-size: 20rpx; padding: 2rpx 12rpx; border-radius: 6rpx; }
.fc-notice-date { margin-top: 10rpx; font-size: 20rpx; color: #b6bcc4; }

/* 活动 */
.fc-act-list { display: flex; flex-direction: column; }
.fc-act { display: flex; background: #fff; border-radius: 22rpx; overflow: hidden; margin-bottom: 20rpx; }
.fc-act-cover { position: relative; width: 260rpx; flex-shrink: 0; }
.fc-act-img { width: 260rpx; height: 100%; min-height: 220rpx; display: block; }
.fc-act-badge { position: absolute; left: 12rpx; top: 12rpx; font-size: 20rpx; padding: 2rpx 12rpx; border-radius: 6rpx; }
.fc-act-info { position: relative; flex: 1; min-width: 0; padding: 18rpx 20rpx; display: flex; flex-direction: column; }
.fc-act-title { font-size: 30rpx; font-weight: 700; color: #1a1a1a; max-width: 280rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-act-fee { position: absolute; right: 20rpx; top: 18rpx; font-size: 24rpx; color: #e9272d; font-weight: 700; }
.fc-act-sub { margin-top: 8rpx; font-size: 22rpx; color: #9098a0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-act-row { display: flex; align-items: center; margin-top: 10rpx; font-size: 22rpx; color: #6b7078; }
.fc-act-row text { margin-left: 8rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-act-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14rpx; }
.fc-act-btn { flex-shrink: 0; background: linear-gradient(90deg, #ff5b5b 0%, #ef111b 100%); color: #fff; font-size: 22rpx; padding: 8rpx 24rpx; border-radius: 26rpx; }
.fc-act-btn.done { background: #eef0f3; color: #9aa0a8; }

.fc-spacer { height: 40rpx; }
</style>
