<template>
	   <!-- 通知列表 -->
	    <scroll-view
	      class="notice-list"
	      scroll-y
	      :refresher-enabled="true"
	      :refresher-triggered="refreshing"
	      @refresherrefresh="onRefresh"
	      @scrolltolower="loadMore"
	      :style="{ height: `calc(100vh - ${statusBarHeight + navBarHeight}px)` }"
	    >
		<view class="status_bar"></view>
		<!-- 顶部标题栏 -->
		<view class="top-bar">
			  <uni-nav-bar left-icon="left"  title="通知公告" backgroundColor ="none" :border="false" @clickLeft="narBack" />
		</view>
	      <!-- 下拉刷新 -->
	      <view class="refresh-container" v-if="refreshing">
	        <uni-icons type="spinner-cycle" size="20" color="#999" class="loading"></uni-icons>
	        <text class="refresh-text">刷新中...</text>
	      </view>

	      <!-- 通知列表项 -->
	      <view
	        v-for="(notice, index) in noticeList"
	        :key="notice.noticeId"
	        class="notice-item"
	        @click="goToDetail(notice)"
	      >
	        <!-- 通知标题 -->
			<view class="notice-header">
				<view class="notice-title">
				  {{notice.noticeTitle}}
				</view>
				 <view class="unread-dot" v-if="notice.readStatus"></view>
			</view>

			<!-- 红点 -->


	        <!-- 发布者和时间 -->
	        <view class="notice-meta">
	          <view class="notice-author">
	            <text class="author-name">{{notice.author}}</text>
	            <text class="separator">·</text>
	            <text class="publish-time">{{notice.publishTime}}</text>
	          </view>
	        </view>

	        <!-- 通知摘要 -->
	        <view class="notice-summary">
	          {{ notice.noticeContent }}
	        </view>
	        <!-- 详情 -->
	        <view class="notice-actions"  @click.stop="goToDetail(notice)">
	       <!--  <view class="read-status" :class="{ unread: !notice.hasRead }">
	            {{ notice.hasRead ? '已读' : '未读' }}
	          </view> -->
			  <view class="" >
			      <text style="color: #2F77FD;font-size:14px">详情 </text>
			   </view>
	          <!-- <button class="detail-btn" @click.stop="goToDetail(notice)"> -->
	            <!-- <text>详情 </text> -->
	            <uni-icons type="right" size="13" color="#007AFF"></uni-icons>
	          <!-- </button> -->
	        </view>
	      </view>

	      <!-- 加载更多 -->
	      <view v-if="loadingMore" class="load-more">
	        <uni-icons type="spinner-cycle" size="18" color="#999" class="loading"></uni-icons>
	        <text>加载中...</text>
	      </view>

	      <!-- 没有更多数据 -->
	      <view v-if="noMoreData && noticeList.length > 0" class="no-more">
	        没有更多通知了
	      </view>

	      <!-- 空状态 -->
	      <view v-if="noticeList.length === 0 && !loading" class="empty-state">
	        <!-- <image src="/static/empty-notice.png" mode="aspectFit" class="empty-image"></image> -->
	        <text class="empty-text">暂无通知</text>
	        <button class="btn-refresh" @click="loadNotices">刷新试试</button>
	      </view>
	    </scroll-view>

