<template>
  <view class="container">
    <view v-for="item in list" :key="item.id" class="item">
      <uni-card :extra="item.createTime" :title="item.title" @click="detail(item)"></uni-card>
    </view>

    <!-- 加载更多状态 -->
    <view v-if="noData && list.length > 0" class="load-more">
      <text class="no-more-text">没有更多数据了</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getArticleList } from '@/api/article/article.js'
import { onUnload, onReachBottom } from '@dcloudio/uni-app'

const list = ref([])
const noData = ref(false)
const loading = ref(false)

//定义data参数
const queryParams = {
  pageNum: 1,
  pageSize: 6,
}

// 获取列表
const getList = async () => {
  if (loading.value) return

  try {
    loading.value = true
    let res = await getArticleList(queryParams)

    // 确保 res.data 存在且是数组
    const newData = res?.rows || []

    // 如果是第一页，直接替换数据
    if (queryParams.pageNum === 1) {
      list.value = newData
    } else {
      list.value = [...list.value, ...newData]
    }

    if (queryParams.pageNum * queryParams.pageSize >= res.total) {
      noData.value = true
    }

    console.log('订单列表:', list.value)
  } catch (error) {
    console.error('获取订单列表失败:', error)
    uni.showToast({
      title: '获取订单列表失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

const detail = item => {
  uni.navigateTo({
    url: `/pages/announcementList/announcementDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}`,
  })
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})

onUnload(() => {
  // 清理数据
  list.value = []
  noData.value = false
  loading.value = false
})

onReachBottom(() => {
  if (noData.value || loading.value) return
  queryParams.pageNum++
  getList()
})
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  padding: 20rpx;
}

.item {
  margin-bottom: 20rpx;
}

.uni-body {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
}

.load-more {
  margin-top: 20rpx;
  text-align: center;

  .no-more-text {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
