<template>
  <view class="system-message-page">
    <!-- 页面加载状态 -->
    <Loading type="page" :loading="pageLoading" />

    <!-- 顶部背景图 -->
    <view class="top-bg">
      <image src="/static/title_bg.png" mode="aspectFill" class="bg-img" />
    </view>

    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-back" @click="handleBack">
          <text class="back-icon">‹</text>
        </view>
        <text class="navbar-title">系统消息</text>
        <view class="navbar-placeholder"></view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-section" :style="{ top: (statusBarHeight + 44) + 'px' }">
      <view 
        class="filter-tag" 
        :class="{ active: currentFilter === 'all' }"
        @click="handleFilterChange('all')"
      >
        全部
      </view>
    </view>

    <!-- 消息列表 -->
    <scroll-view 
      class="message-scroll" 
      scroll-y 
      :style="{ 
        top: (statusBarHeight + 44 + 60) + 'px',
        height: scrollHeight + 'px'
      }"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="handleRefresh"
      @scrolltolower="handleLoadMore"
    >
      <view class="message-list" v-if="messageList.length > 0">
        <view 
          class="message-item" 
          v-for="item in messageList" 
          :key="item.id"
          @click="handleMessageClick(item)"
        >
          <view class="message-title">{{ item.title }}</view>
          <view class="message-content">{{ item.content }}</view>
          <view class="message-time">{{ formatTime(item.createTime) }}</view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-wrapper" v-else-if="!pageLoading">
        <Empty text="暂无系统消息" :showButton="false" />
      </view>

      <!-- 加载更多 -->
      <Loading type="more" :loading="listLoading" :noMore="noMoreData" />
    </scroll-view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user.js'
import { getSystemMessages } from '@/api/message.js'
import { formatTimestamp } from '@/utils/format.js'
import Loading from '@/components/Loading/index.vue'
import Empty from '@/components/Empty/index.vue'

export default {
  name: 'SystemMessagePage',
  components: {
    Loading,
    Empty
  },
  setup() {
    const userStore = useUserStore()

    // 状态栏高度
    const statusBarHeight = ref(20)
    const scrollHeight = ref(500)

    // 页面状态
    const pageLoading = ref(true)
    const listLoading = ref(false)
    const noMoreData = ref(false)
    const isRefreshing = ref(false)

    // 筛选
    const currentFilter = ref('all')

    // 分页
    const pageIndex = ref(1)
    const pageSize = 20

    // 数据
    const messageList = ref([])

    // 获取系统信息
    const getSystemInfo = () => {
      uni.getSystemInfo({
        success: (res) => {
          statusBarHeight.value = res.statusBarHeight || 20
          // 计算滚动区域高度：窗口高度 - 导航栏高度 - 筛选区域高度
          const navbarHeight = statusBarHeight.value + 44
          const filterHeight = 60
          scrollHeight.value = res.windowHeight - navbarHeight - filterHeight
        }
      })
    }

    // 返回
    const handleBack = () => {
      uni.navigateBack()
    }

    // 加载消息列表
    const loadMessages = async (isLoadMore = false) => {
      if (listLoading.value) return
      if (isLoadMore && noMoreData.value) return

      listLoading.value = true
      try {
        if (!isLoadMore) {
          pageIndex.value = 1
          messageList.value = []
          noMoreData.value = false
        }

        const res = await getSystemMessages({
          pageIndex: pageIndex.value,
          pageSize: pageSize
        })

        if (res && (res.code === 0 || res.success) && res.data) {
          const items = res.data.items || res.data.list || []
          const total = res.data.total || 0

          if (isLoadMore) {
            messageList.value = [...messageList.value, ...items]
          } else {
            messageList.value = items
          }

          noMoreData.value = messageList.value.length >= total || items.length < pageSize
          pageIndex.value++
        }
      } catch (error) {
        console.error('加载系统消息失败:', error)
      } finally {
        listLoading.value = false
      }
    }

    // 初始化页面
    const initPage = async () => {
      pageLoading.value = true
      try {
        getSystemInfo()
        userStore.restoreFromStorage()
        await loadMessages()
      } catch (error) {
        console.error('初始化页面失败:', error)
      } finally {
        pageLoading.value = false
      }
    }

    // 筛选切换
    const handleFilterChange = (filter) => {
      if (currentFilter.value === filter) return
      currentFilter.value = filter
      loadMessages()
    }

    // 下拉刷新
    const handleRefresh = async () => {
      isRefreshing.value = true
      try {
        await loadMessages()
      } finally {
        isRefreshing.value = false
      }
    }

    // 加载更多
    const handleLoadMore = () => {
      if (!noMoreData.value && !listLoading.value) {
        loadMessages(true)
      }
    }

    // 点击消息
    const handleMessageClick = (item) => {
      // 如果有跳转链接
      if (item.linkUrl) {
        uni.navigateTo({ url: item.linkUrl })
      }
    }

    // 格式化时间
    const formatTime = (timestamp) => {
      return formatTimestamp(timestamp)
    }

    onMounted(() => {
      initPage()
    })

    return {
      statusBarHeight,
      scrollHeight,
      pageLoading,
      listLoading,
      noMoreData,
      isRefreshing,
      currentFilter,
      messageList,
      handleBack,
      handleFilterChange,
      handleRefresh,
      handleLoadMore,
      handleMessageClick,
      formatTime
    }
  }
}
</script>

<style lang="scss" scoped>
.system-message-page {
  height: 100vh;
  background-color: #f5f6fa;
}

// 顶部背景图
.top-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  z-index: 0;

  .bg-img {
    width: 100%;
    height: 100%;
  }
}

// 自定义导航栏
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .navbar-content {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;

    .navbar-back {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 56rpx;
        color: #333;
        font-weight: 300;
      }
    }

    .navbar-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
    }

    .navbar-placeholder {
      width: 80rpx;
    }
  }
}

// 筛选标签
.filter-section {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 16rpx 24rpx;

  .filter-tag {
    display: inline-block;
    padding: 12rpx 32rpx;
    font-size: 28rpx;
    color: #ff6b6b;
    background: #fff;
    border: 2rpx solid #ff6b6b;
    border-radius: 32rpx;

    &.active {
      color: #ff6b6b;
      background: #fff;
    }
  }
}

// 消息滚动区域
.message-scroll {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #f5f6fa;
}

// 消息列表
.message-list {
  padding: 24rpx;
  min-height: 100%;

  .message-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;

    &:active {
      background: #f8f8f8;
    }

    .message-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
      line-height: 1.4;
    }

    .message-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.8;
      margin-bottom: 16rpx;
    }

    .message-time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

// 空状态
.empty-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
