<!-- 案例警醒列表页 -->
<template>
	<view class="egersis">
		<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: 300rpx;"></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"
				@change="changeKeyword"
				@clear="clearKeyword"
			></u-search>
		</view>
		
		<view class="egersis-area">
			<Egersis :list="egersisList"/>
		</view>
		<u-loadmore :status="loadingMoreStatus" loadmoreText=" " :nomore-text="isEmpty ? '' : '没有更多了'" />
		<!-- 返回顶部 -->
		<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="80"
		></u-empty>
	</view>
</template>

<script>
	import { getPyxxList } from '@/api/index.js'
	import { stamp2Time } from '@/common/utils.js'
	import Egersis from '../components/egersisList.vue'
	export default {
		components: {
			Egersis,
		},
		data() {
			return {
				isEmpty: false,   //数据是否为空
				scrollTop: 0,
				egersisList: [], // 列表数据
				keyword: '', // 搜索关键字
				pageIndex: 1, // 请求第几页
				loadingMoreStatus: 'loadmore', // 加载更多
			}
		},
		mounted() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.fetchAljxList() // 获取列表
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: ' ',
				imageUrl: '../../static/share.png',
				// path: "/pages/messageList/messageList",
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		//上滑加载
		onReachBottom() {
			this.loadingMoreStatus = 'loading'
			this.pageIndex = this.pageIndex + 1
			this.fetchAljxList(this.keyword);
		},
		watch: {
			egersisList: {
				handler(val){
					if(val.length) {
						this.isEmpty = false;
					} else {
						if(this.loadingMoreStatus !== 'loadmore') {
							this.isEmpty = true;
						}
					}
				},
				deep: true,
				// immediate: true,
			}
		},
		// 监听滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 搜索框内容变化
			changeKeyword(val) {
				this.keyword = val
			},
			// 搜索框清除按钮
			clearKeyword() {
				this.keyword = ''
			},
			search() {
				this.loadingMoreStatus = 'loadmore'
				this.egersisList = []
				this.pageIndex = 1
				this.fetchAljxList(this.keyword)
			},
			// 获取案例警醒---对应联合辟谣平台的热点聚焦
			fetchAljxList(title = '') {
				this.isEmpty = false
				let param
				if(title === '') {
					param = {
						pageIndex: this.pageIndex,
						pageSize: 10,
						// siteRoleCode: 'zzqwxbPortal', // 辟谣课堂
						// catalogCode: 'yykt' // 辟谣课堂
						siteRoleCode: 'zzqwxbPortal', // 对应权威发布
						catalogCode: 'rdjj', // 对应权威发布
					}
				} else {
					param = {
						pageIndex: this.pageIndex,
						pageSize: 10,
						title: title
					}
				}
				getPyxxList(param).then(res => {
					const list = res.map(item => {
						return {
							catalogId: item.catalogId,
							id: item.id,
							title: item.title, 
							contentSmallImage: item.contentSmallImage,
							publishTime: stamp2Time(item.publishDate), // 发布时间
							linkAddr: item.linkAddr, // 来源
						}
					})
					if(!list.length || list.length < param.pageSize) {
						this.loadingMoreStatus = 'nomore'
					}
					this.egersisList = this.egersisList.concat(list)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.egersis {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		padding-bottom: 60rpx;
	}
</style>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>