</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getNoticeList } from '../api/api.js'

	const noticeList = ref([])
	const refreshing = ref(false)
	const loadingMore = ref(false)
	const noMoreData = ref(false)
	const loading = ref(false)
	const pageNum = ref(1)
	const pageSize = 10
	const statusBarHeight = ref(0)
	const navBarHeight = 44

	// --方法----
	const goToDetail = (notice) =>{
		uni.navigateTo({
			url:'/pageSubPack/notice-list/noticeListDetails?id=' + (notice.id || '')
		})
	}

	// 获取列表接口
	const loadNotices = async (isRefresh = false) => {
		if (loading.value) return
		loading.value = true

		if (isRefresh) {
			pageNum.value = 1
			noMoreData.value = false
		}

		try {
			const res = await getNoticeList({
				pageNum: pageNum.value,
				pageSize: pageSize
			})
			if (res.code === 200) {
				const list = res.data.rows
				if (isRefresh) {
					noticeList.value = list
				} else {
					noticeList.value = [...noticeList.value, ...list]
				}
				if (list.length < pageSize) {
					noMoreData.value = true
				}
			} else {
				uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
			}
		} catch (err) {
			uni.showToast({ title: '网络异常', icon: 'none' })
		} finally {
			loading.value = false
			refreshing.value = false
			loadingMore.value = false
		}
	}

	// 下拉刷新
	const onRefresh = () => {
		refreshing.value = true
		loadNotices(true)
	}

	// 上拉加载更多
	const loadMore = () => {
		if (noMoreData.value || loadingMore.value || loading.value) return
		loadingMore.value = true
		pageNum.value++
		loadNotices()
	}

	// 返回
	const narBack = () =>{
		if(uni.getStorageSync('sourcePage') === "index"){
			uni.switchTab({
				url:"/pages/index/index"
			})
		}else if(uni.getStorageSync('sourcePage') === "serviceIndex"){
			uni.switchTab({
				url:"/pages/serviceIndex/serviceIndex"
			})
		}
		uni.removeStorageSync('sourcePage')
	}

	onLoad(() => {
		const sysInfo = uni.getSystemInfoSync()
		statusBarHeight.value = sysInfo.statusBarHeight || 0
		loadNotices(true)
	})

</script>

<style lang="scss">
/* 通知列表容器 */
.notice-list {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f9f9f9;
}
  .status_bar {
	height: 32px;
	width: 100%;
 }
/* 顶部标题 */
.top-bar {
  text-align: center;
  margin-bottom: 20rpx;
}

/* 下拉刷新 */
.refresh-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;

  .loading {
    animation: rotate 1s linear infinite;
    margin-bottom: 8px;
  }

  .refresh-text {
    font-size: 12px;
  }
}

/* 通知项样式 */
.notice-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: relative;

  &:active {
    background-color: #f9f9f9;
  }

  /* 重要通知标记 */
  &.important::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #ff6b6b;
    border-radius: 2px 0 0 2px;
  }
}
.notice-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* 通知标题 */
.notice-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12px;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  width: 290px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
    // 未读红点
.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff3b30;
 }

/* 元信息 */
.notice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #666;
  font-size: 12px;

  .notice-author {
    display: flex;
    align-items: center;

    .author-name {
      color: #666;
    }

    .separator {
      margin: 0 6px;
      color: #ccc;
    }

    .publish-time {
      color: #999;
    }
  }

  .notice-time {
    display: flex;
    align-items: center;

    .date-text {
      margin-left: 4px;
      color: #999;
    }
  }
}

/* 通知摘要 */
.notice-summary {
  font-size: 14px;
  color: #666;
  background-color: #f9f9f9;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作区域 */
.notice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .read-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #f0f0f0;
    color: #999;

    &.unread {
      background-color: #e6f7ff;
      color: #1890ff;
    }
  }

  .detail-btn {
    display: flex;
    align-items: flex-end;
    background: transparent;
    border: none;
    color: #007AFF;
    font-size: 14px;
    padding: 0;
	margin-right: 10rpx;

    &::after {
      border: none;
    }

    text {
      margin-right: 4px;
    }
  }
}

/* 分割线 */
// .divider {
//   height: 1px;
//   background-color: #f0f0f0;
//   margin-top: 16px;
// }

/* 加载更多 */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;

  .loading {
    animation: rotate 1s linear infinite;
    margin-right: 8px;
  }
}

.no-more {
  text-align: center;
  padding: 20px 0;
  color: #999;
  font-size: 14px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;

  .empty-image {
    width: 200px;
    height: 150px;
    margin-bottom: 20px;
  }

  .empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 20px;
  }

  .btn-refresh {
    background-color: #007AFF;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;

    &::after {
      border: none;
    }
  }
}


</style>
