<template>
	<view class="rumor-info">
		<image src="http://111.198.10.15:11604/png/back.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"
			></u-search>
		</view>
		
		<view class="rumor-area">
			<RumorList :list="rumorList"/>
		</view>
		<u-loadmore :status="status" 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="80"
		></u-empty>
	</view>
</template>

<script>
	import RumorList from '../components/rumorList.vue'
	export default {
		components: {
			RumorList
		},
		data() {
			return {
				isEmpty: false,   //数据是否为空
				scrollTop: 0,
				rumorList: [] // 列表数据
			}
		},
		mounted() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			});
			this.rumorList = [
				{
					title: '薯片涨袋是变质了？',
					time: '2022-12-12'
				},
				{
					title: '成本是要一毛钱的鸡蛋泛滥？',
					time: '2022-12-12'
				},
				{
					title: '薯片涨袋是变质了？',
					time: '2022-12-12'
				},
				{
					title: '成本是要一毛钱的鸡蛋泛滥？',
					time: '2022-12-12'
				},
				{
					title: '薯片涨袋是变质了？',
					time: '2022-12-12'
				},
				{
					title: '成本是要一毛钱的鸡蛋泛滥？',
					time: '2022-12-12'
				},
				{
					title: '薯片涨袋是变质了？',
					time: '2022-12-12'
				},
				{
					title: '成本是要一毛钱的鸡蛋泛滥？',
					time: '2022-12-12'
				},
			]
		},
		//分享好友
		onShareAppMessage() {
			return {
				title: ' ',
				// imageUrl: '../../static/share.png',
				// path: "/pages/messageList/messageList",
			};
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '新疆网络举报',
			}
		},
		watch: {
			rumorList: {
				handler(val){
					if(val.length) {
						this.isEmpty = false;
					} else {
						this.isEmpty = true;
					}
				},
				deep: true,
				// immediate: true,
			}
		},
		// 监听滚动条位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			search() {
				
			},
		}
	}
</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: 106rpx;
		}
	}
 
</style>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>