<!-- 辟谣信息列表页 -->
<template>
	<view class="rumor-info">
		<image src="http://111.198.10.15:11604/png/back_ts.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 460rpx;"></image>
		<!-- <view class="title">谣言曝光台</view> -->
		<!-- <view class="little-title">
			<text>自觉抵制网络谣言</text>
			<text style="margin-left: 32rpx;">共建清朗网络空间</text>
		</view> -->
		<!-- 搜索框 -->
		<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="rumor-area">
			<RumorList :list="rumorList"/>
		</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 RumorList from '../components/rumorList.vue'
	import { getPyxxList } from '@/api/index.js'
	import { stamp2Time } from '@/common/utils.js'
	export default {
		components: {
			RumorList
		},
		data() {
			return {
				keyword: '', // 搜索关键字
				isEmpty: false,   //数据是否为空
				scrollTop: 0,
				rumorList: [], // 列表数据
				pageIndex: 1, // 请求第几页
				loadingMoreStatus: 'loadmore', // 加载更多
			}
		},
		mounted() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.fetchPyxxList() // 获取列表
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: ' ',
				// imageUrl: '../../static/share.png',
				// path: "/pages/messageList/messageList",
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		//上滑加载
		onReachBottom() {
			this.loadingMoreStatus = 'loading' // 显示加载中
			this.pageIndex = this.pageIndex + 1 // 页数增加
			this.fetchPyxxList(this.keyword); // 获取列表
		},
		watch: {
			// 监听列表是否为空控制空组件显隐
			rumorList: {
				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.rumorList = []
				this.pageIndex = 1
				this.fetchPyxxList(this.keyword)
			},
			// 获取辟谣信息---对应联合辟谣平台的权威发布
			fetchPyxxList(title = '') {
				let param
				if(title === '') {
					param = {
						pageIndex: this.pageIndex,
						pageSize: 10,
						// siteRoleCode: 'zzqwxbPortal', // 辟谣课堂
						// catalogCode: 'yykt' // 辟谣课堂
						siteRoleCode: 'zzqwxbPortal', // 对应权威发布
						catalogCode: 'qwfb', // 对应权威发布
					}
				} 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.rumorList = this.rumorList.concat(list)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rumor-info {
		padding: 40rpx;
		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: 50rpx;
		}
	}
 
</style>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>