<template>
	   <!-- 通知列表 -->
	    <scroll-view 
	      class="notice-list" 
	      scroll-y 
	      :refresher-enabled="true" 
	      :refresher-triggered="refreshing" 
	      :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.id" 
	        class="notice-item"
	        @click="goToDetail(notice)"
	      >
	        <!-- 通知标题 -->
			<view class="notice-header">
				<view class="notice-title">
				  {{notice.title}}
				</view>
				 <view class="unread-dot" v-if="notice.hasRead"></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.summary }}
	        </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';
	
	
	const noticeList = ref([
		{
			id:'1',
			title:'我那我是咖啡牛奶附件说的都是vv的v给v梵蒂冈v辅导报告发布',
			author:'张三',
			publishTime:'2026.3.5',
			summary:'为保障社区居民生命财产安全，维护社区和谐稳定，根据上级部门要求，结合我社区实际情况，现就进一步加强社区安全管理工作通知如下',
			hasRead:true
		},
		{
			id:'2',
			title:'今天停水了',
			author:'张三',
			publishTime:'2026.3.5',
			summary:'为保障社区居民生命财产安全，维护社区和谐稳定，根据上级部门要求，结合我社区实际情况，现就进一步加强社区安全管理工作通知如下',
			hasRead:true
			
		}
	])
	const refreshing = ref(false)
	const loadingMore = ref(false)
	const noMoreData = ref(false)
	const pageSize = 10
	const statusBarHeight = ref(0)
	const navBarHeight = 44
	// --方法----
	const goToDetail = () =>{
		uni.navigateTo({
			url:'/pages/notice-list/noticeListDetails'
		})
	}
	// 返回
	const narBack = () =>{
		// uni.navigateBack({
		// 	delta: 1
		// })
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	
</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>