<!-- 通知公告列表页 -->
<template>
	<view class="notice-info">
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:fixed;top: -4rpx;left: 0;z-index: -999; width:100%;height: 460rpx;"></image>
		<!-- 搜索框 -->
		<view class="search-area">
			<u-search
				placeholder="请输入关键词" 
				v-model="keyword"
				bgColor="#fff"
				height="40"
				:actionStyle="{
					fontSize: '16px',
					color: '#fff',
					fontWeight: '600'
				}"
				clearabled
				@custom="search"
				@search="search"
			></u-search>
		</view>
		
		<view class="rumor-area">
			<NoticeList :list="noticeList"/>
		</view>
		<u-loadmore v-if="!isEmpty" :status="loadingMoreStatus" loadmoreText=" "/>
		<!-- 返回顶部 -->
		<u-back-top 
			:scroll-top="scrollTop" 
			icon="arrow-up" 
			customStyle="background: rgba(67, 144, 247, .7)"
			:iconStyle="{
					fontSize: '32rpx',
					color: '#fff',
					fontWeight: '600'
				}"
			duration="200"
		></u-back-top>
		
		<!-- 空 -->
		<u-empty
			v-if="isEmpty"
			mode="search"
			text="暂无结果"
			:show="true"
			iconColor="#77797d"
			textColor="#77797d"
			marginTop="270"
		></u-empty>
	</view>
</template>

<script>
	import { getNoticeList } from '@/api/index.js'
	import { stamp2Time } from '@/common/utils.js'
	import NoticeList from '../components/noticeList.vue'
	export default {
		components: {
			NoticeList
		},
		data() {
			return {
				isEmpty: false,   //数据是否为空
				scrollTop: 0,
				noticeList: [] ,// 列表数据
				pageIndex: 1, // 请求第几页
				loadingMoreStatus: 'loadmore', // 加载更多
				keyword:''
			}
		},
		mounted() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.fetchNoticeList()
		},
		//上滑加载
		onReachBottom() {
			this.loadingMoreStatus = 'loading'
			this.pageIndex = this.pageIndex + 1
			this.fetchNoticeList();
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: ' ',
				// imageUrl: '../../static/share.png',
				// path: "/pages/messageList/messageList",
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		watch: {
			noticeList: {
				handler(val){
					if(val.length) {
						this.isEmpty = false;
					} else {
						this.isEmpty = true;
					}
				},
				deep: true,
				// immediate: true,
			},
			keyword: {
				handler(val){
					if(!val.length) {
						this.fetchNoticeList()
					} 
				},
				deep: true,
				// immediate: true,
			},
			
		},
		// 监听滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 点击搜索
			search() {
				this.noticeList = this.noticeList.filter(item => item.title.indexOf(this.keyword) !== -1)
			},
			// 获取通知公告列表
			fetchNoticeList() {
				const param = {
					pageIndex: this.pageIndex, //当前页数（必传）
					pageSize: 10, //每页数 （必传）
					yuzhong: 'zh',//（必传）固定值
					siteRoleCode: 'xjwljb', //（必传）固定值
					catalogCode: 'tzgg', //（必传）固定值
				}
				getNoticeList(param).then(res => {
					let list = []
					list = res.map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title,
							publishTime: stamp2Time(item.publishDate),
							linkAddr: item.linkAddr
						}
					})
					if(!list.length || list.length < param.pageSize) {
						this.loadingMoreStatus = 'nomore'
					}
					this.noticeList = this.noticeList.concat(list)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.notice-info {
		padding: 40rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
		.title {
			color: #fff;
			font-size: 44rpx;
			font-weight: 600;
		}
		.little-title {
			color: #fff;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
		.search-area {
			// position: fixed;
			// box-sizing: border-box;
			// top: 0;
			// left: 0;
			// padding: 20rpx 40rpx;
			width: 100%;
			height: 130rpx;
			box-sizing: border-box;
			// margin-top: 106rpx;
		}
		.rumor-area {
			margin-bottom: 20rpx;
		}
	}
 
</style>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>